如何用<input type="button">触发表单原生校验且不重复JS逻辑？

不用额外加submit按钮，也不用重复写校验逻辑，直接调用浏览器原生的表单校验方法就能实现和submit按钮一样的校验效果：

• 核心是使用表单元素的reportValidity()方法，它会自动触发所有字段的原生校验（包括required、pattern等规则），如果校验不通过，会弹出浏览器自带的提示框；校验通过时返回true，此时再执行你的业务逻辑即可。

具体实现步骤： #

1. 给表单添加一个id（方便快速获取）：

<form id="customer-form">
  <input id="customer-name" type="text" name="i.user.name" size="25" maxlength="40" placeholder="Name" pattern="^[^ ]..+$" required="required" />
  <!-- 其他表单元素 -->
  <input type="button" onclick="handleButtonClick()" value="提交" />
</form>

2. 编写按钮点击的处理函数，先校验再执行业务逻辑：

function handleButtonClick() {
  const form = document.getElementById('customer-form');
  // 触发原生校验，不通过则显示浏览器自带提示，通过则返回true
  if (form.reportValidity()) {
    // 这里执行你原来的something()逻辑
    something();
  }
}

补充说明： #

• 如果只想判断校验结果、不想弹出提示，可以用checkValidity()方法，它仅返回布尔值，不触发提示框。
• 如果表单没有设置id，也可以通过表单内的输入元素获取所属表单：

const nameInput = document.getElementById('customer-name');
const form = nameInput.form; // 通过input的form属性关联到所属表单

这种方式完全复用浏览器原生的校验规则，不用手动实现required、pattern等校验逻辑，也不需要额外添加submit按钮，很适合本地测试场景。

内容的提问来源于stack exchange，提问作者U. Windl