欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實(shí)現(xiàn)表單驗(yàn)證

 更新時間：2015年01月28日 10:19:52   投稿：hebedich  
客戶端表單驗(yàn)證是AngularJS里面最酷的功能之一。 AngularJS表單驗(yàn)證可以讓你從一開始就寫出一個具有交互性和可相應(yīng)的現(xiàn)代HTML5表單。在AngularJS中，有許多表單驗(yàn)證指令。在這里，我們將談?wù)剮讉€最流行指令，然后我們將討論如何編寫自定義的驗(yàn)證。

雖然我不是前端程序員，但明白前端做好驗(yàn)證是多么重要。

因?yàn)檫@樣后端就可以多喘口氣了，而且相比后端什么的果然還是前端可以提高用戶的幸福感。

AngularJS提供了很方便的表單驗(yàn)證功能，在此記錄一番。

首先從下面這段代碼開始

復(fù)制代碼 代碼如下:

<form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>
    <p>Email:
        <input type="email" name="email" ng-model="email" required>
        <span style="color:red" ng-show="mainForm.email.$dirty && mainForm.email.$invalid">
            <span ng-show="mainForm.email.$error.required">Email is required.</span>
            <span ng-show="mainForm.email.$error.email">Invalid email address.</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid">
    </p>
</form>
<script>
angular.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
    $scope.user = 'Kavlez';
    $scope.email = 'sweet_dreams@aliyun.com';
}]);
</script>

input標(biāo)簽的一些驗(yàn)證選項(xiàng)，通常和HTML5標(biāo)記搭配使用。

必填

<input type="text" required />
長度

使用指令ng-minlength/ng-maxlength

<input type="text" ng-minlength="5" />
特定格式
例如電子郵件、URL、數(shù)字，將type設(shè)置為相應(yīng)類型即可，例如：

復(fù)制代碼 代碼如下:

<input type="email" name="email" ng-model="user.email" />
<input type="number" name="age" ng-model="user.age" />
<input type="url" name="homepage" ng-model="user.facebook_url" />

模式匹配

使用指令ng-pattern，例如：

復(fù)制代碼 代碼如下:

<input type="text" ng-pattern="[a-z]" />

表單屬性，通過這些屬性可以更容易地對表單進(jìn)行操作

pristine/dirty
表示是否已修改，例如

復(fù)制代碼 代碼如下:

<form name="mainForm" ng-controller="orderController">
<input type="email" name="userEmail" ng-model="myEmail" />
    {{mainForm.userEmail.$pristine}}
    {{mainForm.userEmail.$dirty}}
</form>

以formName.fieldName.$pristine方式訪問，input必須有ng-model聲明。

復(fù)制代碼 代碼如下:

valid/invalid

表示是否通過驗(yàn)證。

復(fù)制代碼 代碼如下:

$error

表單驗(yàn)證信息，驗(yàn)證不通過時返回相應(yīng)信息。

AngularJS為表單狀態(tài)提供了相應(yīng)地css class

復(fù)制代碼 代碼如下:

.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid

例如，讓驗(yàn)證通過為綠色，失敗為紅色:

復(fù)制代碼 代碼如下:

input.ng-valid {
    color: green;
}
input.ng-invalid {
    color: green;
}

給出的例子中僅僅是一個email的驗(yàn)證就寫了這么多，如果再加幾個field，再加幾種不同的提示，再加上幾個事件，代碼會變得雜亂不堪。

事實(shí)上并不推薦這樣做，我們有更好的方法。
就是使用angular-messages.js

首先，不要忘了這兩步

復(fù)制代碼 代碼如下:

<script src="angular-messages.js"></script>
angular.module('myApp', ['ngMessages'])

好，先用ng-messages和ng-message替換掉那些重復(fù)的東西，上面的例子變成:

復(fù)制代碼 代碼如下:

