AngularJS教程十九—— 表單校驗

表單校驗

表單校驗校驗表單輸入校驗，通過對w5c-validator-angular（示例）的修改來實現

一 使用方法：

<form action="#" class="form-horizontal w5c-form" w5c-form-validate novalidate name="validateForm">
    <div class="form-body">
        <div class="form-group">
            <label class="col-md-3 control-label">使用者編號</label>

            <div class="col-md-4">
                <input type="text" class="form-control" name="userCode" ng-model="user.userCode" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">使用者姓名</label>

            <div class="col-md-4">
                <input type="text" class="form-control" name="userName" ng-model="user.userName"
                       required ed-validate="name" ng-maxlength="10">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">性別</label>

            <div class="col-md-4">
                <select class="form-control" name="gender" ng-model="user.gender"
                        ng-options="opt.value as opt.name for opt in options.gender" required></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">手機號碼</label>

            <div class="col-md-4">
                <input type="text" class="form-control" ng-model="user.telephone">
            </div>
        </div>
        <div class="form-group" ng-show="!user.userId && settings.deptPosEnable">
            <label class="col-md-3 control-label">所屬崗位</label>

            <div class="col-md-4">
                <input type="text" class="form-control" ng-model="deptPos.name" readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">狀態</label>

            <div class="col-md-4">
                <select class="form-control" ng-model="user.userState"
                        ng-options="opt.value as opt.name for opt in options.userstate"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">使用者描述</label>

            <div class="col-md-4">
                <textarea class="form-control" rows="3" ng-model="user.remark"></textarea>
            </div>
        </div>
    </div>
    <div class="form-actions">
        <div class="row">
            <div class="col-md-offset-3 col-md-4">
                <button type="button" class="btn green" w5c-form-submit="userGrid.save()"><i
                        class="fa fa-save"></i> 儲存
                </button>
                <button type="button" class="btn default" ng-click="userGrid.cancel();validateForm.reset();"><i
                        class="fa fa-times"></i> 取消
                </button>
            </div>
        </div>
    </div>
</form>

有如下要求：

• form節點需要增加class="w5c-form"，並增加w5c-form-validate和novalidate屬性
• form節點和需要校驗的節點都必須要有name屬性，其中form的name值在當前控制器中有一個reset()方法，用來清除校驗結果
• 提交事件由ng-click改為w5c-form-submit

二 支援型別：

其中AngularJS原生支援很多種驗證規則，比如：require（必填項），email，pattern（正則），maxlength，minlength，number，url，max，min，由於原生的maxlength在大多知道的長度後不允許繼續輸入，所以maxlength，minlength使用ng-maxlength，ng-minlength代替。

此外，還提供以下自定義校驗，通過ed-validate自定義屬性來指定，比如上例中的“使用者姓名”。

• phone// 電話號碼
• mobile// 手機號碼
• phoneOrMobile手機或電話
• integer// 整數
• chinese// 中文
• english// 英語
• username// 使用者名稱
• name// 姓名，可以是中文或英文
• email// 電子郵件

三 自定義校驗：

如果以上不能滿足，可以自定義校驗：

App.directive('menuName', function() {
    return {
        restrict:"A",
        require:"ngModel",
        link:function(scope, ele, attrs, ngModelController){
            ngModelController.$parsers.push(function(viewValue){
                var validate = true;// 這裡寫自己的校驗規則，當ng-model繫結的值改變時即能進行校驗
                ngModelController.$setValidity('pattern', validate);
                $(elem).attr('patternMsg', '自定義校驗失敗提示');// 如果需要在這裡動態提示的話，下面具體講
                return viewValue;
            });
        }
    };
});

對於上面的示例，使用方式如下：

<input type="text" menu-name class="form-control" name="menuName" ng-model="menu.menuName" required patternMsg="標題格式不正確！">

四 校驗失敗提示資訊：

對於預設提示資訊如果不能滿足，可以通過自定義屬性patternMsg來指定。

五 注意：

取消編輯時，需要重置form的校驗狀態，如用法示例中的：validateForm.reset()，這裡validateForm為form的name值。