HTML5中针对表单新增的验证属性如required、pattern以及一些特定input类型，当验证不通过时，都有默认的提示语句，但实践中发现并不怎么友好，因此，需要自定义提示语句，使用setCustomValidity()。在此之前，需要介绍一下表单的validityState对象。
HTML5表单新增的属性中有一个validity属性，通过该属性可以获得一个validityState的对象，而validityState对象针对表单的几个错误验证又提供了8个属性：

valueMissing
必填项为空，返回true，否则返回false，配合required属性使用
typeMismatch
判断输入类型是否匹配，不匹配返回true，否则返回false，配合email、number、url等类型使用
patternMismatch
判断正则是否通过，没通过返回true，通过返回false，配合pattern属性使用
toolong
判断当前元素的值的长度是否大最大值，大于返回true，否则返回false，配合maxlength使用，但实际上如果设置maxlength，就无法输入超出长度范围的值
rangeUnderflow
判断当前元素值是否小于min，与min属性配合，不与max比较
rangeOverflow
判断当前元素值是否大于max，与max属性配合，不与min比较
stepMismatch
判断当前元素值是否符合step要求，与step属性配合
customError
使用自定义的验证错误提示信息，配合setCustomValidity()方法使用；
如果使用了setCustomValidity()方法，customError属性返回true，那么当输入正确时，不能使用上述的任何一种属性验证输入是否正确，所有的验证都返回false，表单的验证逻辑将会出现bug。因此，在自定义错误提示信息时，需要首先使用input.value判断输入是否为空，如果不是空值，调用input.setCustomValidity(“”)将提
示信息设为空，从而屏蔽输入正确时出现的验证逻辑错误，之后再设置自定义错误提示语，示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5中修改表单验证默认提示语句</title>

</head>
<body>
<form>
    <input id="userName" type="text" required pattern="^[a-zA-Z0-9]{6,12}$" placeholder="请输入用户名"/>
    <input type="submit" value="提交"/>
</form>
</body>
<script>
    var userName=document.getElementById("userName");
    userName.onblur=function(){
        if(userName.validity.patternMismatch){
            userName.setCustomValidity("用户名只能是英文或者数字,长度6到12位");
        }else if(userName.validity.valueMissing){//valueMissing目的：确保表单控件中的值已填写 用法：在表单控件中将required特性设置为true。  userName.setCustomValidity("用户名不能为空");
        }else{
            userName.setCustomValidity("");//现将有输入时的提示设置为空  }
    }
</script>
</html>

显式验证

在HTML5中，form元素与input元素（包括select与textarea元素）都具有checkValidity()方法，调用该方法可以显式的对表单内所有元素内容或单个元素内容进行有效性验证。该方法的返回类型为boolean。示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>checkValidity 示例</title>
    <script type="text/javascript">
        var check=function(){
            var emailEmnt=document.forms['testForm'].email; //输出表单email属性值为testForm的 emailEmnt document.forms['testForm'] 表示获取当前页面的id="testForm"的表单  var emailTxt=emailEmnt.value;//输出表单email属性值为testForm的 emailEmnt的值  if(emailTxt==""){
                alert('请输入邮箱地址');
                return false;
            }else if(email.checkValidity()){
                alert('请输入正确的邮箱地址');
                return false;
            }
            return true;
        }

    </script>
</head>
<body>
<form id="testForm" name="testForm" onsubmit="return check();">
    <label id="email" for="email">E-mail:</label>
    <input type="email" name="email"/>
    <button type="submit">提交</button>
</form>
</body>
</html>

取消验证

有时可能想把表单临时提交一下，但又不想让它进行有效性验证。有两种方法可以取消表单验证。

第一种方法是利用form元素的novalidate属性，它可以关闭整个表单验证。当整个表单需要验证的内容较多，但又想先提交一部分内容时，可以使用该方法。先把表单的该属性设置为true，关闭表单验证，并提交第一部分内容，然后在将要提交第二部分内容时，再将该属性设置为false，打开表单验证，进行第二部分内容的提交。

第二种方法是利用input元素或submit元素的formnovalidate属性，利用input元素的formnovalidate属性可以让表单验证对单个input元素失效；而如果对submit按钮使用该属性，点击按钮时，相当于利用了form元素的novalidate属性，整个表单验证都将关闭。

利用这一点可以实现“假提交”与“真提交”的效果。

自定义错误信息

HTML5中许多新的input元素都带有对输入内容进行有效性检查的功能，如果检查不通过，浏览器会针对该元素提供错误信息。但有时开发者不想使用这些默认的错误信息提示，而想使用自定义的信息提示，或者有时想给某个文本框增加一种错误信息提示等。要实现这样的功能，可以使用JavaScript调用各input元素的setCustomValidity()方法来自定义错误信息。示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自定义错误信息示例</title>
    <script>
        var check= function () {
            var passwd1=document.forms['testForm'].passwd1;
            var passwd2=document.forms['testForm'].passwd2;
            if(passwd1.value!=passwd2.value){
                passwd2.setCustomValidity('密码不一致');
                return false;
            }else{
                passwd2.setCustomValidity('');
            }
            var email1=document.forms['testForm'].email1;
            if(!email1.checkValidity()){
                email1.setCustomValidity("请输入正确的E-mail地址！");
                return false;
            }
            return true;
        }

    </script>
</head>
<body>
<form id="testForm" name="testForm" onsubmit="return check();">
    <label id="pass1" for="pass1">密码:</label><input type="password" name="passwd1"/><br/>
    <label id="pass2" for="pass2">确认密码:</label><input type="password" name="passwd2"/><br/>
    <label id="email" for="email">E-mail:</label><input type="email" name="email1"/><br/>
    <button type="submit">提交</button>
</form>
</body>
</html>

秒客网

HTML5中修改表单验证默认提示语句

显式验证

取消验证

自定义错误信息

相关文章