AngularJS 表單提交後顯示驗證信息與失焦後顯示驗證信息

時間 2019-11-19

原文原文鏈接

　　雖說AngularJS的實時表單驗證很是有用，很是高效方便，可是當用戶尚未完成輸入時便彈出一個錯誤提示，這種體驗是很是糟糕的。app

正常的表單驗證邏輯應該是在用戶提交表單後或完成當前字段中的輸入後，再提示驗證信息，這樣纔是用戶友好的。下面就來看看如何實現wordpress

在表單提交後顯示驗證信息
在失焦後顯示驗證信息

　　在表單提交後顯示驗證信息

　　在用戶試圖提交表單時，你能夠在做用域中捕獲一個submitted值，而後對錶單內容進行驗證並顯示錯誤信息。ui

下面經過一個簡單的例子來講明，只在用戶提交表單時才顯示錯誤信息。在ng-show 指令中添加對submitted（判斷表單是否提交）的檢查，僅有當submitted的值爲true（即表示表單已提交）同時該表單元素是處於$invalid狀態的時候，錯誤信息就會顯示出來spa

　　HTML代碼rest

<form name="registerForm" class="registerForm" novalidate ng-submit="register(user)">
                <div class="title">歡迎註冊，和咱們一塊兒甜蜜生活</div>
                <div class="form-group " ng-class="registerForm.username.$invalid ? '' : 'has-success'">
                    <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}/"/>
                    </div>
                    <div class="form-error"
                         ng-show="registerForm.username.$invalid && submitted ">
                        <span ng-show="registerForm.username.$error.required">手機號不能爲空</span>
                        <span ng-show="registerForm.username.$error.pattern">請輸入正確的手機號碼</span>
                    </div>
                </div>
                <input type="submit" value="註冊" class="btn btn-register btn-tianmi"/>
                {{result}}
            </form>

Controller代碼code

$scope.submitted = false
$scope.register = function (user) {
            //表單正常提交
            if($scope.registerForm.$valid){
               //正常提交表單
            }
            else{
                $scope.submitted = true;
            }
        };

經過上面的方法，即可以實現用戶在有非法輸入的狀況下提交表單，將顯示錯誤信息orm

　　在失焦後顯示驗證信息

　　要想保留用戶在輸入某個字段失焦後提示錯誤信息，須要實現一個ngFocus的指令，並在表單中添加該指令blog

　　ngFocus指令代碼element

.directive('ngFocus', function () {
        var FOCUS_CLASS = "ng-focused";
        return{
            restrict:'A',
            require:'ngModel',
            link: function (scope, element, attrs,ctrl) {
                ctrl.$focused = false;
                element.bind('focus', function (evt) {
                    element.addClass(FOCUS_CLASS);
                    scope.$apply(function () {
                        ctrl.$focused = true;
                    });
                }).bind('blur', function () {
                    element.removeClass(FOCUS_CLASS);
                    scope.$apply(function(){
                        ctrl.$focused = false;
                    })
                })
            }
        }
    })

接下來將ngFocus指令添加到input的元素上就可使用該指令，依然用上面的表單例子作用域

<form name="registerForm" class="registerForm" novalidate ng-submit="register(user)">
                <div class="title">歡迎註冊，和咱們一塊兒甜蜜生活</div>
                <div class="form-group " ng-class="registerForm.username.$invalid ? '' : 'has-success'">
                    <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}/" ng-focus/>
                    </div>
                    <div class="form-error"
                         ng-show="registerForm.username.$invalid && !registerForm.username.$focused ">
                        <span ng-show="registerForm.username.$error.required">手機號不能爲空</span>
                        <span ng-show="registerForm.username.$error.pattern">請輸入正確的手機號碼</span>
                    </div>
                </div>
                <input type="submit" value="註冊" class="btn btn-register btn-tianmi"/>
                {{result}}
            </form>

ngFocus指令給表單輸入字段的blur和focus添加了相應的行爲，添加了一個名爲ng-focused的類，並將$focused的值設置爲true。這樣就能夠經過判斷表單是否具備焦點來顯示錯誤信息

