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函数(表单提交后的回调函数)!