AngularJS 表單驗證

時間 2019-11-11

標籤 angularjs 表單驗證欄目 AngularJS 简体版

原文原文鏈接

AngularJS表單驗證正則表達式

1、表單驗證的4種狀態app

一、$invalid：表示表單元素的驗證（如required、ng-minlength等）處於invalid狀態。ui

二、$valid：與$invalid相反的狀態，表示表單元素的驗證正確，處於valid狀態。spa

三、$pristine：表示表單元素不曾輸入過值，處於全新的狀態。code

四、$dirty：與$pristine相反，表示表單元素已經輸入過值，處於dirty狀態。orm

五、$error：表示表單元素輸入的值不符合驗證，處於error的狀態。blog

2、表單內置驗證指令element

一、required：表示該元素是必須的。get

二、ng-required：該指令與required最大的區別是，它能夠經過傳入Boolean值來設置表單元素是否爲required。input

三、ng-minlength：設置表單元素的最小值。

四、ng-maxlength：設置表單元素的最大值。

五、ng-pattern：能夠經過傳入正則表達式對錶單進行驗證

3、顯示錯誤信息

　　根據表單或者表單元素的狀態（$invalid,$valid,$dirty,$pristine），AngularJS會爲其添加想要的CSS類（ng-invalid,ng-valid,ng-dirty,ng-pristine）

所以，能夠經過控制這些CSS類先控制錯誤信息的樣式

　　要想輸入表單錯誤信息，只須要經過如下這種方式

　　　　　　　　<div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><span class=" iconfont icon-register icon-key"></span></div>
                        <input type="password" name="password" ng-model="user.password" class="form-control"
                               placeholder="請輸入登陸密碼"
                               required
                               minlength="6"
                               ng-pattern="/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/"/>
                    </div>
                    <div  ng-show="registerForm.password.$invalid && registerForm.password.$dirty">
                        <span ng-show="registerForm.password.$error.minlength">密碼不能少於6位</span>
                        <span ng-show="registerForm.password.$error.pattern">密碼必須由數字和字母組成</span>
                        <span ng-show="registerForm.password.$error.required">密碼不能爲空</span>
                    </div>
                </div>

4、自定義表單驗證

一、自定義指令

二、在指令中完成數據判斷

三、return

四、在表單元素中應用該指令

最後附上一個完整的用戶註冊表單。其中包括基本表單驗證如：required,ng-minlength,ng-pattern。也包括自定義指令驗證：驗證兩次密碼是否輸入一致，驗證用戶名是否惟一（須要後臺服務支持）。

<div ng-controller="RegisterCtrl" class="row register-container">

        <div class="col-xs-7 register-banner"></div>
        <div class="col-xs-5">
            <form name="registerForm" class="registerForm" novalidate ng-submit="register(user)">
                <div class="title">歡迎註冊，和咱們一塊兒甜蜜生活</div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><span class=" iconfont icon-register icon-phone"></span></div>
                        <input type="text" name="username" class="form-control" placeholder="請輸入手機號碼"
                               ng-model="user.username"
                               maxlength="11" required ng-pattern="/1[3|5|7|8|][0-9]{9}/" unique/>
                    </div>
                    <div class="form-error" ng-show="registerForm.username.$invalid && registerForm.username.$dirty">
                        <span ng-show="registerForm.username.$error.required">手機號不能爲空</span>
                        <span ng-show="registerForm.username.$error.pattern">請輸入正確的手機號碼</span>
                        <span ng-show="registerForm.username.$error.unique">該手機號已存在</span>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-xs-6 input-sms-code">
                            <input type="text" value="" name="sms_code" class="form-control" ng-model="user.sms_code"
                                   placeholder="請輸入6位驗證碼" required ng-maxlength="6" maxlength="6"/>
                    </div>
                    <div class="col-xs-6 btn-sms-code">
                        <a class="btn btn-default btn-register" ng-click="getVerifyCode(user.username)"
                           ng-disabled="sms_code_status || registerForm.username.$invalid">{{sms_code_content}}</a>
                    </div>
                </div>

                <div class="form-error" ng-show="myForm.sms_code.$invalid && registerForm.username.$dirty ">
                    <span ng-show="myForm.sms_code.$error.required">請輸入驗證碼</span>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><span class=" iconfont icon-register icon-key"></span></div>
                        <input type="password" name="password" ng-model="user.password" class="form-control"
                               placeholder="請輸入登陸密碼"
                               required
                               minlength="6"
                               ng-pattern="/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/"/>
                    </div>
                    <div class="form-error" ng-show="registerForm.password.$invalid && registerForm.password.$dirty">
                        <span ng-show="registerForm.password.$error.minlength">密碼不能少於6位</span>
                        <span ng-show="registerForm.password.$error.pattern">密碼必須由數字和字母組成</span>
                        <span ng-show="registerForm.password.$error.required">密碼不能爲空</span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><span class=" iconfont icon-register icon-key"></span></div>
                        <input type="password" name="repeat_password" class="form-control"
                               ng-model="user.repeat_password"
                               placeholder="請再次輸入密碼" required pw-check match="user.password"/>
                    </div>
                    <div class="form-error" ng-show="registerForm.repeat_password.$invalid && registerForm.repeat_password.$dirty">
                <span ng-show="registerForm.repeat_password.$error.required">密碼不能爲空</span>
                <span ng-show="registerForm.$error.matchError">兩次密碼不同</span>
            </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><span class=" iconfont icon-register icon-yonghu"></span></div>
                        <input type="text" name="nick_name" class="form-control" ng-model="user.nick_name"
                               placeholder="請輸入暱稱"
                               required/>
                    </div>
                    <div class="form-error" ng-show="registerForm.nick_name.$invalid && registerForm.nick_name.$dirty">
                        <span ng-show="registerForm.nick_name.$error.required">暱稱不能爲空</span>
                    </div>
                </div>

                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 贊成&nbsp;&nbsp;<a class="protocol" >添米用戶註冊協議</a>&nbsp;和&nbsp;<a
                            class="protocol">添米投資服務協議</a>
                    </label>
                </div>
                <input type="submit" value="註冊" class="btn btn-register" ng-disabled="registerForm.$invalid"/>
                {{result}}
            </form>
        </div>
    </div>

兩次密碼一致性檢查指令

.directive('pwCheck', function () {
        return{
            require:'ngModel',
            scope:{
                password:'=match'
            },
            link:function(scope, element, attrs, ngModel){
                scope.$watch('password', function(){
                    ngModel.$setValidity('matchError', element.val() === scope.password);
                })
                element.on('keyup', function(){
                    scope.$apply(function(){
                        ngModel.$setValidity('matchError', element.val() === scope.password);
                    })
                })
            }
        }
    })

相關標籤/搜索

每日一句

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