JavaScript 表单

JavaScript 表单验证

HTML 表单验证能够通过 JavaScript 来完成。

如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去：

JavaScript 实例

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("必须填写姓名");
        return false;
    }
}

该函数能够在表单提交时被调用：

HTML 表单实例

<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="Submit">
</form>

亲自试一试

JavaScript 能够验证数字输入

JavaScript 常用于验证数字输入：

请输入 1 到 10 之间的数字：

提交

亲自试一试

自动 HTML 表单验证

HTML 表单验证能够被浏览器自动执行：

如果表单字段（fname）是空的，required 属性防止表单被提交：

HTML 表单实例

<form action="/action_page_post.php" method="post">
   <input type="text" name="fname" required>
   <input type="submit" value="Submit">
</form>

亲自试一试

自动 HTML 表单验证不适用于 Internet Explorer 9 或更早的版本。

数据验证

数据验证指的是确保干净、正确和有用的用户输入的过程。

典型的验证任务是：

  • 用户是否已填写所有必需的字段？
  • 用户是否已输入有效的日期？
  • 用户是否在数字字段中输入了文本？

大多数情况下，数据验证的作用是确保正确的用户输入。

验证可以通过很多不同的方法来定义，并且可以使用很多不同的方法来开发。

服务器端验证是由 web 服务器执行的，在输入被送往服务器之后。

客户端验证是由 web 浏览器执行的，在输入被送往 web 服务器之前。

HTML 约束验证

HTML5 引入了一种新的 HTML 验证概念，名为约束验证（constraint validation）。

HTML 约束验证基于：

  • 约束验证 HTML 输入属性
  • 约束验证 CSS 伪选择器
  • 约束验证 DOM 属性和方法

约束验证 HTML 输入属性

属性 描述
disabled 规定 input 元素应该被禁用
max 规定 input 元素的最大值
min 规定 input 元素的最小值
pattern 规定 input 元素的值模式
required 规定输入字段需要某个元素
type 规定 input 元素的类型

如需完整的列表，请访问我们的 HTML input 属性。

约束验证 CSS 伪选择器

选择器 描述
:disabled 选择设置了 "disabled" 属性的 input 元素。
:invalid 选择带有无效值的 input 元素。
:optional 选择未设置 "required" 属性的 input 元素。
:required 选择设置了 "required" 属性的 input 元素。
:valid 选择带有有效值的 input 元素。

如需完整列表，请访问 CSS 伪类。