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>

  

posted on 2015-11-17 13:55  toodeep  阅读(435)  评论(0编辑  收藏  举报