URL验证器:如果未键入http://，则动态传递

URL Validator: If http:// not typed pass it dynamically

本文关键字：动态 http 验证 如果 URL      更新时间：2023-09-26

我正在尝试为一个小型书签应用程序制作一个URL验证器。

我已经做了验证器来接受，这样它就接受了应该有效的东西：

http://example.com
http://www.examples.com
http://www.example.com
ftp://www.example.com
ftp://cdn.example.com/
etc.

现在，在现实生活中，我们中的许多人通常不会为网站键入http://，所以我希望，当用户键入任何前面没有http://、https://或ftp://的内容时，默认情况下会传递http://。请注意，我不想把它传递到输入端，而是传递到后端。

因此，对于我的例子，我有这样的：

$("#in").on('keyup', function () {    
     var url = $('#in').val();
     var match = /^(https?|ftp):'/'/(((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:)*@)?((('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5]))|((([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.)+(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.?)(:'d*)?)('/((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)+('/(([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)*)*)?)?('?((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|['uE000-'uF8FF]|'/|'?)*)?('#((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|'/|'?)*)?$/

     if (match.test(url)) {
         console.log("URL OK")
     } else {
         console.log("URL invalid")
     }
});

如果未键入http://，请将其传递到console.log以显示为有效的url。

我不确定这是否是一个好的做法，因为它可能会导致许多错误，但这是我唯一能想到的方法，我最终会创建一个http://网站。我不能强迫用户在每个书签上键入http://。

另外请注意，我不想使用任何类型的插件。

也请告诉我你对此的看法。

感谢

假设您的匹配有效。。。

$("#in").on('keyup', function () {    
     var url = $('#in').val();
     var match = /^(https?|ftp):'/'/(((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:)*@)?((('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5]))|((([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.)+(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.?)(:'d*)?)('/((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)+('/(([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)*)*)?)?('?((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|['uE000-'uF8FF]|'/|'?)*)?('#((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|'/|'?)*)?$/;
    var noprotocolmatch = /^(((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:)*@)?((('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5]))|((([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.)+(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.?)(:'d*)?)('/((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)+('/(([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)*)*)?)?('?((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|['uE000-'uF8FF]|'/|'?)*)?('#((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|'/|'?)*)?$/;
     if (match.test(url)) {
         console.log("URL OK with protocol");
     } else if (noprotocolmatch.test(url)) {
         console.log("URL OK without protocol");
         url = 'http://'+url;
     } else {
         console.log("URL invalid")
     }
});

实际上，如果URL失败，我们至少会尝试将其与第二部分进行匹配，如果它匹配但错过了协议，我们会添加它，如果一切都失败，它就是无效的。

或者像这样，在第一次匹配中使用可选协议，然后在第二步中检查协议的存在：

$("#in").on('keyup', function () {    
     var url = $('#in').val();
     var match = /^((https?|ftp):'/'/)?(((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:)*@)?((('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5]))|((([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.)+(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.?)(:'d*)?)('/((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)+('/(([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)*)*)?)?('?((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|['uE000-'uF8FF]|'/|'?)*)?('#((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|'/|'?)*)?$/;
     var protomatch = /^(https?|ftp):'/'/(.*)/;
     if (match.test(url)) {
         console.log("URL OK");
         if(!protomatch.test(url))
            url = 'http://'+url;
     } else {
         console.log("URL invalid")
     }
});

第一：绑定在表单提交上，而不是绑定在keyup 上

验证每个按键的URL效率非常低，因为在发送到服务器之前，您只需要检查URL，即表单提交。因此，请使用以下事件处理程序：

$('FORM').on('submit', function() {
 if (!url_is_valid()) {
   return false;  // Cancel form submission when URL isn't valid.
                  // You'll need to display an error message as well.
 }
});

您的URL解析/验证将在每次提交页面时只运行一次，而不是每秒运行几次（取决于键入速度）。

第二：

另外请注意，我不想使用任何类型的插件。

为什么不呢？JavaScript中的URI解析是一个已解决的问题。不要重新发明轮子吗？

相关文章：