HTML5 模式验证答案

【问题标题】：HTML5 Pattern ValidationHTML5 模式验证
【发布时间】：2016-05-18 21:12:22
【问题描述】：

我正在尝试创建一个符合以下要求的密码字段。

最少 8 个字符
最多 16 个字符
必须包含一个数字或特殊字符
只能使用以下特殊字符：

, ` ~ ! @#$%^&*); ' [ ] "{ } .

我阅读了this Stack Overflow question 并尝试了解示例中发生的情况。这是我想出的：

^[a-zA-Z](?=.*[0-9.,`~!@#$%^&*\);'\[\]\"\{\}.]).{8,16}+

这就是我使用模式的方式：

<input id="Password" class="form-control" pattern="^[a-zA-Z](?=.*[0-9.,`~!@#$%^&amp;*\);'\[\]\&quot;\{\}.]).{8,16}+" required="required" type="password">

然而，这个正则表达式似乎没有按预期工作。如果我输入“密码”作为我的输入，它应该被拒绝。相反，该字符串被接受。如果有人能帮我解决这个问题，我将不胜感激。

【问题讨论】：

是否有创建密码字段并使用正则表达式的代码？
为什么你的正则表达式开头有[a-zA-Z]？您不要求字符串应以 ASCII 字母开头。
密码字段只是表单中的一个输入字段。我刚刚在我的原始帖子中包含了一个示例。
“我正在尝试创建一个符合以下要求的密码字段” - 请不要。没有什么比不得不偏离我通常创建密码的“方案”更烦人的了，只是因为某些网站认为它更了解什么是“安全性”……

标签： regex html validation

【解决方案1】：

以下是使用pattern 属性的方法：

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input pattern="(?=.*[\d,`~!@#$%^&*);'[\]\x22{}.]).{8,16}" title="Please check the input!"/>
 <input type="Submit"/> 
</form>

您只需要将双引号“转义”为\x22 和字符类中的] 符号。

不需要锚点，因为 pattern 默认是锚点的。

【讨论】：

请注意，{8,16}+ 是一个占有限制量词，在 JS 正则表达式中不受支持，+ 将被忽略。 & 可以用作文字。单个撇号也是如此。双引号需要“标准化”为\x22。并且这里不需要^ 和$，该模式稍后用^(?: 和) 括起来。

【解决方案2】：

以下代码将根据您的规则检查您的密码（尽管在 2 个正则表达式中）

var psw = 'yourPas$word';
if (
    // ensure the length is between 8 & 16
    /^.{8,16}$/.test(psw) && 
    // ensure the presence of a special char
    /^.*[,`~!@#$%^&*);'\[\]"{}.].*$/.test(psw)
    ) {
    console.log('hurray is valid');
} else {
    console.log('booo');
}

【讨论】：

感谢马蒂亚斯的回复！是否可以在一行中将其作为输入模式执行？例如：<input id="Password" class="form-control" pattern="^[a-zA-Z](?=.*[0-9.,`~!@#$%^&amp;*\);'\[\]\&quot;\{\}.]).{8,16}+" required="required" type="password">

【解决方案3】：

在模式中使用此正则表达式以确保密码同时包含字母和数字/符号：

^(?=.*[a-z])(?=.*[\d,`~!@#$%^&*);'[\]\x22{}]).{8,16}$

可能的进一步改进。

【讨论】：