覆盖AngularJS URL验证器

Question

覆盖AngularJS URL验证器

6

AngularJS接受以下内容作为有效的URL:

var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;

Django接受这个：

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)

主要的实际差别在于AngularJS接受http://some-host-without-tld，而Django只允许http://localhost作为没有TLD的有效URL。

由于覆盖Django URL验证器存在问题，我想覆盖AngularJS验证器。我尝试了以下方法，能够成功：

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);

我不太想切换到另一个验证指令，因为我需要更新和检查大量的代码。

有人知道一个可靠的方法吗？

- Blaise

3个回答

1

你可以使用ng-pattern属性来加强验证时使用的模式。（我还没有看到一种“削弱”使用的模式的方法 - 也许这是一件好事。）

- Jeff Hubbard

1

谢谢您的回答。我已经考虑过这个问题了，这是最符合Angular解决这个问题的方式，但我选择不这样做，因为它会在我的模板中的输入字段中添加大量的ng-pattern属性，而且我必须记住对每个URL字段都要这样做。这就是为什么我选择了基于指令的解决方案。 - Blaise

2

所以把模式贴到作用域变量上。请记住，在这种情况下，它需要是一个RegExp对象。 - Jeff Hubbard

是的，正如@Jeff建议的那样，您可以将您的正则表达式作为常量保存，并在需要的地方使用该常量。就像<input ..... ng-pattern="urlRegexPattern">这样。 - Aniket Sinha

0

我们可以创建一个指令来验证URL。在这个例子中，还添加了GUI验证响应。添加了Bootstrap验证类。

app.directive('validateWebAddress', function () {
    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;
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ctrl) {
            element.on("keyup", function () {
                var isValidUrl = URL_REGEXP.test(element.val());
                if (isValidUrl && element.hasClass('alert-danger') || element.val() == '') {
                    element.removeClass('alert-danger');
                } else if (isValidUrl == false && !element.hasClass('alert-danger')) {
                    element.addClass('alert-danger');
                }
            });
        }
    }
});

在您的标签中使用此代码。模型是必需的，因此不要忘记定义模型。

<input type="url" validate-web-address ng-model="DummyClass.WebAddress" class="form-control" id="webaddress" placeholder="Web Address" />

- Md. Nazrul Islam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blaise · Accepted Answer

从Angular 1.3开始，现在你可以完全覆盖现有的$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
    };
});