HTML中如何实现表单的客户端验证-html教程-PHP中文网

html5原生表单验证通过required、type、min/max、pattern等属性触发浏览器内置校验，仅在提交或调用checkvalidity()时生效，非实时监听；pattern默认全字符串匹配且需配合title提示，setcustomvalidity()设错后必须手动清空否则永久失效。

html中如何实现表单的客户端验证

HTML5原生表单验证属性怎么用

直接用 required、type、min/max、pattern 这些属性就能触发浏览器内置校验，不用写一行JS。但要注意：它们只在表单提交时（或调用 checkValidity()）才真正生效，不是实时监听。

常见组合示例：

<input type="email" required> —— 浏览器会检查格式，空值+格式错误都会阻断提交
<input type="number" min="1" max="100"> —— 输入非数字、超范围时验证失败
<input pattern="[0-9]{6}" title="请输入6位数字"> —— 正则匹配失败时显示 title 提示

注意：pattern 默认是全字符串匹配（隐式加 ^ 和 $），不需要自己写锚点；title 是必填的提示文案，否则正则失败时可能没文字反馈。

如何阻止默认提交并自定义错误提示

原生验证失败时，表单不会提交，但错误样式和提示位置由浏览器控制，不可控。想统一展示或加动画，得拦截 submit 事件并手动调用 checkValidity()。

关键点：

给 <form></form> 绑定 submit 事件，第一时间 event.preventDefault()
调用 form.checkValidity() 判断整体是否通过（返回布尔值）
逐个检查 input.validity 对象，例如 input.validity.valueMissing、input.validity.patternMismatch 来定位具体问题
不要依赖 :invalid 伪类做 JS 判断——它只反映样式状态，不等价于验证结果

示例逻辑：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

form.addEventListener('submit', e => {
  e.preventDefault();
  if (!form.checkValidity()) {
    // 手动聚焦第一个无效项
    const firstInvalid = form.querySelector(':invalid');
    firstInvalid?.focus();
  }
});

为什么 setCustomValidity() 调用后必须重置

setCustomValidity() 是唯一能添加自定义错误信息的方法，但它有“粘性”：一旦设为非空字符串，该字段就永远验证失败，除非显式调用 setCustomValidity('') 清空。

典型误用场景：

在 input 事件里反复调用 setCustomValidity('密码太短')，却不加条件判断
用户修正后没清空，导致即使输入合法也一直报错
忘记在 blur 或 input 合法时调用 setCustomValidity('')

正确做法是「验证即设置，通过即清空」，例如：

password.addEventListener('input', () => {
  if (password.value.length 

<h3>移动端和旧版浏览器的兼容性陷阱</h3>
<p>Android WebView（尤其4.x）、iOS Safari pattern、<code>step</code>、<code>validity.customError</code> 支持不一致；IE 完全不支持 <code>setCustomValidity</code> 和大部分 <code>validity</code> 属性。</p>
<p>如果需兼容老环境：</p>