跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

JavaScript 表单验证禁用与选择框编程详解

表单验证禁用可通过 novalidate 属性或 formNoValidate 按钮实现,支持 JavaScript 动态控制。文章深入解析了选择框编程核心,涵盖 HTMLSelectElement 与 HTMLOptionElement 的关键属性,如 options 集合管理、选中项索引及值获取规则。推荐使用专用属性替代标准 DOM 操作以提升跨浏览器兼容性,同时注意选择框 change 事件在选中时立即触发的特殊行为,优化表单交互体验。

协议工匠发布于 2024/10/1更新于 2026/10/2582 浏览
JavaScript 表单验证禁用与选择框编程详解

表单验证禁用

通过指定 novalidate 属性可以禁止对表单进行任何验证。这个值也可以通过 JavaScript 属性 noValidate 检索或设置,设置为 true 表示属性存在,设置为 false 表示属性不存在:

document.forms[0].noValidate = true; // 关闭验证

如果一个表单中有多个提交按钮,那么可以给特定的提交按钮添加 formnovalidate 属性,指定通过该按钮无须验证即可提交表单。在这个例子中,第一个提交按钮会让表单像往常一样验证数据,第二个提交按钮则禁用了验证,可以直接提交表单。我们也可以使用 JavaScript 来设置这个属性:

// 关闭验证
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

选择框编程

选择框是使用 <select> 和 <option> 元素创建的。为方便交互,HTMLSelectElement 类型在所有表单字段的公共能力之外又提供了以下属性和方法:

  • add(newOption, relOption):在 relOption 之前向控件中添加新的选项。
  • multiple:布尔值,表示是否允许多选,等价于 HTML 的 multiple 属性。
  • options:控件中所有 <option> 元素的 HTMLCollection。
  • remove(index):移除给定位置的选项。
  • selectedIndex:选中项基于 0 的索引值,如果没有选中项则为 -1。对于允许多选的列表,始终是第一个选项的索引。
  • size:选择框中可见的行数,等价于 HTML 的 size 属性。

选择框的 type 属性可能是 "select-one" 或 "select-multiple",具体取决于 multiple 属性是否存在。当前选中项根据以下规则决定选择框的 value 属性:

  • 如果没有选中项,则选择框的值是空字符串。
  • 如果有一个选中项,且其 value 属性有值,则选择框的值就是选中项 value 属性的值。即使 value 属性的值是空字符串也是如此。
  • 如果有一个选中项,且其 value 属性没有指定值,则选择框的值是该项的文本内容。
  • 如果有多个选中项,则选择框的值根据前两条规则取得第一个选中项的值。

来看下面的选择框示例结构:

<select name="location">
  <option value="Sunnyvale, CA">Sunnyvale</option>
  <option value="">China</option>
  <option>Australia</option>
</select>

如果选中这个选择框中的第一项,则字段的值就是 "Sunnyvale, CA"。如果文本为 "China" 的项被选中,则字段的值是一个空字符串,因为该项的 value 属性是空字符串。如果选中最后一项,那么字段的值是 "Australia",因为该元素没有指定 value 属性。

每个 <option> 元素在 DOM 中都由一个 HTMLOptionElement 对象表示。HTMLOptionElement 类型为方便数据存取添加了以下属性:

  • index:选项在 options 集合中的索引。
  • label:选项的标签,等价于 HTML 的 label 属性。
  • selected:布尔值,表示是否选中了当前选项。把这个属性设置为 true 会选中当前选项。
  • text:选项的文本。
  • value:选项的值(等价于 HTML 的 value 属性)。

大多数属性是为了方便存取选项数据。可以使用常规 DOM 功能存取这些信息,只是效率比较低,如下面的例子所示:

let selectbox = document.forms[0].elements["location"];
// 不推荐
let text = selectbox.options[0].firstChild.nodeValue; // 选项文本
let value = selectbox.options[0].getAttribute("value"); // 选项值

以上代码使用标准的 DOM 技术获取了选择框中第一个选项的文本和值。下面再比较一下使用特殊选项属性的代码:

let selectbox = document.forms[0].elements["location"];
// 推荐
let text = selectbox.options[0].text; // 选项文本
let value = selectbox.options[0].value; // 选项值

在操作选项时,最好使用特定于选项的属性,因为这些属性得到了跨浏览器的良好支持。在操作 DOM 节点时,与表单控制实际的交互可能会因浏览器而异。不推荐使用标准 DOM 技术修改元素的文本和值。

最后强调一下,选择框的 change 事件与其他表单字段是不一样的。其他表单字段会在自己的值改变后触发 change 事件,然后字段失去焦点。而选择框会在选中一项时立即触发 change 事件。

目录

  1. 表单验证禁用
  2. 选择框编程

更多推荐文章

查看全部
  • Linux 命令行参数与环境变量:基础用法与底层原理
  • 算法实战:位运算解决两数之和、唯一数字与缺失数字
  • Go Channel 深入解析:从语义到 Runtime 底层实现
  • Rust 与 WebAssembly 深度实战:浏览器与 Node.js 高性能部署
  • Visual C++ 运行库安装与 DLL 缺失问题修复指南
  • MySQL 表操作实战:创建、修改与删除详解
  • Java 读写锁的应用场景
  • 前端面试核心考点梳理:从基础原理到框架实战
  • 通义千问插件在 IDEA 中的 Java 开发实战应用
  • 大模型核心任务类型与应用场景详解
  • Stable Diffusion Windows 环境搭建与使用指南
  • C++ 入门进阶:输入输出、缺省参数与函数重载
  • Trae 集成 Vizro:低代码构建专业数据可视化仪表板
  • 混合知识库搭建:本地 Docker 部署 Neo4j 图数据库与 Milvus 向量库
  • Git 版本控制系统入门教程
  • 深入解析 AI 大模型:概念、技术架构与产业现状
  • Java 数据结构实战:二叉树与哈希表详解
  • AIGC 自动化编程实战:Python、Java、JavaScript 与 VBA
  • OpenAI 回击马斯克骚扰指控;微软清华提出 Diff Transformer
  • C++ STL 容器详解:unordered_map 与 unordered_set 用法及性能分析

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online