Angularjs - 验证自定义指令初始url值 [英] Angularjs - Validate initial url value with custom directive
问题描述
我有这种自定义的验证指令:
/ **
*覆盖使用Django的URL验证默认URL验证
*原始来源:http://stackoverflow.com/questions/21138574/overwriting-the-angularjs-url-validator
* /
angular.module('dmn.vcInputUrl',[]).directive('vcUrl',函数(){ //匹配Django的URL验证,这使得schemeless的URL。
VAR URL_REGEXP = /^((?:http|ftp)s?:\\/\\/)(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\\.)+(?:[A-Z]{2,6}\\.?|[A-Z0-9-]{2,}\\.?)|localhost|\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3})(?::\\d+)?(?:\\/?|[\\/?]\\S+)$/i; VAR验证=功能(值){
如果(URL_REGEXP.test(值)及和放大器; URL_REGEXP.test(的http://!+值)){
回归的http://+价值;
}其他{
返回值;
}
} 返回{
要求:'?ngModel',
链接:链接功能(范围,元素,ATTRS,ngModel){
功能allowSchemelessUrls(){
//默默prefixes schemeless网址以http://转换期值模型值时。
ngModel $ parsers.unshift(验证)。 ngModel。$ validators.url =功能(值){
返回ngModel。$的isEmpty(值)|| URL_REGEXP.test(值);
};
}
如果(ngModel&安培;&安培; attrs.type ===URL){
allowSchemelessUrls();
}
}
};
});
它正常工作时,你'脏'通过输入或粘贴输入,但我需要它来运行这个验证,覆盖默认键入=URL
验证时该值最初设置在ngModel。
我试着加入 ngModel $ formatters.unshift(验证);
,但它导致。的http://添加到输入端,我需要为了避免由于用户的更改是手动批准,这将是浪费时间来批准加入的http://。
任何帮助将是AP preciated!
设置NG-模式选项输入类型字段,例如:
<输入类型=文本\r
NG-模式选项={updateOn:默认,反跳:{'默认':0}}< /输入>
\r
这将确保您的验证被炒鱿鱼,当值在ngModel最初设置,因为你在问题中已经指出。
查看详细ngModelOptions AngularJs文件建立:在这里输入链接的描述
I have this custom validation directive:
/**
* Overwrites default url validation using Django's URL validator
* Original source: http://stackoverflow.com/questions/21138574/overwriting-the-angularjs-url-validator
*/
angular.module('dmn.vcInputUrl', [])
.directive('vcUrl', function() {
// Match Django's URL validator, which allows schemeless urls.
var URL_REGEXP = /^((?:http|ftp)s?:\/\/)(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?::\d+)?(?:\/?|[\/?]\S+)$/i;
var validator = function(value) {
if (!URL_REGEXP.test(value) && URL_REGEXP.test('http://' + value)) {
return 'http://' + value;
} else {
return value;
}
}
return {
require: '?ngModel',
link: function link(scope, element, attrs, ngModel) {
function allowSchemelessUrls() {
// Silently prefixes schemeless URLs with 'http://' when converting a view value to model value.
ngModel.$parsers.unshift(validator);
ngModel.$validators.url = function(value) {
return ngModel.$isEmpty(value) || URL_REGEXP.test(value);
};
}
if (ngModel && attrs.type === 'url') {
allowSchemelessUrls();
}
}
};
});
It works fine when you 'dirty' the input by typing or pasting, but I need it to run this validation, overwriting the default type="url"
validation when the value is initially set in the ngModel.
I've tried adding ngModel.$formatters.unshift(validator);
but it results in the 'http://' being added to input, which I need to avoid as user's changes are manually approved and it would be a waste of time to approve the addition of 'http://'.
Any help would be appreciated!
Set ng-model-options on the input type field, for example:
<input type="text"
ng-model-options="{ updateOn: 'default', debounce: {'default': 0} }"</input>
This will ensure your validator gets fired "when the value is initially set in the ngModel", as you have stated in the question.
See detailed AngularJs documentaion on ngModelOptions:enter link description here
这篇关于Angularjs - 验证自定义指令初始url值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!