标准答案
- required、pattern、minlength、maxlength、min、max、step 适合处理简单、确定、和单个字段强相关的规则。
- 比如必填、邮箱格式、字符长度、数字范围、日期范围，浏览器可以在提交前给出基础校验。
- required 表示必填，pattern 用正则约束格式，minlength 和 maxlength 约束长度，min、max、step 约束可比较或可步进的值。
- 原生校验能提升即时反馈和基础可用性，但不能替代业务校验。
- 用户名是否存在、验证码是否正确、库存是否足够这类规则依赖服务端状态，必须保留服务端校验，前端自定义校验只负责更好的交互体验。
题目解析
- 必填规则：required。
- 格式规则：type="email"、type="url"、pattern。
- 长度规则：minlength、maxlength。
- 范围规则：min、max、step。
原生校验的优势是成本低、浏览器内置、能参与无障碍提示和提交拦截。它的弱点是提示文案和复杂交互可控性有限，而且客户端校验可以被绕过。
如果需要自定义错误文案，可以配合 Constraint Validation API，例如 checkValidity、reportValidity、setCustomValidity。
代码示例
基础注册表单可以先用原生属性表达稳定规则，再由业务逻辑补充服务端校验。
HTML
<form>
<label for="username">用户名</label>
<input
id="username"
name="username"
minlength="3"
maxlength="20"
pattern="[a-zA-Z0-9_]+"
required
>
<label for="email">邮箱</label>
<input id="email" name="email" type="email" required>
<button type="submit">注册</button>
</form>常见误区
- 只做原生校验，不做服务端校验。客户端校验可以被绕过。
- pattern 写得过度复杂，导致合法输入被误杀。尤其是邮箱、姓名、地址这类字段不要随便用窄正则。
- 以为 maxlength 能限制所有输入来源。粘贴、脚本赋值和服务端输入仍需要校验。