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

时间 2019-11-15

标签 angularjs 学习笔记表单验证案例 repeat filter 栏目 AngularJS 繁體版

原文原文链接

这一节相对来讲须要理解的东西不是太多，记住了那些api就好了。html

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

<!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的混乱(在我看来就是再来一级分类管理)。数组

具体代码就是app

html中 ui

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

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

对应的js代码code

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

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

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

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