JavaScript 表单
JavaScript 表单验证
HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：
JavaScript 实例
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
以上 JavaScript 代码可以通过 HTML 代码来调用：
HTML 表单实例
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
尝试一下 »
JavaScript 验证输入的数字
JavaScript 常用于对输入数字的验证：
HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
实例
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
尝试一下 »
Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。
数据验证
数据验证用于确保用户输入的数据是有效的。
典型的数据验证有：
- 必需字段是否有输入?
- 用户是否输入了合法的数据?
- 在数字字段是否输入了文本?
大多数情况下，数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义，并通过多种方式来调用。
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。
HTML 约束验证
HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于：
- HTML 输入属性
- CSS 伪类选择器
- DOM 属性和方法
约束验证 HTML 输入属性
| 属性 | 描述 |
|---|---|
| disabled | 规定输入的元素不可用 |
| max | 规定输入元素的最大值 |
| min | 规定输入元素的最小值 |
| pattern | 规定输入元素值的模式 |
| required | 规定输入元素字段是必需的 |
| type | 规定输入元素的类型 |
完整列表，请查看 HTML 输入属性。
约束验证 CSS 伪类选择器
| 选择器 | 描述 |
|---|---|
| :disabled | 选取属性为 "disabled" 属性的 input 元素 |
| :invalid | 选取无效的 input 元素 |
| :optional | 选择没有"optional"属性的 input 元素 |
| :required | 选择有"required"属性的 input 元素 |
| :valid | 选取有效值的 input 元素 |
完整列表，请查看 CSS 伪类。
机械挨踢男
219***3799@qq.com
关于多表单使用同一验证函数问题：
上面用 js 表单验证判断表单字段(fname)值是否存在，如果想多个表单都使用同一个函数调用，传入参数后功能会失效，希望有大佬能解决这个问题。
现在我在网上找到的替代方法如下：
function validateForm(form) { var x = form.name.value; if (x == null || x == "") { alert("输入不能为空！"); return false; } }所有表单调用时都使用：
经验证好使。
机械挨踢男
219***3799@qq.com
汉森
wei***611@126.com
参考地址
onsubmit="return validateForm()" 为什么不是 onsubmit="validateForm()" ？？
onsubmit="validateForm()" 能够调用 validateForm() 对表单进行验证，但是在验证不通过的情况下，并不能阻止表单提交。
onsubmit="return validateForm()" 当验证不通过时，返回 false，可以阻止表单提交。
为何？
原来 onsubmit 属性就像是 <form> 这个 html 对象的一个方法名，其值（一字符串）就是其方法体，默认返回 true；
相当于:
Form.prototype.onsubmit = function() { return validateForm() };这样复写了 onsubmit 的默认方法（默认返回 true），根据 validateForm() 的结果返回 true 或 false，当验证不通过时，返回 false，onsubmit="return false;" 阻止表单提交。
汉森
wei***611@126.com
参考地址
疾风无名
190***8209@qq.com
用户体验提示
表单验证 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 影响需要提前处理。
疾风无名
190***8209@qq.com
Eli
936***055@qq.com
正则实现表单验证：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function validateForm() { var x = document.forms["myForm"]["fname"].value; var pattern=/\S+/ //正则匹配空格等空白内容,限定符用*会出错，因为任意字串都会被匹配到 if (x == null || !pattern.test(x)) { alert("需要输入名字。"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </body> </html>Eli
936***055@qq.com