关于正则表达式：HTML5模式验证


HTML5 Pattern Validation

我正在尝试创建具有以下要求的密码字段。

  • 至少8个字符
  • 最多16个字符
  • 必须包含一个数字或特殊字符

  • 只能使用以下特殊字符：

    ，` ~！@#$%^&；*)；'[]"。

我阅读了这个堆栈溢出问题，并试图跟踪示例中发生的事情。这就是我想到的：

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

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

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

然而，这个regex表达式似乎没有按预期工作。如果我输入"密码"，它将被拒绝。相反，接受这个字符串。如果有人能帮我一把，我会非常感激的。

相关讨论

以下是如何使用pattern属性：

1
2
3
4
5
6
input:valid {
  color: green;
}
input:invalid {
  color: red;
}
1
2
3
4
<form name="form1">
 <input pattern="(?=.*[\d,`~!@#$%^&*);'[\]\x22{}.]).{8,16}" title="Please check the input!"/>
 <input type="Submit"/>
</form>

您只需要在字符类中"转义"双引号作为\x22和]符号。

由于默认情况下会锚定pattern，因此不需要锚定。

相关讨论

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

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

可能会有进一步的改进。

下面的代码将根据您的规则检查您的密码(尽管在2个regex中)

1
2
3
4
5
6
7
8
9
10
11
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');
}
相关讨论