表单校验的值$valid$invalid$pristine和$dirty

Posted 2020-10-08 Arvin-ma

angular内置了一套表单校验，其中包含几个状态

① valid、invalid、pristine和dirty 
　　valid标记表单元素有效； 
　　invalid标记表单元素无效； 
　　pristine表示表单元素是纯净的，用户未操作过； 
　　dirty表示表单元素是已被用户操作过； 
② 更改css属性 
　　.ng-pristine {} 
　　.ng-dirty {} 
　　.ng-valid {} 
　　.ng-invalid {} 

 

$scope.infoFrom.$setPristine();   //设置表单为未编辑的纯净状态

$scope.infoFrom.name.$setDirty();   //设置表单为用户已经编辑过得【脏】状态

 

去掉浏览器验证 　　

<form name="infofrom" novalidate>

</from>

 

(4) 注意事项 
①novalidate 
        标准浏览器如火狐，谷歌等对html5有很好的支持。众所周知，HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式，那么请加上novalidate属性，以此避开浏览器自行验证。 
②type类型 
        HTML5的type属性可以包含text、email、number等，但是angular又内部重写了这些属性，所以放心大胆的去用吧，angular完全可以满足你所有的验证。 
③type="number"还是ng-pattern="/^[0-9]{6}$/" 
        你可以使用type="number"来限制输入框只能输入数字，当然你也可以用ng-pattern来验证用户输入，从而过滤掉非数字输入。这完全取决于你的爱好，没有硬性规定，只是选择多一些罢了。