HTML5表单验证与自定义错误提示-优快云博客

本文介绍了HTML5中input元素的validity属性，详细解释了各个验证属性的含义，如valid、badInput、patternMismatch等，并展示了如何通过setCustomValidity方法自定义错误提示。在表单提交时，验证顺序为先执行点击事件，然后进行验证，最后执行提交回调。通过设置minlength属性，当输入值长度不足时，tooShort属性变为true，导致validity.valid为false，阻止表单提交。

HTML5为所有表单元素添加了一个JS属性：input.validity(有效性),我估计很多人都不知道这个属性！下面我们先来看一段简单的代码：

<body ng-Controller="myController">
    <form action="">
        <input type="text" id='test' ng-model='context'>
        <input type="submit" value="提交" />
    </form>
    <script type="text/javascript">
        angular.module('myTest', [])
            .controller('myController', function ($scope) {
                console.log($("#test")[0].validity)
            });
    </script>
</body>

我们先来看下这个input.validity里面到底有什么？
在这里插入图片描述
哇！居然有这么多属性？都啥意思呢？

valid:true// true代表当前输入通过验证，反之！
badInput: true//true表示输入无效，如number框输入abc，反之！
patternMismatch: true//true表示正则表达式验证失败,反之！
rangeOverflow: true//true表示输入值超过max（最大值）,反之！
rangeUnderflow: true//true表示输入值小于min（最小值）,反之！
tooLong : true//true表示输入的字符数超过maxlength,反之！
tooShort : true//true表示输入的字符数小于minlength,反之！
stepMismatch : true//true表示输入的数字不符合step限制,反之！
typeMismatch : true//true表示输入值不符合email、url的验证,反之！
valueMissing : true//true表示未输入值，违反了required要求,反之！
customError : true//true表示自定义错误,反之！

上述属性值的特性：

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

<body ng-Controller="myController">
    <form ng-submit='test1()' value="提交">
        <input type="text" id='test' ng-model='context' minlength="5" ng-keyup='change()'>
        <input type="submit" value="提交" ng-click='test()'>
    </form>

    <script type="text/javascript">
        angular.module('myTest', [])
            .controller('myController', function ($scope) {
                console.log($("#test")[0].validity)
                $scope.change = function () {
                    console.log($("#test")[0].validity);
                    $("#test")[0].setCustomValidity("");
                };
                $scope.test = function () {
                    console.log(11);
                }
                $scope.test1 = function () {
                    console.log(222);
                }
            });
    </script>
</body>

在这里插入图片描述
当输入1时，由于设置了minlength=“5”，所以tooShort为true,验证也就没通过，valid值就为false！由于属性太多（上面已经把每个属性注释写的很清楚了），大家有时间可以自己去试! 上面代码$("#test")[0].setCustomValidity("")就是取消自定义错误消息的方法,也就是用H5验证自带的验证提示，这个相当于将input.validity.customError:false,看下H5验证自带的验证提示
在这里插入图片描述
我们也可以自定义验证提示

 $("#test")[0].setCustomValidity("大哥，请您输入大于5的字符 ok?");

在这里插入图片描述
是不是看上去很骚气！当然，你也可以更新上面介绍的那些属性来自定义你的css样式！

下面说下执行顺序：
1. 如果提交按钮上就有click事件，先会执行这个click事件
2. 然后再提交验证，如果验证不通过，直接结束
3. 最后执行 form上面的 ng-submit事件，ng-submit 指令用于在表单提交后执行指定函数

在这里插入图片描述
首先执行test函数（点击事件），然后再执行提交验证（如果验证不通过，直接结束），最后执行test1函数（表单提交后的回调函数）！