Angularjs 表单验证顺序
[英] Angularjs form validation order
本文介绍了Angularjs 表单验证顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含常规文本输入的简单 html 表单.ng-minlength、ng-maxlength 和 ng-pattern angular 内置表单输入指令在输入上设置.
问题:在ng-minlength 和ng-maxlength 的长度检查之前应用ng-pattern 检查.
问题:如何更改默认检查顺序:即首先检查长度，然后应用模式检查?
示例:
<div><表单名称="myForm">名称:<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">模式错误</span><span ng-show="myForm.name.$error.minlength || myForm.name.$error.maxlength">长度错误</span>
<br/><输入类型=提交"值=提交"></表单>
当前行为:
- 输入#" - 参见模式错误"
- 输入###" - 参见模式错误"
期望的行为:
- 输入#" - 参见长度错误"
- 输入###" - 参见模式错误"
仅供参考，相关的jsfiddle.
提前致谢.
解决方案
编写您自己的指令:
var mod = angular.module("myApp", []);mod.directive("nameValidation", function () {返回 {限制:A"，要求:ngModel"，链接:函数(范围、元素、属性、ngModelCtrl){var 验证 = 函数(值){var minLen = parseInt(attrs.myMinlength, 10),maxLen = parseInt(attrs.myMaxlength, 10),模式 = attrs.myPattern,match = pattern.match(/^\/(.*)\/([gim]*)$/),lenErr = 假；如果(匹配){pattern = new RegExp(match[1], match[2]);}if (!ngModelCtrl.$isEmpty(value)) {ngModelCtrl.$setValidity("pattern", true);if ((minLen && value.length
然后在您的 HTML 中，包含应用程序并使用指令:
<div><表单名称="myForm">名称:<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">模式错误</span><span ng-show="myForm.name.$error.length">长度错误</span>
<br/><输入类型=提交"值=提交"></表单>
该指令使用 my-minlength、my-maxlength 和 my-pattern 作为三个值.如果长度失败，那将首先跳闸.如果不是，那么如果不匹配，则模式将显示为错误.如果您想在名称之外的其他地方使用它，请考虑重命名此指令，因为 minlength、maxlength 和模式可以通过属性传递给它.如果它们被忽略，它们将被忽略.
见jsfiddle:http://jsfiddle.net/4zpxk/6/
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.
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?
Example:
<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>
Current behavior:
- enter "#" - see "Pattern error"
- enter "###" - see "Pattern error"
Desired behavior:
- enter "#" - see "Length error"
- enter "###" - see "Pattern error"
FYI, related jsfiddle.
Thanks in advance.
解决方案
Write your own directive:
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);
}
}
});
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>
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.
See jsfiddle: http://jsfiddle.net/4zpxk/6/
这篇关于Angularjs 表单验证顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
