angular中的表單驗證

angular中的表單驗證很強大，

一共有5中驗證信息，$valid,$invalid,$pristine,$dirty,$error.

$valid-----當驗證通過的時候，為true,不通過的時候為false

$invalid----當驗證不通過的時候，為true，通過的時候為true

$pristine---當值為初始值的時候，為true，一旦有過改動即為false

$dirty---當值有改動過即為true,其他即為false

$error---包含所有的驗證信息，如以下例子，$error = {required:false,minlength:false,pattern:false}。哪條驗證不通過，它的值就為true。

以上五個值可以通過表單的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>

可以結合ng-repeat filter $error等來做一些表單驗證

<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>

轉載于:https://www.cnblogs.com/toodeep/p/4971507.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/375356.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/375356.shtml
英文地址，請注明出處：http://en.pswp.cn/news/375356.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！