博客

有如下HTML结构：

<form action="ok.html">
    <input type="text" pattern="\d{1,3}"  required id="myinput">
    <p>
        <input type="submit" value="提交">
    </p>
</form>

当提交的信息出错的时候，默认的HTML5提示是：

“请填写此字段”  —  没有填写内容，违反了 required “必填”要求

“请匹配要求的格式”  — 内容不合法，违反了 pattern 的正则要求。

如何修改错误提示信息呢？

HTML5为所有表单元素添加了一个JS属性：input.validity      “有效，合法性” ，并且添加了个事件 invalid “出错事件，内容无效事件”。

注：不同于 onerror事件，onerror 事件会在文档或图像加载过程中发生错误时被触发。

我们可以利用input标签的invalid事件，输出  input.validity 看看。

  var myinput  = document.querySelector("#myinput");
    function  invalidFun(e){
        var tag = e.target ; // input标签
        console.info(tag.validity); 
    }
    
    // invalid  输入内容错误事件。包括，为空，格式错误等
    myinput.addEventListener("invalid" ,invalidFun,false);

valid: false  //当前输入是否有效

badInput: false  //输入无效，如number框输入abc

patternMismatch: false //正则表达式验证失败

rangeOverflow:  false //输入值超过max的限定

rangeUnderflow: false //输入值小于min的限定

tooLong : false //输入的字符数超过maxlength

tooShort :   false //输入的字符数小于minlength

stepMismatch : false //输入的数字不符合step限制

typeMismatch : false //输入值不符合email、url的验证

valueMissing : false //未输入值，违反了required要求

customError :  false //是否存在自定义错误

上述属性值的特性：
  
(1)只要有一个验证方面错误，某个属性就为true，valid值为false
  
(2)只有没有任何验证错误，所有的属性都为false，valid才能为true
 
 (3)上述的每个错误在浏览器内部都有一个预定义的错误提示消息
 
 (4)所有的错误消息中，只要存在“自定义的错误消息”，浏览器只显示自定义的错误消息，优先级高于浏览器预定义的错误消息
 
 (5)当前没有自定义错误消息，所以customError :  false 

如果要自定义错误信息，可以判断错误的类型：

 var myinput  = document.querySelector("#myinput");
    function  invalidFun(e){
        var tag = e.target ; // 标签
        console.info(tag.validity);
        if( tag.validity.valueMissing ){
            myinput.setCustomValidity("内容必须要填哦");
        }else if( tag.validity.patternMismatch ){
            myinput.setCustomValidity("格式不正确！请输入合法的三位数。");
        }else{
            myinput.setCustomValidity("其他错误");
        }
    }

    // invalid  输入内容错误事件。包括，为空，格式错误等
    myinput.addEventListener("invalid" ,invalidFun,false);

设置自定义错误消息的方法：
input.setCustomValidity(‘错误提示消息’);  //这个相当于将input.validity.customError:true

但是，当表单元素没有错误的时候，需要取消自定义错误消息，否则表单无法提交：
input.setCustomValidity(“”);     //这个相当于将input.validity.customError:false

var myinput  = document.querySelector("#myinput");
    function  invalidFun(e){
        var tag = e.target ; // 标签
        console.info(tag.validity);
        if( tag.validity.valueMissing ){
            myinput.setCustomValidity("内容必须要填哦");
        }else if( tag.validity.patternMismatch ){
            myinput.setCustomValidity("格式不正确！请输入合法的三位数。");
        }else{
            myinput.setCustomValidity("其他错误");
        }
    }

    // invalid  输入内容错误事件。包括，为空，格式错误等
    myinput.addEventListener("invalid" ,invalidFun,false);

    // 输入的时候没有错误了，就要取消自定义错误提示，否则无法提交表单
    function  validFun(e){
        var tag = e.target ; // 标签
        console.info(tag.validity);
        myinput.setCustomValidity("");
    }
    myinput.addEventListener("input" ,validFun,false);

表单提交后，发生事件顺序如下：
（1）submit按钮的click事件，若取消默认事件，则终止
（2）html5表单验证和提示，若表单验证不通过，则提示第一个不合法输入，并终止
（3）form表单的submit事件，若取消默认事件，则终止

所以，可以看到HTML5自带的验证，发生在表单的onsubmit事件之前。