如何在HTML输入框中使用pattern属性验证符合要求的密码？

你可以通过结合pattern属性与正则表达式，再配合minlength、title等属性来实现这个需求。以下是完整的实现代码：

<label for="password">设置密码：</label>
<input 
  type="password" 
  id="password" 
  name="password"
  required
  minlength="8"
  pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$"
  title="密码必须至少包含8个字符，且包含至少一个大写字母、一个小写字母和一个数字"
>

正则表达式拆解说明 #

这个正则^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$各部分作用如下：

• ^：匹配密码字符串的起始位置
• (?=.*[a-z])：正向预查，确保字符串中存在至少一个小写英文字母
• (?=.*[A-Z])：正向预查，确保字符串中存在至少一个大写英文字母
• (?=.*\d)：正向预查，确保字符串中存在至少一个数字（\d等价于[0-9]）
• .{8,}：匹配任意非换行字符，且长度至少为8位
• $：匹配密码字符串的结束位置

额外属性说明 #

• minlength="8"：和pattern中的长度规则形成双重校验，浏览器会直接对输入长度做初步判断，提前给出提示
• title：当用户输入不符合规则时，浏览器会弹出这个属性里的提示文本，明确告知用户密码要求
• required：确保输入框不能为空，避免空值提交

内容的提问来源于stack exchange，提问作者Noah Zemljic