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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。