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.mzph.cn/news/375356.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！