如何控制input type="url"默认校验 无需JS接受任意输入

不需要修改type="url"的属性，也无需编写任何JavaScript代码，利用HTML原生的校验控制属性即可满足需求，共有两种标准实现方案：

• 方案1：给输入框所属的<form>标签添加novalidate布尔属性
  该属性会直接关闭当前表单的全部原生校验逻辑，无论输入框是url、email这类自带格式校验的类型，还是配置了required、pattern等校验规则，表单提交时都不会触发格式拦截，输入框内的任意内容都可以正常被接收。
  代码示例：

  <form novalidate>
    <!-- 其余表单项 -->
    <input type="url" name="custom_url">
    <button type="submit">提交</button>
  </form>
  

  该方案实现成本最低，适合不需要依赖浏览器原生表单校验的场景。

• 方案2：给表单的提交按钮添加formnovalidate布尔属性
  如果需要灵活控制提交时的校验逻辑，可以给提交按钮（<button type="submit">或<input type="submit">）添加formnovalidate布尔属性。点击带有该属性的按钮提交表单时，会临时跳过所有原生校验规则，url输入框的任意内容都可以正常提交；也可以额外配置一个不带该属性的提交按钮，走默认的校验流程。
  代码示例：

  <form>
    <!-- 其余表单项 -->
    <input type="url" name="custom_url">
    <!-- 点击该按钮提交不触发校验 -->
    <button type="submit" formnovalidate>无校验提交</button>
    <!-- 点击该按钮提交走默认校验规则 -->
    <button type="submit">校验后提交</button>
  </form>
  

注意：现行HTML规范没有提供针对单个表单控件单独禁用原生校验的属性，以上两种方案都是在提交时跳过整个表单的校验逻辑，无法做到仅关闭当前url输入框的格式校验、同时保留同表单内其他字段的原生校验效果。

内容的提问来源于stack exchange，提问作者Mohamed