【问题标题】:Remove URL Input field Validations but accept only URL without https删除 URL 输入字段验证,但只接受没有 https 的 URL
【发布时间】:2025-12-30 18:10:06
【问题描述】:

我想在我的输入字段中接受URL。但我不在乎https://https://。我只想删除此验证。但它应该只接受URL

www.example.comexample.com 这样的示例应该是可以接受的。

<form action="" method="POST" class="form-box d-flex justify-content-between" enctype="multipart/form-data">                            
    <input type="url" class="form-control" name="url">
    <button type="submit" class="btn search-btn">Find</button>
</form>

【问题讨论】:

标签: javascript html forms html-input


【解决方案1】:

我在这里回答了我的问题。我正在使用正则表达式进行验证。

<input                      
pattern="^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$" 
placeholder="Find your website ranking... Eg - site.com" class="form-control" name="url"
oninvalid="setCustomValidity('Please Enter URL.')"
onchange="try{setCustomValidity('')}catch(e){}"
>

网址检查器正则表达式 - ^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$

我正在使用下面的 javascript 来更改验证消息 -

oninvalid="setCustomValidity('Please Enter URL.')"
onchange="try{setCustomValidity('')}catch(e){}"

【讨论】:

  • 对于未来的人来说可能值得注意的是,此解决方案需要删除 type="url" 属性,因为除了您设置的任何模式之外,浏览器会自动应用对协议 (http(s)) 的检查输入类型:developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… 因此,您将无法获得给定移动设备将为 url 输入类型提供的任何自定义键盘。