JavaScript 表单验证：从基础校验到约束验证 API 详解

作者：纸飞机时间：2026-10-25 10:48:45浏览：345

本文详细介绍 JavaScript 实现表单验证的多种方法。涵盖基础的必填项与邮箱格式校验代码，以及 HTML5 引入的约束验证机制。重点解析约束验证 DOM API，包括 checkValidity、validity 属性及 setCustomValidity 自定义错误提示的使用，帮助开发者实现更完善的客户端数据校验。

一、JavaScript 表单验证

HTML 表单的验证功能可以通过 JavaScript 脚本来实现。

以下示例代码用于检查表单字段（fname）的值是否存在。如果该字段为空，则弹出提示信息并阻止表单提交：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

上述 JavaScript 代码可以通过以下 HTML 代码进行调用：

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

除了 JavaScript，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 浏览器不支持表单自动验证功能。

1、数据验证

数据验证旨在确保用户输入的数据有效且符合预期。

常见的数据验证场景包括：

必填字段是否已输入？
用户输入的数据是否合法？
数字字段中是否误输入了文本？

通常情况下，数据验证用于确保用户正确输入了所需数据。

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

1、必填（或必选）项目

以下函数用于检查用户是否已填写表单中的必填（或必选）项目。如果必填或必选项为空，则弹出警告框，且函数返回 false；否则函数返回 true（表示数据无误）：

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

上述函数在 form 表单提交时被调用：

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

2、E-mail 验证

以下函数用于检查输入的数据是否符合电子邮件地址的基本语法格式。

这意味着输入的数据必须包含 @ 符号和点号（.）。同时，@ 不能是邮件地址的首字符，并且 @ 之后需至少包含一个点号：

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}</atpos+2>

以下是包含 HTML 表单的完整代码示例：

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="提交">
</form>

服务端数据验证是在数据提交到服务器后再进行验证。
客户端数据验证（side validation）是在数据发送到服务器之前，在浏览器端完成验证。

2、约束验证

HTML5 引入了 HTML 表单的新验证方式：约束验证（constraint validation）。

约束验证是浏览器在表单提交时用于执行验证的一种算法机制。

HTML 约束验证基于以下三个方面：

HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

1、约束验证 HTML 输入属性

disabled：规定输入的元素不可用。
max：规定输入元素的最大值。
min：规定输入元素的最小值。
pattern：规定输入元素值的模式。
required：规定输入元素字段是必需的。
type：规定输入元素的类型。

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

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

:disabled：选取属性为 "disabled" 的 input 元素。
:invalid：选取无效的 input 元素。
:optional：选择没有 "required" 属性的 input 元素。
:required：选择有 "required" 属性的 input 元素。
:valid：选取有效值的 input 元素。

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

二、JavaScript 验证 API

约束验证 DOM 方法

checkValidity()：如果 input 元素中的数据合法，则返回 true，否则返回 false。

1、checkValidity() 方法

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

约束验证 DOM 属性

validity：布尔属性值，返回 input 输入值是否合法。
validationMessage：浏览器错误提示信息。
willValidate：指定 input 是否需要验证。

Validity 属性

input 元素的 validity 属性包含一系列关于 validity 数据属性的信息：

customError：如果设置了自定义的 validity 信息，则设置为 true。
patternMismatch：如果元素的值不匹配其模式属性，则设置为 true。
rangeOverflow：如果元素的值大于设置的最大值，则设置为 true。
rangeUnderflow：如果元素的值小于其最小值，则设置为 true。
stepMismatch：如果元素的值不是按照规定的 step 属性设置，则设置为 true。
tooLong：如果元素的值超过了 maxLength 属性设置的长度，则设置为 true。
typeMismatch：如果元素的值不是预期相匹配的类型，则设置为 true。
valueMissing：如果元素（具有 required 属性）没有值，则设置为 true。
valid：如果元素的值是合法的，则设置为 true。

以下示例在输入的值大于 100 时显示一条信息：

<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "输入的值太大了";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

2、setCustomValidity

setCustomValidity()：用于设置 input 元素的 validationMessage 属性，从而实现自定义错误提示信息的方法。

使用 setCustomValidity 设置自定义提示后，validity.customError 将变为 true，此时 checkValidity 总是会返回 false。若要重新进行判断，需要取消自定义提示，方式如下：

setCustomValidity('') 
setCustomValidity(null) 
setCustomValidity(undefined)

以下示例中，如果输入信息不合法，则返回错误信息：

var inpObj = document.getElementById("id1");
inpObj.setCustomValidity(''); // 取消自定义提示的方式
if (inpObj.checkValidity() == false) {
    if(inpObj.value==""){
        inpObj.setCustomValidity("不能为空！");
    }else if(inpObj.value<100 || inpObj.value>300){
        inpObj.setCustomValidity("请重新输入数值（100~300之间）!");
    }
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
    document.getElementById("demo").innerHTML = "输入正确";
}

三、表单文本框自动验证

(function(){
       if(window.addEventListener) window.addEventListener("load",init,false);
       else if(window.attachEvent) window.attachEvent("onload",init);
        
      function init(){
       for(var i=0;i)
       {
           var f=document.forms[i];//第i个form
           var needValidation = false;// Assume ,for now,that this form does not need any validation
            
           for(var j=0;j)
           {
               e = f.elements[j];
                
               if(e.type!="text") continue;
               var pattern = e.getAttribute("pattern");
               var required = e.getAttribute("required")!=null;
               //See if it has attribute that require validation
               if(required&&!pattern){
               pattern = "<a href="https://www.cnblogs.com/springsnow/p/$s" rel="external nofollow"   target="_blank">\\s</a>"; 
               e.setAttribute("pattern",pattern);
               }
 
               if(e.pattern){
               e.onchange = validateOnChange;
                
               needsValidation = true;
               }
          }
       if(needValidation) f.onsubmit = validateOnSubmit;
        }
        }
      function validateOnChange()
        {   var textfield = this;
            var pattern = textfield.getAttribute("pattern");
            var value = textfield/*this*/.value;
             
            if(value.search(pattern)==-1) textfield.classname = "invalid";
            else textfield.classname = "valid";
        }
      function validateOnSubmit()
        {
            var invalid = false;
            for(var i=0;i<this.elements.length;i++)
               {
                  var e = this.elements[i];
                  if(e.type =="text" && e.onchange == validateOnChange){
                    e.onchange();
                    if(e.classname == "invalid") invalid = true;
                   }
                }
            if(invalid){
             alert("The form is incompletely or incorrectly filled out.\n "+"Please correct the highlighted field and try again");
             return false;
            }
        }
})();</f.elements.length;j++</document.forms.length;i++

调用方式如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style >
    input.invalid { background-color:#fa0;}
</style>
</head>
 
<body>
<form action="test.asp">
Name:<input type="text" name="name" required  /><br />
email:<input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$" /><br />
zipcode:<input type="text" name="zip" pattern = "^\s*\d{5}\s*$" />

unvalidated:<input type="text" onchange='alert("test")' /><br />
<input type="submit" />
</form>

到此为止，关于 JavaScript 实现表单验证的介绍已完成。希望本文对你的学习有所帮助，也欢迎大家继续支持本站。

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28