HTML表单输入验证与pattern属性详解
在网页开发中，表单是用户与系统交互的重要载体，而输入验证是保证提交数据合法性的关键环节。HTML5原生提供了多种表单验证机制，无需依赖JavaScript即可实现基础的数据校验，其中pattern属性是针对文本类输入控件实现自定义正则验证的核心属性。
一、HTML原生表单验证的基础机制
HTML5为表单输入控件新增了多个验证相关的属性和规则，开发者可以直接通过添加属性完成基础校验，常见的原生验证属性包括：
required：标识该输入项为必填项，若用户未填写则提交表单时会触发验证提示。
type：通过设置输入类型（如
email、url、number）自动匹配对应格式校验规则，例如type="email"会自动校验输入内容是否符合邮箱格式。min/max：针对数值或日期类输入，限制输入的最小值和最大值。
minlength/maxlength：限制文本输入的最小长度和最大长度。
若输入内容不符合上述属性设定的规则，浏览器会在表单提交时自动拦截，并弹出对应格式的提示信息，无需开发者额外编写校验逻辑。
二、pattern属性的作用与核心特性
pattern属性是HTML5为文本类输入控件（如<input type="text">、<input type="password">、<textarea>等）提供的自定义正则验证属性，其作用是允许开发者通过正则表达式定义输入内容的匹配规则，只有当用户输入的内容完全匹配pattern设定的正则表达式时，才会判定为验证通过。
该属性的核心特性如下：
仅对文本类型的输入控件生效，对
type="number"、type="date"等非文本类型的输入控件无效。正则表达式不需要添加起始和结束边界符
^和$，浏览器会自动将整个输入内容与正则进行全匹配校验。可以配合
title属性自定义验证失败的提示信息，若未设置title，浏览器会使用默认提示。当输入内容为空时，若同时设置了
required属性，会优先触发必填校验；若未设置required，空内容会直接通过pattern校验。
三、pattern属性的使用示例
以下是几个常见的pattern属性使用场景，展示不同规则的输入校验实现：
1. 校验中国大陆手机号
中国大陆手机号通常为11位，以1开头，第二位为3-9的数字，对应的正则表达式为1[3-9]d{9}，实现代码如下：
<form>
<label for="phone">手机号：</label>
<input
type="text"
id="phone"
name="phone"
required
pattern="1[3-9]d{9}"
title="请输入11位有效的中国大陆手机号"
>
<button type="submit">提交</button>
</form>2. 校验6-18位由字母、数字、下划线组成的用户名
用户名规则为长度6-18位，仅包含字母、数字、下划线，正则表达式为w{6,18}，实现代码如下：
<form>
<label for="username">用户名：</label>
<input
type="text"
id="username"
name="username"
required
pattern="w{6,18}"
title="用户名需为6-18位，仅包含字母、数字、下划线"
>
<button type="submit">提交</button>
</form>3. 校验16进制颜色值
16进制颜色值以#开头，后面跟随3位或6位16进制字符，正则表达式为#([0-9a-fA-F]{3}){1,2}，实现代码如下：
<form>
<label for="color">主题色：</label>
<input
type="text"
id="color"
name="color"
pattern="#([0-9a-fA-F]{3}){1,2}"
title="请输入有效的16进制颜色值，例如#fff或#ff0000"
>
<button type="submit">提交</button>
</form>四、注意事项
使用pattern属性时需要注意以下几点：
正则表达式中若包含特殊字符，需要按照HTML规则进行转义，例如
d在HTML属性中不需要额外转义，但如果正则有&等字符需要转义为&。原生验证仅作为前端基础校验，无法替代后端数据校验，因为用户可以通过修改前端代码绕过验证规则，所有提交到服务端的数据都需要再次进行合法性校验。
不同浏览器对验证提示的样式和文案可能略有差异，若需要统一的提示样式，仍需要配合JavaScript自定义验证逻辑。
提示：若需要查看完整的HTML表单属性规范，可以访问https://www.ipipp.com获取相关文档参考。