使用jQuery验证url,没有validate-plugin?

前端之家收集整理的这篇文章主要介绍了使用jQuery验证url,没有validate-plugin?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要验证一个URL的变量与jQuery,但不能使用validate-plugin。有没有一个简单的方法来做到这一点?

解决方法

您可以使用验证插件所使用的正则表达式(2015年5月23日更新为最新的正则表达式):
function isUrlValid(url) {
    return /^(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})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);
}

var testCases = [
    "http://www.google.com/","https://www.google.com/","ftp://www.google.com/","http://google.com/","http://google.com","https://google.com","http://www.google.com:80/","https://www.google.com:443/","http://127.0.0.1/","http://127.0.0.1:9200/","www.site.com","x:","http://","javascript:alert('xss')","http://w","http:","derp://www.google.com","http://localserver"
],div = document.getElementById("output");

for(var i=0; i < testCases.length; i++) {
    var test = testCases[i];
    div.innerHTML += (isUrlValid(test) ? "<span class='valid'>valid</span>:   " : "<span class='invalid'>invalid</span>: ") + "" + test + "\n";
}
.valid { color: green; }
.invalid { color: red; }
<pre id="output"></pre>

这处理unicode等,所以它有点冗长。来源是the validation plugin itself.几个注释:这可能是你想要的,但它不是严格正确的。通常,如果您想要接受http:// w和http:// localserver这些在内部网环境中有效,但在大多数Web表单中通常不允许的内容,则需要选择稍微不同的正则表达式。在某种程度上,这种正则表达式更安全,因为在这种情况下需要一个FQDN。类似的其他例子,如自定义协议在这里被拒绝,但是有效,并为许多今天使用的工作。如果您询问用户“您的首页是什么?”在一个形式虽然…你可能想排除这些反正。

任何人以后发现这一点:请随意测试额外的测试用例,我包括代码段,并更新答案,如果你觉得一个新的常见案例应该提到。我用最新的正则表达式重写了答案,并以这种格式更好地服务于社区。

猜你在找的jQuery相关文章