参考手册
JavaScript 表单
返回 JavaScript 表单

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. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function validateForm() {
  6.   var x = document.forms["myForm"]["fname"].value;
  7.   if (x == "") {
  8.     alert("必须填写姓名！");
  9.     return false;
  10.   }
  11. }
  12. </script>
  13. </head>
  14. <body>
  16. <form name="myForm" action="/example/html/action_page.aspx" onsubmit="return validateForm()" method="post">
  17.   姓名：<input type="text" name="fname">
  18.   <input type="submit" value="提交">
  19. </form>
  21. </body>
  22. </html>
运行一下

JavaScript 能够验证数字输入

JavaScript 常用于验证数字输入。

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

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

自动 HTML 表单验证

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <form action="/example/html/action_page.aspx" method="post">
  6.   <input type="text" name="fname" required="">
  7.   <input type="submit" value="提交">
  8. </form>
  10. <p>如果单击“提交”，而不填写文本字段，您的浏览器将显示错误消息。</p>
  12. </body>
  13. </html>
运行一下

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

约束验证 DOM 方法

属性描述
checkValidity()返回 true，如果 input 元素包含有效数据
setCustomValidity()设置 input 元素的 validationMessage 属性。

checkValidity() 方法

如果输入字段包含无效的数据，显示一条消息：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>输入数字并点击提交：</p>
  7. <input id="id1" type="number" min="100" max="300" required="">
  9. <button onclick="myFunction()">提交</button>
  11. <p>如果该数字小于 100 或大于 300，将显示错误消息。</p>
  13. <p id="demo">
  15. <script>
  16. function myFunction() {
  17.   var inpObj = document.getElementById("id1");
  18.   if (!inpObj.checkValidity()) {
  19.     document.getElementById("demo").innerHTML = inpObj.validationMessage;
  20.   } else {
  21.     document.getElementById("demo").innerHTML = "输入有效";
  22.   } 
  23. } 
  24. </script>
  26. </body>
  27. </html>
运行一下

约束验证 DOM 属性

属性描述
validity包含与 input 元素的合法性相关的布尔属性。
validationMessage包含当 validity 为 false 时浏览器显示的消息。
willValidate指示是否验证 input 元素。

合法性属性

input 元素的 validity 属性包含了与数据合法性相关的一系列属性：

属性描述
customError设置为 true，如果设置自定义的合法性消息。
patternMismatch设置为 true，如果元素值不匹配其 pattern 属性。
rangeOverflow设置为 true，如果元素值大于其 max 属性。
rangeUnderflow设置为 true，如果元素值小于其 min 属性。
stepMismatch当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。
tooLong设置为 true，如果元素值超过了其 maxLength 属性。
typeMismatch当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。
valueMissing设置为 true，如果元素（包含 required）没有值。
valid设置为 true，如果元素值是有效的。

实例

如果输入字段中的数字大于 100（input 元素的 max 属性），则显示一条消息：

rangeOverflow 属性
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>输入数字并点击提交：</p>
  7. <input id="id1" type="number" max="100">
  9. <button onclick="myFunction()">提交</button>
  11. <p>如果数字大于 100（输入的 max 属性），将显示错误消息。</p>
  13. <p id="demo">
  15. <script>
  16. function myFunction() {
  17.   var txt = "";
  18.   if (document.getElementById("id1").validity.rangeOverflow) {
  19.     txt = "值太大";
  20.   } else {
  21.     txt = "输入有效";
  22.   } 
  23.   document.getElementById("demo").innerHTML = txt;
  24. }
  25. </script>
  27. </body>
  28. </html>
运行一下

如果输入字段中的数字小于 100（input 元素的 min 属性），则显示一条消息：

rangeUnderflow 属性
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>输入数字并点击提交：</p>
  7. <input id="id1" type="number" min="100">
  9. <button onclick="myFunction()">提交</button>
  11. <p>如果数字小于100（输入的 min 属性），将显示错误消息。</p>
  13. <p id="demo">
  15. <script>
  16. function myFunction() {
  17.   var txt = "";
  18.   if (document.getElementById("id1").validity.rangeUnderflow) {
  19.     txt = "值太小";
  20.   } else {
  21.     txt = "输入有效";
  22.   }
  23.   document.getElementById("demo").innerHTML = txt;
  24. }
  25. </script>
  27. </body>
  28. </html>
运行一下

分类导航