HTML5表单验证

1、表单验证发生的时机：提交表单、调用checkValidity()函数

调用checkValidity()的方法：可调用表单或表单元素的checkValidity方法。例：

<form name="myForm">
    <input type="text" name="myInput" required>
    <input type="button" value="check" onClick="check()">
    <input type="submit" value="submit">
</form>

（1）当单击submit按钮时可触发验证事件

（2）为check按钮编写如下函数，单击check时可触发验证事件

function check(){
    document.forms.myForm.checkValidity();
}

或

function check(){
    document.forms.myForm.myInput.checkValidity();
}

2、验证反馈

触发验证事件后，未通过验证的表单元素会收到invalid消息，因此可注册事件处理函数

document.forms.myForm.myInput.addEventListener("invalid",invalidHandler,true)

注： 表单myForm收不到invalid消息，必须是表单元素

3、事件处理函数

function invalidHandler(e){
    var validity = e.srcElement.validity;
    if(validity.valueMissing){
    //处理
    }

    //阻止默认事件
    e.preventDefault();
}