覆盖AngularJS URL验证 [英] Overwriting the AngularJS URL validator
本文介绍了覆盖AngularJS URL验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
AngularJS接受这一个有效的网址：
<？pre> VAR URL_REGEXP = / ^（FTP | HTTP | HTTPS）：\\ / \\ /（\\ w +：{0,1} \\ W * @）（\\ S +）（： ？[0-9] +）（\\ / | \\ /（[！？！\\ w＃+ =放大器;％@ \\ - \\ /]））$ /;
Django的接受这样的：
正则表达式= re.compile（
R'^（？：HTTP | FTP）S：//'＃http：//或https：//开头
R'（：（：[A-Z0-9]（[A-Z0-9 - ] {0,61} [A-Z0-9]）\\）+（？：？？？？[AZ] {2,6} \\ | [A-Z0-9 - ] {2} \\）|。？。？#domain ...
r'localhost | #localhost ...
R'\\ D {1,3} \\。\\ D {1,3} \\。\\ D {1,3} \\。\\ D {1,3}）'＃...或IP
R'（？:: \\ D +）？ ＃可选端口
R'（？：？| [/？] / \\ S +）$'，re.IGNORECASE）
主要的实际的区别在于AngularJS接受的http：//一些主机且不TLD ，而Django的只允许的http：//本地主机为无TLD有效的网址
由于它是有问题的覆盖Django的URL验证，我要覆盖AngularJS验证。我尝试了这种方式，其工作方式：
app.overwriteUrlValidator =功能（ngModel）{ // Django的正则表达式，移植到JS。
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+)$/gi; //验证相同的AngularJS的，只是用不同的正则表达式。
功能urlValidator（值）{
如果（ngModel。$的isEmpty（值）|| URL_REGEXP.test（值））{
ngModel $ setValidity（URL，真正的）。
返回值;
}其他{
ngModel $ setValidity（网址，假）。
返回不确定的;
}
} //这是我不满意的部分。我需要使用超时
//因为我的code角被执行前会将其URL验证。
//如果我加入我的角度做之前，它不会正常工作？原因。
window.setTimeout（函数（）{
ngModel $ formatters.push（urlValidator）。
ngModel $ parsers.push（urlValidator）。
}，100）;
};
/ **
*保持跟踪用户的交互输入字段
* /
app.inputDirective =功能（）{
功能链接（范围，元素，ATTRS，ngModel）{
如果（ngModel＆安培;＆安培; attrs.type ===URL）{
app.overwriteUrlValidator（ngModel）;
}
} 返回{
限制：'A'，
要求：'？ngModel'，
链接：链接
};
};
app.directive（输入，app.inputDirective）;
app.directive（'textarea的'，app.inputDirective）;
我宁愿不切换到另一个验证指令，因为我不得不更新，并检查了很多code的。
有谁知道这样做的扎实方式？
解决方案
由于角1.3，它现在是相对容易的，你可以完全覆盖现有的 $验证：
myApp.directive（'输入'，函数（）{
功能链接（范围，元素，ATTRS，ngModel）{
功能allowSchemelessUrls（）{
//匹配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; //默默prefixes schemeless网址以http：//时，
//转换期值模型的价值。
ngModel。$ parsers.unshift（函数（值）{
如果（URL_REGEXP.test（值）及和放大器; URL_REGEXP.test（的http：//！+值））{
回归的http：//+价值;
}其他{
返回值;
}
}）; ngModel。$ validators.url =功能（值）{
返回ngModel。$的isEmpty（值）|| URL_REGEXP.test（值）;
};
} 如果（ngModel＆安培;＆安培; attrs.type ===URL）{
allowSchemelessUrls（）;
}
} 返回{
要求：'？ngModel'，
链接：链接
};
}）;
AngularJS accepts this for a valid URL:
var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;
Django accepts this:
regex = re.compile(
r'^(?:http|ftp)s?://' # http:// or https://
r'(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|' #domain...
r'localhost|' #localhost...
r'\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})' # ...or ip
r'(?::\d+)?' # optional port
r'(?:/?|[/?]\S+)$', re.IGNORECASE)
The main practical difference is that AngularJS accepts http://some-host-without-tld, while Django only allows http://localhost as a valid URL without TLD.
Since it's problematic to overwrite the Django URL Validator, I want to overwrite the AngularJS validator. I attempted that this way, which works:
app.overwriteUrlValidator = function(ngModel) {
// Django RegExp, ported to JS.
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+)$/gi;
// Same validator as AngularJS's, only with a different RegExp.
function urlValidator(value) {
if (ngModel.$isEmpty(value) || URL_REGEXP.test(value)) {
ngModel.$setValidity('url', true);
return value;
} else {
ngModel.$setValidity('url', false);
return undefined;
}
}
// This is the part I'm not happy about. I need to use a timeout
// because my code is executed before Angular adds its URL validator.
// If I add mine before Angular does, it will not work for ??? reason.
window.setTimeout(function() {
ngModel.$formatters.push(urlValidator);
ngModel.$parsers.push(urlValidator);
}, 100);
};
/**
* Keep track of user's interaction with input fields
*/
app.inputDirective = function() {
function link(scope, element, attrs, ngModel) {
if (ngModel && attrs.type === 'url') {
app.overwriteUrlValidator(ngModel);
}
}
return {
restrict: 'A',
require : '?ngModel',
link : link
};
};
app.directive('input', app.inputDirective);
app.directive('textarea', app.inputDirective);
I rather don't switch to another validation directive because I'd have to update and check a lot of code.
Does anyone know a solid way of doing this?
解决方案
As of Angular 1.3, it's relatively easy now that you can completely overwrite existing $validators:
myApp.directive('input', function() {
function link(scope, element, attrs, ngModel) {
function allowSchemelessUrls() {
// 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;
// Silently prefixes schemeless URLs with 'http://' when
// converting a view value to model value.
ngModel.$parsers.unshift(function(value) {
if (!URL_REGEXP.test(value) && URL_REGEXP.test('http://' + value)) {
return 'http://' + value;
} else {
return value;
}
});
ngModel.$validators.url = function(value) {
return ngModel.$isEmpty(value) || URL_REGEXP.test(value);
};
}
if (ngModel && attrs.type === 'url') {
allowSchemelessUrls();
}
}
return {
require: '?ngModel',
link: link
};
});
这篇关于覆盖AngularJS URL验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
