脏值检测
就是对表单验证
以前用jQuery对页面中表单元素做验证
绑定事件(表单元素)focus,blur,keydown,keyup,change,click等等
在事件回调函数中获取需要验证的表单
对表单内容做验证处理(正则)
根据结果显示提示
根据结果显隐提示
提交表单时候我们还会对数据进行拼接(ajax)
在Angular中作表单验证只需要添加几个指令即可
在创建表单的时候,Angular会根据(form,input等等)标签的name属性在作用域中创建一个变量
input表单的name属性定义在form元素的name属性对应的变量内部
在作用域中第一次是根据form标签寻找name属性并映射变量(第一次不会根据input等做表单映射)
第二次会在form表单中遍历表单元素并映射到表单变量中
无论是表单form元素还是input元素对应的变量都有四个属性
$dirty是否被修改过
True已经被修改过
False没有被修改过
$pristine是否被修改过
True没有被修改过
False已经被修改过
$valid是否合法
True合法
False不合法
$invalid是否合法
True不合法
False合法
(input在使用时一定要绑定ng-model不然会找不到input变量)
表单中$dirty表示表单是否被修改过(true表示修改过)$pristine表示表单是否未被修改过(true表示未被修改过它与$dirty是一对属性)
$invalid表示在表单验证中input是否不合法(true表示不合法false表示合法)$valid表示是否合法(true表示合法)
HTML5小记:
在HTML5中给表单提供了多个新增属性这些新增属性在一些浏览器上已经实现
HTML5新增input在表单中的属性required表示该字段为必填项如,
<form name="myform">
<label for="">用户名:<input type="text" name="username" ng-model="uname" required></label>
<div><button ng-click="check()">提交</button></div>
</form>
此处效果为HTML5实现的
HTML5还提供minlength与maxlength来判断字段长度
使用时<input minlength="2" maxlength="6"></input>
则最高输入6位数据不能输入第七位数据
同时这三个HTML5属性也可以使用Angular中定义的来实现即ng-minlength还有ng-maxlength以及ng-required
在使用ng-required时需要加上true即,ng-required=“true”
但是使用Angular定义最大长度时数据是可以超出最大长度的但是会根据自己写的js逻辑出现提示符
其中required原声HTML5的指令比较好使
表单验证方式(指令)
必填校验
共同点
无论是否输入都会对表单进行验证
不同点
1. Required h5提供的一个属性,因此有一些浏览器会做额外的校验提示
Ng-required Angular的一个指令不会影响浏览器的校验(浏览器校验捕获不到这个指令)
2. Ng-required必须传递一个属性值(true),required属性不用
最大长度校验和最小长度校验
共同点,
1.都是根据属性值做长度的校验
2.只在输入的时候做校验,不会在未输入($dirty=false)情况下做校验(此时$invalid=true)
不同点
1. maxlength和minlength是h5的属性,浏览器会特殊处理(maxlength,当超过最大长度的时候,
不允许继续输入)
2. Ng-maxlength和ng-minlength是指令,不会影响浏览器
正则验证:ng-pattern pattern
共同点
1. 都是根据正则表达式做校验
2. 他们都只在输入的时候做校验,未输入($dirty=false)的时候不会做校验(此时$invalid=true)
不同点
1. ng-pattern 它的值是标准正则表达式(/abc/)
Pattern 它的值是一个正则表达式内容(abc)
2. pattern使用时候,一些浏览器会做校验
ng-pattern使用的时候,浏览器不会做校验
Ng-disabled 表单会变灰色
True表示不能操作
False表示可以操作
Ng-readonly 表单不会变色
True表示只读
False表示不可操作
ng-disabled和ng-readonly的锁死样式不同
ng-disabled和ng-readonly都可以同时表单元素什么时候可以操作,什么时候不可以操作
他们只是样式不同
定义按钮时ng-click的名称不要与ng-disabled=“”中的名称相同否则不会出现效果(ng-readonly也是一样)。
ng-checked
表示是否被选中
True表示被选中
False表示没有被选中
Ng-model绑定的数据值只能是布尔值,设置value或者true-valueshimeiyo