<form ng-controller="validationController" name="mainForm" >
    <p>Email:
        <input
        type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
        <div style="color:red" ng-messages="mainForm.email.$error" ng-messages-multiple>
            <p class="error" ng-message="required">Email is required.</p>
            <p class="error" ng-message="email">Invalid email address.</p>
            <p class="error" ng-message="minlength">min length 10</p>
            <p class="error" ng-message="maxlength">max length 50</p>
        </div>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid" />
    </p>
</form>

功能上沒有任何變化，只是把重復(fù)的代碼全部去掉了。
注意區(qū)分ng-messasges和ng-message，有沒有感覺有點(diǎn)像with()? 后面的ng-messages-multiple，這里用作同時讓多個提示出現(xiàn)。

但這樣仍然不夠好，就算省去了ng-message中的內(nèi)容，但是多個field中都存在required驗(yàn)證時仍然會有重復(fù)。
而且，如果不同頁面中的表單都涉及到相同的內(nèi)容時重復(fù)的驗(yàn)證提示會越來越多。
為了解決這個問題，我們可以使用ng-messages-include指令。
該指令用來引用模板，比如上面的例子變?yōu)?

復(fù)制代碼 代碼如下:

<form ng-controller="validationController" name="mainForm" >
    <p>Email:
        <input
        type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
        <div style="color:red" ng-messages="mainForm.email.$error" ng-messages-multiple ng-messages-include="validateTemplate/email.html">
        </div>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid" />
    </p>
</form>

并不復(fù)雜，我們再加點(diǎn)東西。
為了讓提示更友好(?)一些，我們試試實(shí)現(xiàn)光標(biāo)離開后出現(xiàn)提示的效果。
這時候用指令(directive)會方便很多，在這里先涉及一點(diǎn)和指令相關(guān)的內(nèi)容。

先運(yùn)行起來再說:

復(fù)制代碼 代碼如下:

var myApp = angular.module('myApp',[])
    .controller('validationController', ['$scope',function($scope) {
        $scope.user = 'Kavlez';
        $scope.email = 'sweet_dreams@aliyun.com';
    }])
    .directive('hintOnBlur', [function() {
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ctrl) {
                ctrl.focused = false;
                element.bind('focus', function(evt) {
                    scope.$apply(function() {ctrl.focused = true;});
                }).bind('blur', function(evt) {
                    scope.$apply(function() {ctrl.focused = false;});
                });
            }
        }
    }]);

此處我們用focused來判斷光標(biāo)是否在某個屬性上，當(dāng)使用了hintOnBlur指令的對象上發(fā)生focus或blur事件時focused的狀態(tài)發(fā)生變化。

表單也跟著改變一下，使用方法如下:

復(fù)制代碼 代碼如下:

<form ng-controller="validationController" name="mainForm" >
    <p>Email:
        <input type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required hint-on-blur />
        <div style="color:red" ng-messages="mainForm.email.$error" ng-show="!mainForm.email.focused" ng-messages-multiple ng-messages-include="validateTemplate/email.html">
        </div>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid" />
    </p>
</form>

在ng-show中再加入對focused的判斷，false時出現(xiàn)提示。

現(xiàn)在看起來像那么回事了。
自定義驗(yàn)證方式與有效性(validity)，這個也用到指令(directive)。
驗(yàn)證填寫的email是否已占用，這里簡單模擬一下:

復(fù)制代碼 代碼如下:

.directive('isAlreadyTaken', function() {
    return {
        require: 'ngModel',
        link: function(scope, ele, attrs, ctrl) {
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com',
                    'a@gmail.com',
                    'v@gmail.com',
                    'l@gmail.com',
                    'e@gmail.com',
                    'z@gmail.com'];
                for (var i=0;i<emailTable.length;i+=1)
                    if(val==emailTable[i])
                        return;
                ctrl.$setValidity('emailAvailable', true);
                return val;
            })
        }
    }
})

Input元素中加上is-already-taken屬性，并且再加一個ng-message:

復(fù)制代碼 代碼如下:

<p class="error" ng-message="emailAvailable">Already taken! try other email addresses!</p>

相關(guān)文章

最新評論