HTML5 提供自动 URL 验证：-
<form>
<input type="url" name="someUrl">
</form>
这将对没有协议前缀的 URL 进行验证失败 - 例如stackoverflow.com将失败而http://stackoverflow.com将通过。
如果还没有协议，如何自动将 http:// 添加到 url？
我可以添加一个 onblur 事件处理程序，但是在验证事件之前有没有更好的方法？
问问题
26740 次
9 回答
25
用于此的代码不应中断用户的操作，而应等到用户离开表单域以检查输入文本是否有“http”。所以使用“onblur”而不是“onkeyup”。
然后，只需使用 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>于 2015-02-02T17:01:28.893 回答
10
如果您不想要浏览器验证（它可能因浏览器而异），您可以添加以下 novalidate 属性
<input type="url" name="someUrl" formnovalidate="formnovalidate">
否则，您可能希望通过在有人开始键入时添加 http:// 或什至已经在页面加载的框中键入 http:// 来更透明地添加 http:// 前缀
（感谢正确指出 novalidate 适用于表格的编辑，而上面的内容则覆盖了这一点，借记债权人以进行编辑；）
于 2013-07-30T12:28:00.243 回答
9
你们可能想要使用的是：
$(function(){
$('input[type="url"]').on('blur', function(){
var string = $(this).val();
if (!string.match(/^https?:/) && string.length) {
string = "https://" + string;
$(this).val(string)
}
});
});
这在准备好的文件上运行
检查值是否为空或开头是否缺少 http
在这种情况下将其插入模糊
谢谢@1j01
于 2017-09-27T15:34:42.230 回答
5
您可以使用
HTML：
<form>
<input type="url" name="someUrl" onkeyup="checkUR(this)" >
</form>
脚本：
function checkUR(abc){
string = abc.value
if(!(/^http:\/\//.test(string))){
string = "http://" + string;
}
abc.value=string
}
我希望它会有所帮助
于 2013-07-30T12:42:46.680 回答
5
您可以尝试通过提供初始值和占位符来强制用户输入有效的 url。
<label for="some-url">Some url:</label>
<input id="some-url" type="url" placeholder="http://example.com" value="http://">于 2016-06-04T08:34:41.643 回答
2
它将帮助用户在不打扰的情况下使用 http 前置烦恼。只需将此 JavaScript 代码添加到带有type="url" <input>元素的网页中，一切都会自动运行。
// Run a callback function after DOM is fully loaded
function domReady(callback) {
if (document.readyState != "loading") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
// Prepend https to url input field value if already not prepended by http or https
domReady(() => {
const urlInput = document.querySelectorAll('input[type="url"]');
for(i = 0; i < urlInput.length; i++) {
urlInput[i].addEventListener('change', function(){
let urlValue = this.value;
// If http or https isn't prepended as case insensitive characters and if the input field has any value
if (!urlValue.match(/^https?:/i) && urlValue.length) {
urlValue = "https://" + urlValue;
this.value = urlValue;
}
});
}
});
好处
https://如果http或https尚未在输入字段值中添加前缀https://即使在开始时有http或https没有在前面- 用户离开输入字段后自动修改值
https://如果输入字段没有值，则不添加- 以不区分大小写的方式工作
- 自动处理所有 url 类型的输入字段，无需修改 HTML 输入字段元素
限制
https://在以任何方案开头的有效 url 前面添加http或https类似ftp，tel这将导致这些有效 URL 不起作用
PS：如果你也想改成http，请将此语句https附加到上一个代码中的最后一条语句。else ifif
else if (urlValue.match(/^http:/i)) {
urlValue = urlValue.replace(/^http:/i, "https:");
this.value = urlValue;
}
于 2021-04-24T23:19:53.653 回答
1
如果 URL 中没有httpor ，这将在提交之前添加httpsURL。它也是不区分大小写的（i末尾的）。我还使用onchange而不是其他事件来说明用户按下回车键并以这种方式提交表单。
脚本：
function checkURL(o) {
if (!/^https?:\/\//i.test(o.value)) {
o.value = "http://" + o.value;
}
}
替代脚本：（始终正确为“http://”）
function checkURL(o) {
o.value = o.value.replace(/^(https?:\/\/)?/i, "http://");
}
HTML：
<form>
<input type="url" name="someUrl" onchange="checkURL(this)" >
</form>
于 2016-12-16T22:56:31.803 回答
1
单线：
<input type="url" onblur="if (!~this.value.indexOf('http')) this.value = 'https://' + this.value">
于 2021-04-26T11:49:43.797 回答
1
使用 URL 类会更好。
function validateUrl(value) {
try {
const currentUrl = new URL(value);
const { protocol } = currentUrl;
if (protocol !== 'http:' && protocol !== 'https:') {
currentUrl.protocol = 'http:';
return currentUrl.toString();
}
} catch(e) {
return `http://${value}`;
}
}
这里的优点是您首先检查任何协议。如果用户输入错误的协议（例如htts:），它将被替换http:。上面的答案都将预先添加一个新协议，这将导致类似http://htts:. 如果没有协议，它只会添加http://到 catch 块中。
于 2021-05-12T08:43:16.060 回答