　　　　　　　　　　　　<div class="form-error"
                         ng-show="registerForm.username.$invalid && !registerForm.username.$focused ">
                        <span ng-show="registerForm.username.$error.required">手機號不能爲空</span>
                        <span ng-show="registerForm.username.$error.pattern">請輸入正確的手機號碼</span>
                    </div>

　　固然了，在正常的狀況下，咱們通常是使用失焦後驗證+表單提交後驗證兩種方式相結合的形式來進行表單驗證。下面就經過一個完整的用戶註冊例子來顯示若是實現這種驗證方式。

HTMl代碼

　　　　<form name="registerForm" class="registerForm" novalidate ng-submit="register(user)">
                <div class="title">歡迎註冊，和咱們一塊兒甜蜜生活</div>
                <div class="form-group " ng-class="registerForm.username.$invalid ? '' : 'has-success'">
                    <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}/" ng-focus/>
                    </div>
                    <div class="form-error"
                         ng-show="(registerForm.username.$invalid && registerForm.username.$dirty && !registerForm.username.$focused) || (registerForm.username.$invalid && submitted )">
                        <span ng-show="registerForm.username.$error.required">手機號不能爲空</span>
                        <span ng-show="registerForm.username.$error.pattern">請輸入正確的手機號碼</span> 
                    </div>
                </div>

                <div class="form-group row sms-code-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">
                        <button type="button" class="btn btn-default btn-register btn-tianmi"
                                ng-click="getVerifyCode(user.username)"
                                ng-disabled="sms_code_status || registerForm.username.$invalid">{{sms_code_content}}
                        </button>
                    </div>
                    <div class="clearfix"></div>
                    <div class="form-error"
                         ng-show="(registerForm.sms_code.$invalid && registerForm.sms_code.$dirty) ||(registerForm.sms_code.$invalid && submitted) ">
                        <span ng-show="registerForm.sms_code.$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="password" ng-model="user.password" class="form-control"
                               placeholder="請輸入登陸密碼"
                               required
                               ng-focus
                               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 && !registerForm.password.$focused) || (registerForm.password.$invalid && submitted)">
                        <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" ng-focus
                               placeholder="請再次輸入密碼" required pw-check match="user.password"/>
                        <!--<span class="iconfont icon-yonghu"></span>-->
                    </div>
                    <div class="form-error"
                         ng-show="(registerForm.repeat_password.$invalid && registerForm.repeat_password.$dirty && registerForm.repeat_password.$focused) || (registerForm.repeat_password.$invalid && submitted)">
                        <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="請輸入暱稱"
                               minlength="2"
                               maxlength="20"
                               ng-focus
                               ng-pattern="/^[a-zA-Z0-9\u0391-\uFFE5]{2,20}$/ "
                               required/>
                    </div>
                    <div class="form-error"
                         ng-show="(registerForm.nick_name.$invalid && registerForm.nick_name.$dirty  && registerForm.nick_name.$focused) || (registerForm.nick_name.$invalid && submitted)">
                        <span ng-show="registerForm.nick_name.$error.required">暱稱不能爲空</span>
                        <span ng-show="registerForm.nick_name.$error.pattern">暱稱爲2-20個字符，可由中文、字母和數字組成</span>
                    </div>
                </div>

                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="protocol" ng-model="protocol" required> 贊成&nbsp;&nbsp;<a
                            class="protocol" href="http://123.57.246.184/wordpress/?p=1941" target="_blank">添米用戶註冊協議</a>&nbsp;和&nbsp;<a
                            class="protocol" href="http://123.57.246.184/wordpress/?p=1939" target="_blank">添米投資服務協議</a>
                    </label>
                    <div class="form-error" ng-show="!protocol && submitted">
                        <span>請先贊成協議</span>
                    </div>
                </div>
                <input type="submit" value="註冊" class="btn btn-register btn-tianmi"/>
                {{result}}
            </form>

controller代碼

$scope.submitted = false
$scope.register = function (user) {
            //表單正常提交
            if($scope.registerForm.$valid){
               //正常提交表單
            }
            else{
                $scope.submitted = true;
            }
        };

相關標籤/搜索

每日一句

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