[AngularJS] AngularJS系列(3) 中級篇之表單驗證

目錄

• 基本驗證
• 驗證插件messages
• 自定義驗證

 

基本驗證

    <form name="form" novalidate ng-app>
        <span>{{form.$invalid}}</span>
        <span>{{form.$valid}}</span>
        <span>{{form.$dirty}}</span>
        <span>{{form.$pristine}}</span>
        <input type="text" ng-model="user" required />
        <input type="text" ng-model="pwd" required minlength="4" ng-maxlength="5" />
        <input type="text" ng-model="phone" required ng-pattern="/1[3|5|7|8|][0-9]{9}/" />
        <input type="email" ng-model="email" required />
        <input type="url" ng-model="url" required />
        <input type="number" ng-model="number" required />
        <div>
            <button type="reset" ng-disabled="form.$pristine">重置</button>
            <button type="submit" ng-disabled="form.$invalid">提交</button>
        </div>
    </form>

以上展現了基本的ng驗證.

這裏重點介紹一下上面的特例:

novalidate:　　 禁用H5自帶的驗證

ng-maxlength: 若是不寫ng,maxlength則直接限制最多輸入字符,稍微有點區別(IE9 + Chrome 測試)

ng-pattern:　　經過正則驗證,若是不寫ng開頭,無驗證效果.

注:要啓用驗證 同時須要綁定一個ng-model

 

屬性類		描述
$valid	ng-valid	Boolean 告訴咱們這一項當前基於你設定的規則是否驗證經過
$invalid	ng-invalid	Boolean 告訴咱們這一項當前基於你設定的規則是否驗證未經過
$pristine	ng-pristine	Boolean 若是表單或者輸入框沒有使用則爲True
$dirty	ng-dirty	Boolean 若是表單或者輸入框有使用到則爲True

訪問表單屬性

• 方位表單: <form name>.<angular property>

• 訪問一個輸入框: <form name>.<input name>.<angular property>

 

 

驗證插件

在介紹messages插件以前,咱們看下原本的驗證提示

    <form name="form" ng-app novalidate>
        <span>{{form.user.$error.required?'user該項必填':''}}</span>
        <input type="text" ng-model="user" name="user" required />
        <span>{{form.pwd.$error.required?'pwd該項必填':''}}</span>
        <input type="text" ng-model="pwd" name="pwd" required />
        <span>{{form.info.$error.required?'info該項必填':''}}</span>
        <input type="text" ng-model="info" name="info" required />
        <span>{{form.age.$error.required?'age該項必填':''}}</span>
        <input type="text" ng-model="age" name="age" required />
        <div>
            <button type="submit" ng-disabled="form.$invalid">提交</button>
        </div>
    </form>

這裏只是判斷了require 當咱們的代碼 咱們重複寫了不少3元表達式

 

messages插件就是更友好的解決重複的問題

    <form name="form" ng-app="myApp" novalidate>
        <input type="email" ng-model="user" name="username" required minlength="4" />
        <div ng-messages="form.username.$error" ng-messages-multiple>
            <div ng-message="required">該項必填</div>
            <div ng-message="minlength">低於最低長度</div>
            <div ng-message="email">應爲email</div>
        </div>
    </form>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-messages.min.js"></script>
    <script>
        angular.module('myApp', ['ngMessages']);
    </script>

Nuget:Install-Package AngularJS.Messages 

 

自定義驗證

經過基本的驗證方式,咱們已經可以解決大部分的驗證問題.但項目中永遠充滿着各類各樣的需求.

在ng中的自定義驗證,通常經過指令的形式建立.

    <form name="form" ng-app="myApp" novalidate>
        <input type="email" ng-model="user" name="username" required ensure-unique minlength="4" />
        <div ng-messages="form.username.$error" ng-messages-multiple>
            <div ng-message="required">該項必填</div>
            <div ng-message="minlength">低於最低長度</div>
            <div ng-message="email">應爲email</div>
            <div ng-message="unique">用戶名已存在</div>
        </div>
    </form>

在上面的messages插件Demo中,新建一行驗證用戶名已存在 以及 在input上添加了ensure-unique指令

同時,咱們須要在js中定義ensure-unique指令:

angular.module('myApp', ['ngMessages']).directive('ensureUnique', ['$http', '$timeout', '$window', function ($http, $timeout, $window) {
            return {
                restrict: "A",
                require: 'ngModel',
                link: function (scope, ele, attrs, ngModelController) {
                    scope.$watch(attrs.ngModel, function (n) {
                        if (!n) return;
                        $timeout.cancel($window.timer);
                        $window.timer = $timeout(function () {
                            $http({
                                method: 'get',
                                url: '/api/checkusername/', //根據換成本身的url
                                params: {
                                    "username": n
                                }
                            }).success(function (data) {
                                ngModelController.$setValidity('unique', data.isUnique); //這個取決於你返回的，其實就是返回一個是否正確的字段，具體的這塊能夠本身修改根據本身的項目
                            }).error(function (data) {
                                ngModelController.$setValidity('unique', false);
                            });
                        }, 500);
                    });
                }
            };
        }]);

指令不是本節重點內容,這裏簡單說下

ngModelController.$setValidity('unique', bool);

經過該API能夠設置$error.unique.

setValidity爲true,則$error.unique爲false

 

本文地址:http://www.cnblogs.com/neverc/p/5912340.html