JavaScript 表单验证

HTML 表单验证能够通过 JavaScript 来完成。
如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去：

JavaScript 实例

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

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

HTML 表单实例

  1. <head>
  2. <script>
  3. function validateForm() {
  4.   var x = document.forms["myForm"]["fname"].value;
  5.   if (x == "") {
  6.     alert("必须填写姓名！");
  7.     return false;
  8.   }
  9. }
  10. </script>
  11. </head>
  12. <body>
  14. <form name="myForm" action="/demo/action_page.php" onsubmit="return validateForm()" method="post">
  15.   姓名：<input type="text" name="fname">
  16.   <input type="submit" value="提交">
  17. </form>
  19. </body>

亲自试一试

JavaScript 能够验证数字输入

JavaScript 常用于验证数字输入：

  1. <body>
  3. <h2>JavaScript 能够验证输入</h2>
  5. <p>请输入 1 与 10 之间的数：</p>
  7. <input id="numb">
  9. <button type="button" onclick="myFunction()">提交</button>
  11. <p id="demo"></p>
  13. <script>
  14. function myFunction() {
  15.   var x, text;
  17.   // 获取 id="numb" 的输入字段的值
  18.   x = document.getElementById("numb").value;
  20.   // 如果 x 不是数字或小于 1 或大于 10
  21.   if (isNaN(x) || x < 1 || x > 10) {
  22.     text = "输入无效";
  23.   } else {
  24.     text = "输入有效";
  25.   }
  26.   document.getElementById("demo").innerHTML = text;
  27. }
  28. </script>
  30. </body>

请输入 1 到 10 之间的数字：
提交
亲自试一试

自动 HTML 表单验证

HTML 表单验证能够被浏览器自动执行：
如果表单字段（fname）是空的，required 属性防止表单被提交：

HTML 表单实例

<body>

<form action="/demo/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="提交">
</form>

<p>如果单击“提交”，而不填写文本字段，您的浏览器将显示错误消息。</p>

</body>

亲自试一试
自动 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 伪类。