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

【问题标题】：HTML input element password pattern with alphabet and number range具有字母和数字范围的 HTML 输入元素密码模式
【发布时间】：2018-10-07 17:20:49
【问题描述】：

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

密码被接受是有条件的

它应该只包含a到h之间的字母（0次或更多）
它只能包含 1 到 8 之间的数字（0 次或更多）

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

但它不应接受 z00911、ksoql234 等模式。

下面代码sn-p中pattern属性的值应该是什么来检查以上两个条件？

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

我希望有人可以提供帮助。谢谢

【问题讨论】：

即使你有输入模式，也可以通过手动更改 DOM 来规避。

标签： javascript html regex forms web

【解决方案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 属性来强制填写密码字段，没有该属性用户可以简单地将密码留空。

【讨论】：

【解决方案2】：

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

【讨论】：