具有字母和数字范围的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]+。您可以阅读更多here。

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

Answer 2

您可以使用javascript函数（例如输入标签上的onChange事件）轻松解决此问题。 您可以在每个onChange事件中检查最后添加的字符或字母是否符合您的条件。