Javascript URL 的 <input> 标签验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13820477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<input> tag validation for URL
提问by Sumit Bijvani
I am trying to validate an URL using JavaScript, but for some reason it's not working. When someone has not entered any URL, it shows message like:
我正在尝试使用 JavaScript 验证 URL，但由于某种原因它不起作用。当有人没有输入任何 URL 时，它会显示如下消息：
Please enter valid URL.(i.e. http://)
请输入有效的 URL。（即 http://）
I am trying to fix it, but can't make it working.
我正在尝试修复它，但无法使其正常工作。
Is there any trick in HTML5 that allows to validate an URL?
HTML5 中是否有任何允许验证 URL 的技巧？
$(document).ready(function() {
$("#contactInfos").validate(
{ onfocusout: false, rules: {
phone: { number:true },
zipcode: { number:true },
website: { url:true }
},
messages: { phone: { number:"please enter digit only" },
zipcode: { number:"Plese enter digit only" },
website: { url: "Please enter valid URL.(i.e. http://)" }
}
});
Validate method for an URL:
验证 URL 的方法：
url: function(value, element) {
values=value.split(',');
for (x in values)
{
temp=values[x].trim();
temp1=this.optional(element) || /^(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})|[!$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(temp);
if(temp1!=true)
{
return false;
}
}
return true;
},
回答by Scipion
In html5 you can use the tag input type="url":
在 html5 中，您可以使用标签 input type="url"：
<input type="url" />
you can use your own pattern too:
你也可以使用你自己的模式：
<input type="url" pattern="https?://.+" required />
In the paper Uniform Resource Identifier (URI): Generic Syntax [RFC3986] http://www.ietf.org/rfc/rfc3986.txtthe regular expression for a URI is:
在论文 Uniform Resource Identifier (URI): Generic Syntax [RFC3986] http://www.ietf.org/rfc/rfc3986.txt 中，URI 的正则表达式是：
^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
For example, matching the above expression to
http://www.ics.uci.edu/pub/ietf/uri/#Relatedresults in the following subexpression matches:
= http: = http = //www.ics.uci.edu = www.ics.uci.edu = /pub/ietf/uri/ = <undefined> = <undefined> = #Related = Related
例如，将上面的表达式匹配到
http://www.ics.uci.edu/pub/ietf/uri/#Related导致以下子表达式匹配：
= http: = http = //www.ics.uci.edu = www.ics.uci.edu = /pub/ietf/uri/ = <undefined> = <undefined> = #Related = Related
回答by Mr world wide
Does it make sense that the url is valid without a protocol?
没有协议的 url 有效是否有意义？
For instance, currently http://google.comis a valid url, while google.comis not.
例如，当前http://google.com是一个有效的网址，而google.com不是。
Similarly, http://localhostis a valid url, while localhostis not a valid url.
同样，http://localhost是有效网址，而localhost不是有效网址。
