控制器连接到指令进行验证
controller connect to directive for validation
嗨,我想知道如何将指令和控制器函数结合起来验证表单?
现在我正在用指令单独验证表单,如果有人没有填写字段,则突出显示紫色字段,并在我的控制器中重复相同的验证,以查看用户是否可以继续保存数据。
directive.js
.directive('highlightOnError', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
scope.$on('submit', function() {
var border = '';
if (ngModel.$invalid){
border = 'magenta solid 1px';
element.css('border', border);
} else
{
border="";
element.css('border', border);
}
});
}
};
})
controller.js
for(var i=0; i<formobject.length;i++){
var key=formobject[i];
var field =validation.formobject[key];
if(validation.formobject.hasOwnProperty(formobject[i])){
if(field==null){
error_count++;
break;
}
}
else{
error_count++;
break;
}
}
if(error_count==0){
//save data of form
$scope.create();
}
else{
alert('Please fill out highlighted fields');
}
谢谢
虽然这不能直接回答您的问题,但这是一种可能对您有益的替代方法。首先创建一个服务来保存验证。
myApp.factory('ValidationService', [ '$log',
function($log) {
var validators = {
passcode: {
patterns: [
{
regex: /^[0-9]{8}$/,
msg: "Please enter a valid 8 digit code."
}
]
},
password: {
patterns: [
{
regex: /^.{8}.*$/,
msg: "Please use at least 8 characters."
},
{
regex: /((?=.*[a-z].*)(?=.*[A-Z].*)(?=.*[0-9].*))|((?=.*[a-z].*)(?=.*[A-Z].*)(?=.*[^a-zA-Z0-9].*))|((?=.*[A-Z].*)(?=.*[0-9].*)(?=.*[^a-zA-Z0-9].*))|((?=.*[a-z].*)(?=.*[0-9].*)(?=.*[^a-zA-Z0-9].*))/,
msg: "Please use characters from 3 different categories."
}
]
},
email: {
patterns: [
{
regex: /^[^@]+@[^.]+[.][^.][^.]+.*$/,
msg: "Please enter a valid email address."
}
]
},
default: {
patterns: [
{
regex: /^.*$/,
msg: "Invalid validator specified. Check your html."
}
]
}
};
return {
getValidator: getValidator
};
function getValidator(inputType) {
if (validators[inputType]) {
return validators[inputType];
}
return validators.default;
}
}]);
然后是一个使用该服务的指令:
myApp.directive('inputValidator', [ '$log', 'ValidationService',
function($log, ValidationService) {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (typeof viewValue == 'undefined') {
return viewValue;
}
var pass = true;
var validator = ValidationService.getValidator(attrs.inputValidator);
$.each(validator.patterns, function(index, pattern) {
if (!pattern.regex.test(viewValue)) {
pass = false;
scope[attrs.inputValidatorMsg] = pattern.msg;
return false;
}
});
if (pass) {
// valid
ctrl.$setValidity('inputValidator', true);
return viewValue;
} else {
// invalid
ctrl.$setValidity('inputValidator', false);
return undefined;
}
});
}
};
}]);
最后,一些html将它们连接在一起:
<form name="loginForm" class="css-form" data-novalidate>
<p class="reset-header">Activate Your Account</p>
<input type=text placeholder="Email Address" name="username" data-ng-model="username"
data-input-validator="email" data-input-validator-msg="usernameError" data-required>
<span class="tag tag-alert arrow-top" data-ng-show="loginForm.username.$error.inputValidator">{{usernameError}}</span>
<input type=text placeholder="Activation Code" name="passcode" data-ng-model="passcode"
data-input-validator="passcode" data-input-validator-msg="passcodeError" data-required>
<span class="tag tag-alert arrow-top" data-ng-show="loginForm.passcode.$error.inputValidator">{{passcodeError}}</span>
<input type=password placeholder="New Password" name="password" data-ng-model="password"
data-input-validator="password" data-input-validator-msg="passwordError" data-input-must-not-match="username" data-required>
<span class="tag tag-alert arrow-top" data-ng-show="loginForm.password.$error.inputValidator">{{passwordError}}</span>
<span class="tag tag-alert arrow-top" data-ng-show="!loginForm.password.$error.inputValidator && loginForm.password.$error.inputMustNotMatch">Please enter a password that is not your email address.</span>
<input type=password placeholder="New Password Again" name="passwordConfirm" data-ng-model="passwordConfirm"
data-input-must-match="password" data-required>
<span class="tag tag-alert arrow-top" data-ng-show="loginForm.passwordConfirm.$error.inputMustMatch">Please enter the same new password again.</span>
<button class="btn btn-special" data-ng-disabled="loginForm.$invalid" data-ng-click="save()">Activate</button>
</form>
相关文章:
- 表单级别的Anguarjs指令,访问所有字段并检查验证
- 是否有任何不需要后端的验证码角度指令
- 在 AngularJs 中验证自定义指令(我想让它成为必需的)
- 角度指令:使提交按钮指令侦听表单验证
- 在同一页面上多次使用的自定义指令 (AngularJS) 中的验证
- Angularjs - 使用自定义指令验证初始 url 值
- 角度指令验证和解密
- AngularJS通过指令重新验证提交
- 验证指令代码在ng重复中的每个项目上执行
- $render在角度1.2.2停止工作(文件验证指令)
- 在$invalid上添加验证指令并从文本框中删除数据的指令
- 通过摘要运行验证指令
- Angular 自定义验证指令在 KeyUp 事件上不显示错误
- 角度的自定义验证指令
- 自定义验证指令覆盖其他验证
- 自定义表单验证指令不传递输入数据
- blur angular JS上的异步验证指令
- 如果多个元素使用相同的自定义验证指令,如何验证表单
- 从外部访问表单验证指令
- 在AngularJS中验证指令中的字段