输入类型URL - 如果不包含HTTP,则说“请输入URL”

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了输入类型URL - 如果不包含HTTP,则说“请输入URL”相关的知识,希望对你有一定的参考价值。

我一直在做一个表格,遇到了障碍。我一直在使用输入类型=“url”,以便iPad和iPhone等都能拉出正确的键盘 - 并尝试遵循新标准。

我遇到了一个问题。在不需要Web地址的表单上 - 如果用户在www.theiraddress.com中输入,大多数浏览器会以红色/黄色标出它以通知用户他们需要在其前输入“http://”。

我使用了输入:无效的css来删除该大纲。

但是,现在当用户提交表单时,浏览器会抛出错误提示“请输入URL”。

该字段不是必需的 - 我只是想让人们更容易输入他们的地址 - 但仍然在移动设备上显示正确的键盘等。

有没有办法删除这个令人烦恼的工具提示,阻止用户提交表单?

答案

您可以向表单元素添加novalidate属性。外汇:

<form method="post" action="/foo" novalidate>...</form>

https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

取自这个答案:https://stackoverflow.com/a/3094185/1497627

另一答案

根据引用页面的底部(http://www.wufoo.com/html5/types/3-url.html),您可以使用文本输入类型和inputmode属性(http://www.wufoo.com/html5/attributes/23-inputmode.html)来访问移动设备上的键盘,而无需对文本字段进行繁琐的操作。

另一答案

据我所知,根据标准,协议是必需的(Url input field implementation state)。您也可以使用正则表达式来验证该字段,例如/^(?:(http|https|ftp)://)?(?:[w-]+.)+[a-z]{2,6}(/)?/i

另一答案

如果我理解正确,您希望当用户输入不带http://的网址时,会自动添加网址的http://以便报告错误

试试这个:

//PUT THIS IN HEAD

function check_url(){
    //Get input value
    var elem = document.getElementById("url_input");
    var input_value = elem.value;
	//Set input value to lower case so HTTP or HtTp become http
	input_value = input_value.toLowerCase();
    
    //Check if string starts with http:// or https://
    var regExr = /^(http:|https:)//.*$/m;
    
    //Test expression
    var result = regExr.test(input_value);
	
	//If http:// or https:// is not present add http:// before user input
    if (!result){
		var new_value = "http://"+input_value;
		elem.value=new_value;
    }
}
Try to input www.myurl.com<br />
Try to input http://www.myurl.com<br />
Try to input https://www.myurl.com<br /><br />
URL INPUT:<br />
<input type="url" id="url_input" name="url_input" /><br /><br />
<input type="button" value="Submit!!" onclick="check_url()" />

以上是关于输入类型URL - 如果不包含HTTP,则说“请输入URL”的主要内容,如果未能解决你的问题,请参考以下文章

Postman中文文档——请求(Request)

为啥输入类型=“url”验证不起作用

使用 AngularJS 和 HTML 5 验证 URL

如果url不包含特定字符,则htaccess重定向

项目 URL 类型时显示登录索引

如何在没有协议的情况下对输入类型 url 使用 jQuery 验证?