HTML原生表单验证

HTML5提供原生表单验证，无需JavaScript即可实现基础验证功能。

required必填验证

基本用法

<input type="text" required>
<textarea required></textarea>
<select required>
  <option value="">请选择</option>
  <option value="1">选项1</option>
</select>

自定义提示

<input type="text" required
       oninvalid="this.setCustomValidity('此项为必填')"
       oninput="this.setCustomValidity('')">

required适用于text、password、email、tel、url、number、date、select、textarea等类型。

pattern正则验证

基本用法

<!-- 手机号 -->
<input type="tel" pattern="^1[3-9]\d{9}$"
       placeholder="请输入11位手机号">

<!-- 邮编 -->
<input type="text" pattern="\d{6}" placeholder="6位邮政编码">

<!-- 用户名：字母开头，3-16位 -->
<input type="text" pattern="^[a-zA-Z][a-zA-Z0-9_]{2,15}$"
       placeholder="字母开头，3-16位">

配合title提示

<input type="text" pattern="\d{6}"
       title="请输入6位数字邮政编码"
       placeholder="邮政编码">

常用正则模式

数值范围验证

min/max属性

<!-- 年龄范围 -->
<input type="number" min="0" max="150" placeholder="年龄">

<!-- 日期范围 -->
<input type="date" min="2024-01-01" max="2024-12-31">

<!-- 文件大小（配合accept） -->
<input type="range" min="0" max="100" value="50">

step步长验证

<!-- 整数 -->
<input type="number" step="1" value="0">

<!-- 小数（0.01精度） -->
<input type="number" step="0.01" min="0" placeholder="金额">

<!-- 时间间隔（15分钟） -->
<input type="time" step="900">

<!-- 日期间隔（周） -->
<input type="date" step="7">

maxlength/minlength长度验证

<!-- 最小长度 -->
<input type="text" minlength="6" placeholder="至少6个字符">

<!-- 最大长度 -->
<input type="text" maxlength="20" placeholder="最多20个字符">

<!-- 范围限制 -->
<input type="password" minlength="8" maxlength="20"
       placeholder="8-20位密码">

验证状态与样式

CSS伪类选择器

/* 验证通过 */
input:valid { border-color: green; }

/* 验证失败 */
input:invalid { border-color: red; }

/* 必填未填写 */
input:required:invalid { border-color: orange; }

/* 可选字段 */
input:optional { border-color: gray; }

JavaScript验证API

const input = document.querySelector('input');

// 检查有效性
input.checkValidity();  // 返回 true/false

// 验证状态对象
input.validity;
// {
//   valid: false,
//   valueMissing: true,    // required未填
//   patternMismatch: true, // pattern不匹配
//   rangeUnderflow: true,  // 小于min
//   rangeOverflow: true,   // 大于max
//   stepMismatch: true,    // step不匹配
//   tooShort: true,        // 小于minlength
//   tooLong: true,         // 大于maxlength
//   typeMismatch: true     // 类型不匹配(email/url等)
// }

// 触发验证提示
input.reportValidity();

// 自定义验证消息
input.setCustomValidity('自定义错误提示');

表单级验证

novalidate跳过验证

<form novalidate>
  <input type="email" required>
  <button type="submit">提交</button>
</form>

formnovalidate按钮跳过

<form>
  <input type="text" required>
  <button type="submit">提交</button>
  <button type="submit" formnovalidate>保存草稿</button>
</form>

禁用默认提示

<form novalidate onsubmit="return validateForm(this)">
  <!-- 使用JavaScript自定义验证 -->
</form>

验证属性速查表

要点总结

• required实现必填验证
• pattern配合正则表达式验证格式
• min/max/step控制数值和日期范围
• CSS伪类(:valid/:invalid)提供验证样式
• checkValidity()检查验证状态
• setCustomValidity()自定义错误提示