如何修改HTML5表单默认验证规则，实现字段onblur失焦时显示校验错误

可以修改HTML5表单的默认验证触发时机，通过调用原生表单验证API即可实现失焦时显示验证错误。

你给出的手机号输入框，只需要添加少量JS监听blur事件，调用reportValidity()方法即可触发和提交时完全一致的浏览器默认验证提示，代码如下：

const mobileInput = document.getElementById('id_mobile');
// 监听输入框失焦事件
mobileInput.addEventListener('blur', function() {
  // 主动触发验证并显示默认错误提示
  this.reportValidity();
});

如果需要自定义错误提示内容，可以配合setCustomValidity()方法调整：

const mobileInput = document.getElementById('id_mobile');
mobileInput.addEventListener('blur', function() {
  if (!this.validity.valid) {
    // 自定义错误文本
    this.setCustomValidity('请输入10位手机号，开头需为6、7、8或9');
  } else {
    // 验证通过时清空自定义错误，否则会一直提示错误
    this.setCustomValidity('');
  }
  this.reportValidity();
});

如果要给表单内所有需要验证的字段统一添加失焦验证逻辑，可以批量绑定事件：

// 替换为你的表单选择器
const form = document.querySelector('form');
// 选中所有带required或者pattern属性的输入框
form.querySelectorAll('input[required], input[pattern]').forEach(input => {
  input.addEventListener('blur', function() {
    this.reportValidity();
  });
});

补充说明：

• 如果你不想用浏览器默认的弹窗样式，要自己实现自定义错误提示，可以将reportValidity()替换为checkValidity()，该方法只会返回布尔值表示验证是否通过，你可以根据返回结果自己操作DOM展示错误信息。
• 该改动不会影响原有的提交验证逻辑，表单提交时仍然会照常触发全量验证，二者不会冲突。

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