[html5表单客户端验证码]HTML5表单客户端验证的例子

（2）或给提交按钮添加formnovalidate属性

3，修改文本框验证样式
虽然我们无法修改验证消息的样式，但却可以根据输入字段时候需要验证，已经验证结果来改变它们的外观。
这里使用了几个新的CSS伪类：
required（必填）和optional（选填）：根据字段中是否使用required属性来应用不同的样式。
valid（有效）和invalid（无效）：根据控件中是否包含错误来应用不同的样式。
in-range（在范围内）和out-of-range（超出范围）：根据控件的min和max属性判断输入值是否超出范围。

比如：想让必填的元素应用浅黄色背景，而必填且当前输入无效值的字段用橙色背景。

input:required {
    background-color:lightyellow;
}
    
input:required:invalid {
    background-color:orange;
}

4，pattern属性 - 使用正则表达式验证
（1）不必使用^和$字符表示要匹配字段值得开头和结尾。
（2）只设置pattern的话，空值也会通过。如果不允许空，则还要加上required属性。

比如：使用正则表达式验证手机号码

5，自定义验证

对于特定字段如果正则表达式验证还无法满足需求的话，可以编写自定义的验证逻辑，并利用HTML5的验证机制。
通常使用setCustomValidity()方法提供错误消息，浏览器会将该消息当做自己的内置消息。在提交表单时，就会看到弹出的提示框中包含自定义的错误消息。

比如：验证输入内容不得少于20个字符

<script>
    function validateComments(input) {
        if(input.value.length < 20){
            input.setCustomValidity("评论不得少于20字");
        }else{
            //没有错误。清除任何错误消息
            input.setCustomValidity("");
        }
    }
</script>