JavaScript 中怎么使用 HTML5 表单约束验证属性处理报错-js教程-PHP中文网

html5表单约束验证需监听invalid事件、用setcustomvalidity自定义提示、submit时拦截并高亮首个无效字段，结合:invalid/:user-invalid伪类优化样式。

javascript 中怎么使用 html5 表单约束验证属性处理报错

HTML5 表单约束验证（如 required、minlength、pattern、type="email" 等）会自动触发浏览器原生校验，但默认报错提示样式简陋、时机固定（提交时）、难以定制。要“处理报错”，关键不是禁用它，而是监听验证状态、干预提示方式、补充逻辑控制。

监听验证状态与手动触发检查

表单元素（<input>、<textarea></textarea>、<select></select>）有内置的 checkValidity() 和 reportValidity() 方法：

element.checkValidity()：只返回布尔值（是否通过验证），不显示提示
element.reportValidity()：执行验证并显示原生气泡提示（等同于用户点击提交但字段无效）

可结合 invalid 事件监听实时报错：

document.getElementById('name').addEventListener('invalid', function(e) {
  e.preventDefault(); // 阻止默认气泡（可选）
  console.log('验证失败：', e.target.validationMessage); // 获取默认错误文案
});

读取和自定义错误信息

每个表单控件都有 validationMessage 属性，返回当前验证失败时的默认提示文本；也可通过 setCustomValidity(message) 覆盖它：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

设为空字符串 setCustomValidity('') 表示“通过验证”
设为非空字符串则标记为“不通过”，且该字符串成为 validationMessage 值

常用于动态规则（如两次输入密码不一致）：

const pwd1 = document.getElementById('pwd1');
const pwd2 = document.getElementById('pwd2');
pwd2.addEventListener('input', () => {
  if (pwd2.value !== pwd1.value) {
    pwd2.setCustomValidity('两次输入的密码不一致');
  } else {
    pwd2.setCustomValidity(''); // 清除错误
  }
});

在提交前统一拦截与反馈

表单的 submit 事件可在原生验证之后、页面跳转之前执行。此时可判断整体有效性，并替换默认行为：

调用 event.preventDefault() 阻止提交
用 form.checkValidity() 判断是否全部通过

遍历所有字段，收集错误并展示在页面上（如红边框 + 自定义提示区）

document.querySelector('form').addEventListener('submit', function(e) {
  if (!this.checkValidity()) {
    e.preventDefault();
    // 高亮第一个无效字段
    const firstInvalid = this.querySelector(':invalid');
    if (firstInvalid) firstInvalid.focus();
    // 可在此处显示全局提示栏或逐个添加错误提示
  }
});