Angularjs表单验证顺序

本文介绍了Angularjs表单验证顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个包含普通的文本输入一个简单的HTML表单。 NG-MINLENGTH个， NG-最大长度和 NG-模式角是在输入设置表单输入指令。

I have a simple html form containing regular text input. ng-minlength, ng-maxlength and ng-pattern angular built-in form input directives are set on the input.

问题： NG-模式检查长度检查之前，由应用NG-MINLENGTH个和 NG-最大长度。

Problem: ng-pattern check is applied before the length check by ng-minlength and ng-maxlength.

问：我怎么能更改默认的检查顺序：即对于长度第一张支票，然后应用模式检查

Question: how can I change the default check order: i.e. first check for the length, then apply pattern check?

例如：

<body ng-app>

    <div>
        <form name="myForm">
            Name: <input name="name" type="text" ng-model="name" ng-minlength="3" ng-maxlength="16" ng-pattern="/^\w+$/"/>
            <div ng-show="myForm.name.$dirty && myForm.name.$invalid">
                <span ng-show="myForm.name.$error.pattern">Pattern error</span>
                <span ng-show="myForm.name.$error.minlength || myForm.name.$error.maxlength">Length error</span>
            </div>
            <br/>
            <input type="submit" value="Submit">
        </form>
    </div>

</body>

当前的行为：

输入＃ - 见模式错误

输入### - 见模式错误

期望的行为：

输入＃ - 见长度错误

输入### - 见模式错误

仅供参考，相关。

先谢谢了。

推荐答案

自己写的指令：

var mod = angular.module("myApp", []);

mod.directive("nameValidation", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attrs, ngModelCtrl) {
            var validate = function (value) {
                var minLen = parseInt(attrs.myMinlength, 10),
                    maxLen = parseInt(attrs.myMaxlength, 10),
                    pattern = attrs.myPattern,
                    match = pattern.match(/^\/(.*)\/([gim]*)$/),
                    lenErr = false;

                if (match) {
                    pattern = new RegExp(match[1], match[2]);   
                }
                if (!ngModelCtrl.$isEmpty(value)) {
                    ngModelCtrl.$setValidity("pattern", true);
                    if ((minLen && value.length < minLen) || (maxLen && value.length > maxLen)) {
                        ngModelCtrl.$setValidity("length", false);
                        lenErr = true;
                    }
                    else {
                        ngModelCtrl.$setValidity("length", true);
                        lenErr = false;
                    }

                    if (!lenErr) {
                        if (match && !pattern.test(value)) {
                            ngModelCtrl.$setValidity("pattern", false);
                        }
                        else {
                            ngModelCtrl.$setValidity("pattern", true);
                        }
                    }
                }
                else {
                    ngModelCtrl.$setValidity("length", true);
                    ngModelCtrl.$setValidity("pattern", true);
                }
            }

            ngModelCtrl.$parsers.push(validate);
            ngModelCtrl.$formatters.push(validate);
        }
    }
});

然后在你的HTML，包括应用程序和使用指令：

Then in your HTML, include the app and use the directive:

<body ng-app="myApp">

<div>
    <form name="myForm">
        Name: <input name="name" type="text" ng-model="name" name-validation="" my-minlength="3" my-maxlength="16" my-pattern="/^\w+$/"/>
        <div ng-show="myForm.name.$dirty && myForm.name.$invalid">
            <span ng-show="myForm.name.$error.pattern">Pattern error</span>
            <span ng-show="myForm.name.$error.length">Length error</span>
        </div>
        <br/>
        <input type="submit" value="Submit">
    </form>
</div>
</body>

该指令使用我-MINLENGTH个，我-最大长度，并为三个值我的图案。如果长度失败，将第一次出访。如果没有，那么图案将显示为错误，如果它不匹配。试想，如果你想用它其他地方，除了名字MINLENGTH个，最大长度重命名该指令和模式可以通过属性来传递给它。如果它们离开，它们将被忽略。

The directive uses my-minlength, my-maxlength, and my-pattern for the three values. If length fails, that will trip first. If not, then pattern will show as error if it doesn't match. Consider renaming this directive if you want to use it other places besides name as minlength, maxlength, and pattern can be passed to it via attributes. If they are left off, they will be ignored.

请参阅的jsfiddle：

See jsfiddle: http://jsfiddle.net/4zpxk/6/

这篇关于Angularjs表单验证顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

MinLength