Html 使用 HTML5 url 输入验证假设 url 以 http:// 开头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17946960/
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
With HTML5 url input validation assume url starts with http://
提问by Ryan
HTML5 provides for automatic URL validation :-
HTML5 提供自动 URL 验证：-
<form>
<input type="url" name="someUrl">
</form>
This will fail validation for URL's that don't have a protocol prefix - e.g. stackoverflow.comwill fail while http://stackoverflow.comwill pass.
这将使没有协议前缀的 URL 验证失败 - 例如stackoverflow.com将失败而http://stackoverflow.com将通过。
How can I automatically add http:// to a url if there isn't already a protocol?
如果还没有协议，如何自动将 http:// 添加到 url？
I could add a onblur event handler but is there a better way like some before validation event?
我可以添加一个 onblur 事件处理程序，但是在验证事件之前有没有更好的方法？
采纳答案by ginna
The code for this should not interrupt the user's action, but should instead wait until the user leaves the form field to check the input text for "http". So use "onblur" instead of "onkeyup".
此代码不应中断用户的操作，而应等到用户离开表单字段以检查“http”的输入文本。所以使用“onblur”而不是“onkeyup”。
Then, just see if the string contains "http" using indexOf. If not, it will return -1, which is falsey.
然后，只需使用 indexOf 查看字符串是否包含“http”。如果不是，它将返回-1，这是错误的。
function checkURL (abc) {
var string = abc.value;
if (!~string.indexOf("http")) {
string = "http://" + string;
}
abc.value = string;
return abc
}<form>
<input type="url" name="someUrl" onblur="checkURL(this)" />
<input type="text"/>
</form>回答by dove
ifyou don't want the browser validation (it can vary between browsers) you can add the following novalidate attribute
如果您不想要浏览器验证（它可能因浏览器而异），您可以添加以下 novalidate 属性
<input type="url" name="someUrl" formnovalidate="formnovalidate">
elseyou might want to be more transparent about prefixing http:// by simply adding once someone starts to type or even to have http:// already typed into the box on the page load
否则，您可能希望通过在有人开始输入或什至在页面加载时已将 http:// 输入到框中时简单地添加前缀来更加透明地添加 http://
(credit to editor who rightly points out that novalidate applies to form, while above overrides that, debit to creditor for approach to edit ;)
（归功于正确指出 novalidate 适用于表单的编辑，而以上覆盖了这一点，借记债权人以进行编辑；）
回答by Toskan
what you guys probably want to use is this:
你们可能想要使用的是：
$(function(){
$('input[type="url"]').on('blur', function(){
var string = $(this).val();
if (!string.match(/^https?:/) && string.length) {
string = "http://" + string;
$(this).val(string)
}
});
});
this runs on document ready
这在文档就绪时运行
checks if value is empty or has missing http at the beginning
检查值是否为空或开头缺少 http
inserts it in that case on blur
在这种情况下在模糊时插入它
thanks @1j01
谢谢@1j01
回答by Vladimir Vovk
You can try to force users enter valid url by providing initial value and placeholder.
您可以尝试通过提供初始值和占位符来强制用户输入有效的 url。
<label for="some-url">Some url:</label>
<input id="some-url" type="url" placeholder="http://example.com" value="http://">回答by Sonu Sindhu
回答by Carter Medlin
This will prepend the URL before submitted if it does not have a httpor httpsin the URL. It is also case insensitive (the iat the end). I'm also using onchangeinstead of the other events to account for users pressing the enter key and submitting the form that way.
如果 URL 中没有http或https，这将在提交之前添加URL。它也不区分大小写（i最后）。我还使用onchange而不是其他事件来说明用户按下回车键并以这种方式提交表单。
SCRIPT:
脚本：
function checkURL(o) {
if (!/^https?:\/\//i.test(o.value)) {
o.value = "http://" + o.value;
}
}
ALTERNATE SCRIPT: (Always correct to "http://")
备用脚本：（始终正确为“http://”）
function checkURL(o) {
o.value = o.value.replace(/^(https?:\/\/)?/i, "http://");
}
HTML:
HTML：
<form>
<input type="url" name="someUrl" onchange="checkURL(this)" >
</form>
回答by rupper
I uploaded to GitHub an AngularJS directive to prepend http://automatically. Useful for the user at least.
我将 AngularJS 指令上传到 GitHub 以http://自动添加。至少对用户有用。
