有没有一个明确的解决方案可以使用jQuery在没有插件的情况下验证URL

Is there a definitive solution for using jQuery to validate a URL without a plugin?

本文关键字:插件 情况下 URL 验证 jQuery 可以使 有一个 解决方案      更新时间:2023-09-26

所需行为

我希望能够验证表单中的单个字段,以检查它是否是有效的URL。

所谓valid URL,我的意思是以下内容将验证以下格式以及其他TLD等:

http://www.somesite.com
http://www.somesite.com/subdir
http://somesite.com
http://somesite.com/subdir
www.somesite.com
www.somesite.com/subdir

表单验证的其余部分不依赖于插件,所以如果可能的话,我宁愿不使用插件。

我尝试了什么

独立Regex

关于使用jQuery验证URL,我已经测试了一些公认的答案和建议。

出于这样或那样的原因,它们似乎不起作用,例如以下内容被称为插件中的正则表达式:

var myVariable = "http://www.google.com/";
if(/^([a-z]([a-z]|'d|'+|-|'.)*):('/'/(((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:)*@)?(('[(|(v['da-f]{1,}'.(([a-z]|'d|-|'.|_|~)|[!'$&''(')'*'+,;=]|:)+))'])|(('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])|(%['da-f]{2})|[!'$&''(')'*'+,;=])*)(:'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})|[!'$&''(')'*'+,;=]|:|@)*)*)?)|((([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})|[!'$&''(')'*'+,;=]|:|@)){0})('?((([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})|[!'$&''(')'*'+,;=]|:|@)|'/|'?)*)?$/i.test(myVariable)) {
alert("valid url");
} else {
alert("invalid url");
}

标记为有效:http://

标记为无效:www.site.com

来自插件的Regex

我查找了流行插件中使用的正则表达式,如:

jQuery验证插件-https://github.com/jzaefferer/jquery-validation

其中源中的相关正则表达式似乎是:

/^(https?|s?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})|[!'$&''(')'*'+,;=]|:|@)|'/|'?)*)?$/

为了测试功能,我从GitHub下载了master并运行demo/index.html,得到了Firebug控制台错误:

TypeError: $.validator is undefined

我复制并粘贴了上面的正则表达式,以便在第一个代码示例中使用,并且以下内容被标记为有效:

http://w.c

和:

h5验证-https://github.com/dilvie/h5Validate

其中源中的相关正则表达式为:

/(https?|ftp):'/'/(((([a-zA-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-zA-Z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-zA-Z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-zA-Z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-zA-Z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.)+(([a-zA-Z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-zA-Z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-zA-Z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-zA-Z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.?)(:'d*)?)('/((([a-zA-Z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)+('/(([a-zA-Z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)*)*)?)?('?((([a-zA-Z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|['uE000-'uF8FF]|'/|'?)*)?('#((([a-zA-Z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&''(')'*'+,;=]|:|@)|'/|'?)*)?/

再次在第一个代码示例的上下文中使用此片段,将以下内容标记为有效:

http://w

不要这样做或做不同

我看到过一些帖子说,试图通过正则表达式验证URL是徒劳的:

https://stackoverflow.com/a/1305082/1063287

它可以在服务器端完成(例如使用Python(:

https://stackoverflow.com/a/161749/1063287

问题

所以我只是想知道,在发布时,是否有一个明确的解决方案可以在没有插件的情况下使用jQuery验证URL?

简而言之:不,因为这不是Jquery库的目的(正如@Juhana所提到的(。

此外,正如@Adeneo所写,客户端验证仅用于ui目的(即告诉用户它是否潜在有效(。真正的验证应该是服务器端。

也就是说,我建议使用这个regex,它对ui来说很好。

相关文章: