带有字母和数字范围的 HTML 输入元素密码模式

Question

我知道这可能很简单，但我找不到任何相关的东西。我正在使用 HTML 元素来接受用户的密码。

接受密码的条件是有的

1. 它应该只包含 a 到 h 之间的字母(0 次或更多(

2. 它应该只包含 1 到 8 之间的数字(0 倍或更多(

遵循上述两个条件，用户可以提出任何密码组合。例如：abc123、6ad27、hefb 等，这些应该被输入元素接受。

但它不应该接受像z00911，ksoql234等模式。

以下代码片段中 pattern 属性的值应该是多少，用于检查上述两个条件？

<input type="password" pattern="WHAT-SHOULD-I-PUT-HERE">

我希望有人能帮忙。谢谢

Answer 1

<form action="/blablabla">
<input type="password" pattern="[a-h1-8]+" required="required" title="Wrong password">
<input type="submit">
</form>

在正则表达式中[a-h]表示字符范围，您可以在方括号中定义多个范围：[a-h1-8]。如果要允许模式重复，请在模式后添加*(0 次或多次重复(或+(1 次或多次重复(。您的单个字母模式[a-h1-8]因此至少包含字符的完整模式的密码是[a-h1-8]+。您可以在此处阅读更多内容。

我还添加了required属性来强制填写密码字段，如果没有该属性，用户可以简单地将密码留空。

Answer 2

您可以使用 javascript 函数(例如输入标签上的 onChange 事件(轻松处理此问题。 每个onChange事件，您都可以检查最后添加的字符或字母是否符合您的条件。