angular中的表单验证
angular中的表單驗(yàn)證很強(qiáng)大，
一共有5中驗(yàn)證信息，$valid,$invalid,$pristine,$dirty,$error.
$valid-----當(dāng)驗(yàn)證通過的時(shí)候，為true,不通過的時(shí)候?yàn)閒alse
$invalid----當(dāng)驗(yàn)證不通過的時(shí)候，為true，通過的時(shí)候?yàn)閠rue
$pristine---當(dāng)值為初始值的時(shí)候，為true，一旦有過改動(dòng)即為false
$dirty---當(dāng)值有改動(dòng)過即為true,其他即為false
$error---包含所有的驗(yàn)證信息，如以下例子，$error = {required:false,minlength:false,pattern:false}。哪條驗(yàn)證不通過，它的值就為true。
以上五個(gè)值可以通過表單的name來獲取到，參考如下：
<form novalidate name="myForm">
<input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
<div>{{ myForm.myText.$valid }}</div>
<div>{{ myForm.myText.$invalid }}</div>
<div>{{ myForm.myText.$pristine }}</div>
<div>{{ myForm.myText.$dirty }}</div>
<div>{{ myForm.myText.$error }}</div>
</form>
可以結(jié)合ng-repeat filter $error等來做一些表單驗(yàn)證
<script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){$scope.text = 'hello';$scope.regText = {regT : 'default',regList : [{ name : 'default', text : '請輸入用戶名' },{ name : 'required', text : '不能為空' },{ name : 'pattern', text : '只能為字母' },{ name : 'pass', text : '√' },],change : function(err){console.log(err);for(var attr in err){if(err[attr]==true){$scope.regText.regT = attr;return;}}$scope.regText.regT = 'pass';}}; }]); </script> </head><body> <div ng-controller="Aaa"><form novalidate name="nForm"><label>用戶名：<input type="text" name="nText" ng-model="regText.name" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/" ng-blur="regText.change(nForm.nText.$error)"><span ng-repeat="re in regText.regList | filter:regText.regT ">{{re.text}}</span></label><br><br><label>密碼：<input type="password" name="nPas" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/"><span>請輸入密碼</span></label></form> </div>
轉(zhuǎn)載于:https://www.cnblogs.com/toodeep/p/4971507.html
總結(jié)
以上是生活随笔為你收集整理的angular中的表单验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 得了输卵管堵塞该怎么办
- 下一篇： UINavigationControll