AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

这一节相对来说需要理解的东西不是太多，记住了那些api就行了。

还是一个案例(同样来自miaov)，一个表单验证，先上代码，然后再对对应的内容进行解释。

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<div ng-controller="Aaa">

    <form novalidate name="nForm">

        <div>

            <label>用户名</label>

            <input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)">

            <span ng-repeat="re in regText.regList|filter:regText.regVal">{{re.tips}}</span>

        </div>

        <div>

            <label>密码</label>

            <input type="text" name="nPassword" ng-model="regPassword.name" required ng-minlength="6" ng-blur="change('regPassword',nForm.nPassword.$error)">

            <span ng-repeat="re in regPassword.regList|filter:regPassword.regVal">{{re.tips}}</span>

        </div>

    </form>

</div>

<body>

<script src="angular.min.js"></script>

<script>

    var m1=angular.module("myApp",[]);

    m1.controller("Aaa",["$scope", function ($scope) {

        $scope.regText = {

            regVal : 'default',

            regList : [

                { name : 'default' , tips : '请输入用户名'},

                { name : 'required' , tips : '用户名不能为空'},

                { name : 'pattern' , tips : '用户名必须是字母'},

                { name : 'pass' , tips : '√'}

            ]

        };

        $scope.regPassword = {

            regVal : 'default',

            regList : [

                { name : 'default' , tips : '请输入密码'},

                { name : 'required' , tips : '密码不能为空'},

                { name : 'minlength' , tips : '密码至少6位'},

                { name : 'pass' , tips : '√'}

            ]

        };

        $scope.change=function(reg,err){

            for(var attr in err){

                if(err[attr]==true){

                    $scope[reg].regVal=attr;

                    return;

                }

            }

            $scope[reg].regVal="pass";

        }

    }]);

</script>

</body>

</html>

1.模块module

模块这东西的好处我还没有体会出来，可能是因为做的东西代码量还太小。它的功能基本上是讲代码按照功能分成若干块，这样就可以有效地防止controller的混乱(在我看来就是再来一级分类管理)。

具体代码就是

html中

<html lang="en" ng-app="myApp">

其中"myApp"就是这个模块的名字

对应的js代码

var m1=angular.module("myApp",[]);

其中，第二个参数是这个模块需要依赖的模块。

当然，controller的写法也要变一变了，至少你得告诉程序你这个controller是写在哪个模块里的吧。

m1.controller("Aaa",["$scope",function($scope){

//code

}]);

其中$scope是注入的服务

2.表单相关

表单验证相关操作其实大部分是在标签内写的

<input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)">

这几个api是啥意思就不仔细说了，反正意思就是一些字符串验证的规则，想要通过就必须符合这些规则。当然，如果你只想告诉用户通不通过而不想写那么多原因的话大可以一个正则搞定。重点是：通不过会发生什么？很简单，通不过的话ng-model对应的变量值就是 undefined。另外一个值得注意的问题是何时触发验证，改变验证提示（提示内容还是需要写逻辑的）。有一类是像百度搜索提示那样，输入内容改变一下就触发一次，但是实际上对于表单验证来说这样做并不合适，因为1.其实你只需要在用户觉得输入完了验证,这样做会增加不少不必要的代码运行2.如果你设置了类似于字段长度之类的限制，在输入到一半的时候可能跳出来”长度不够”之类的。要是我遇到这种表单验证，心里肯定会默默骂一句：我tm还没敲完呢。所以在input标签失去焦点的时候进行验证还是不错的，因为这时基本上可以代表用户觉得我输入完了。实际不早也不晚。

3.ng-repeat和filter

<span ng-repeat="re in regPassword.regList|filter:regPassword.regVal">{{re.tips}}</span>

ng-repeat在我看来就是根据数据长度来自定义html结构的常用在<li> <table>之类的数据展示情景中。写起来有点像for in循环

比如上面的例子,在不考虑filter的情况下，span标签的数量就是regPassword.regList中的元素个数，这个用来遍历的对象可以是数组或者对象。

filter的作用就是在它们当中筛选出需要的字符串，当然还有其他的过滤器，自己看看就明白了，都是api。filter的意思是筛选出符合regPassword.regVal的re。嗯，当然后面写个true的话就变成了不是包含而是必须完全匹配。

这一部分相对简单，所以能省则省。下一步写关于angular非常重要的一部分，路由(ng-route)。