声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

17、JavaScript表单

17.1 表单验证

HTML 表单验证可以通过 JavaScript 来完成。

以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交

名字: 

17.2 输入数字验证

JavaScript 验证输入

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



提交

17.3 HTML表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。如果表单字段 (fname) 的值为空, required 属性会阻止表单提交

Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。

  
  


点击提交按钮，如果输入框是空的，浏览器会提示错误信息。

17.4 数据验证

数据验证用于确保用户输入的数据是有效的。

典型的数据验证有：

• 必需字段是否有输入?
• 用户是否输入了合法的数据?
• 在数字字段是否输入了文本?

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

数据验证可以使用不同方法来定义，并通过多种方式来调用。

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

1、约束验证HTML输入属性

完整列表，请查看 HTML 输入属性。

2、约束验证CSS伪类选择器

完整列表，请查看 CSS 伪类。

随堂笔记（存疑）

1. 关于多表单使用同一验证函数问题：

上面用 js 表单验证判断表单字段(fname)值是否存在，如果想多个表单都使用同一个函数调用，传入参数后功能会失效，希望有大佬能解决这个问题。

现在我在网上找到的替代方法如下：

function validateForm(form) {
    var x = form.name.value;
    if (x == null || x == "") {
        alert("输入不能为空！");
        return false;
    }
}

所有表单调用时都使用：

onsubmit="return validateForm(this)"

经验证好使。

2. onsubmit="return validateForm()" 为什么不是 onsubmit="validateForm()" ？？

   onsubmit="validateForm()" 能够调用 validateForm() 对表单进行验证，但是在验证不通过的情况下，并不能阻止表单提交。

   onsubmit="return validateForm()" 当验证不通过时，返回 false，可以阻止表单提交。

   为何？

   原来 onsubmit 属性就像是 < form > 这个 html 对象的一个方法名，其值（一字符串）就是其方法体，默认返回 true；

onsubmit="return validateForm()"

? 相当于:

Form.prototype.onsubmit = function() {
    return validateForm()
};

? 这样复写了 onsubmit 的默认方法（默认返回 true），根据 validateForm() 的结果返回 true 或 false，当验证不通过时，返回 false，onsubmit="return false;" 阻止表单提交。

3. 用户体验提示

   表单验证 html 属性 required 有几个缺陷。

   就是当一个 input 设置为 required 的时候，在初始化时，因为其本身是空的，所以 invalid 伪类会对它起作用，这不是我们想看到的，此时我们什么还都没有做。

   我们可以统一在这些伪类前加上父选择器 .invalid，这时只有在父元素具有 invalid 类时，这些伪类才会起作用。可以设置一个 submit 事件，在表单提交因验证失败后，会触发 input 的 invalid 事件，给 form 添加 invalid 类：

   form.addEventListener('invalid'， function() {this.className = 'invalid'}， true)
   

   因为 invaild 是 Input 的事件，而不是 form 的事件，所以这里我们设置第三个参数为 true 采用事件捕获的方式处理，另外 css 选择器的使用对 this.className 影响需要提前处理。

4. 正则实现表单验证：

名字: