Question

我需要使用jQuery验证变量中的网址，但不能使用validate-plugin。有一种简单的方法可以做到这一点吗？

Answer 1

您可以使用与验证插件相同的正则表达式（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。一些注意事项：可能是您想要的，但它并非严格正确。通常，如果要接受在Intranet环境中有效但在大多数Web表单中通常不允许的http://w和http://localserver之类的内容，则需要选择略有不同的正则表达式。在某种程度上，这个正则表达式更安全，因为在这种情况下它需要FQDN。类似地，其他示例（如自定义协议）在此处被拒绝，但是有效并且可用于当今使用的许多内容。如果你问用户“你的主页是什么？”尽管如此......你可能想要排除这些。

稍后发现此问题：请随意使用我提供的代码段测试其他测试用例，如果您觉得应该提及新的常见案例，请更新答案。我用最新的正则表达式重新编写了答案，以这种格式更好地为社区服务。

Answer 2

非常感谢Meo和Nick，我把你的答案放在一起，效果很好。

if(/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test($("#url").val())){
    alert("valid URL");
} else {
    alert("invalid URL");
}

Answer 3

如果您确定您的受众群体使用的是HTML5，则可以使用type="url"来验证文字字符串。您还可以动态创建输入元素，设置类型并测试变量是否为有效URL。

以下内容基于https://www.raymondcamden.com/2016/10/19/using-html-form-validation-in-pure-javascript

的博文

＆＃13;

var elm;
function isValidURL(u){
  if(!elm){
    elm = document.createElement('input');
    elm.setAttribute('type', 'url');
  }
  elm.value = u;
  return elm.validity.valid;
}

console.log(isValidURL('http://www.google.com/'));
console.log(isValidURL('//google.com'));
console.log(isValidURL('google.com'));

＆＃13;

Answer 4

是正则表达式：

/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ix

Answer 5

var url = $('input.surl').val();
url_validate = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
if(!url_validate.test(url)){
   alert('error');
}
else{
   alert('success');
}

Answer 6

您想要验证您的网址：

请传递此功能中的网址，然后这将为您提供 true 或 false 。

见功能：

<script>
function isUrl(s) {
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
    return regexp.test(s);
}

isUrl(yourURL);
</script>

Answer 7

代码：

var re = /^(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/;
re.test('http://www.goole.in');

使用jQuery验证url而不使用validate-plugin？

7 个答案: