基于angularJS的表单验证练习

　　今天看了一下angularJS的表单验证，看的有点云里雾里（也有可能是雾霾吸多了），于是做了一个小练习来巩固一下。

html:

<div ng-controller="Aaa">
    <form novalidate name="loginForm">
        <div>
            <label>用户名</label>
            <input type="text" name="nText" ng-model="promptText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-minlength="5" ng-blur="promptText.change(loginForm.nText.$error)"/>
            <span ng-repeat=" pro in promptText.proList | filter:promptText.defaultPro">{{pro.tip}}</span>
        </div>

        <div>
            <label>密码</label>
            <input type="password" name="nPassword" ng-model="promptPassword.name" required ng-pattern="/([a-zA-Z]/w+$)/" ng-minlength="5" ng-blur="promptPassword.change(loginForm.nPassword.$error)"/>
            <span ng-repeat=" pro in promptPassword.proList | filter:promptPassword.defaultPro">{{pro.tip}}</span>
        </div>
    </form>

</div>

js:

var m1=angular.module(‘myApp‘,[]);
        m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
            $scope.promptText={
                defaultPro:‘default‘,
                proList:[
                    {‘name‘:‘default‘,‘tip‘:‘请输入用户名‘},
                    {‘name‘:‘required‘,‘tip‘:‘用户名不能为空‘},
                    {‘name‘:‘pattern‘,‘tip‘:‘格式不符合规则‘},
                    {‘name‘:‘minlength‘,‘tip‘:‘不得小于5个字符‘},
                    {‘name‘:‘pass‘,‘tip‘:‘正确‘}
                ],
                change:function(err){
                    console.log(err);
                    for(attr in err){
                        if(err[attr]==true){
                            this.defaultPro=attr;
                            return;
                        }
                    }
                    this.defaultPro=‘pass‘;
                }
            }

            $scope.promptPassword={
                defaultPro:‘default‘,
                proList:[
                    {‘name‘:‘default‘,‘tip‘:‘请输入密码‘},
                    {‘name‘:‘required‘,‘tip‘:‘密码不能为空‘},
                    {‘name‘:‘pattern‘,‘tip‘:‘以字母开头，只能包含字母、数字、下划线‘},
                    {‘name‘:‘minlength‘,‘tip‘:‘不得小于5个字符‘},
                    {‘name‘:‘pass‘,‘tip‘:‘正确‘}
                ],
                change:function(err){
                    console.log(err);
                    for(attr in err){
                        if(err[attr]==true){
                            this.defaultPro=attr;
                            return;
                        }
                    }
                    this.defaultPro=‘pass‘;
                }
            }
        }]);

css:

.ng-invalid{
            border:1px solid red;
        }
.ng-valid{
            border:1px solid green;
        }