HTML 表单字段所需的字符集

Question

我创建了一个带有用户名和密码字段的在线论坛。问题是我想对输入添加限制以清除无效的用户名格式。（有效的用户名将以前 3 个字符作为 XYZ 开头）。无论如何我可以设置一个规则，如果用户名的前 3 个字母以 ABC 开头，提交按钮将变灰并显示一条消息，表明该用户名在与服务器检查之前无效？但是，如果用户正确键入所需的开头格式字母，那么将启用提交按钮？

我尝试使用与电子邮件地址中所需的 @ 符号相同的原则编写代码，但结果很奇怪。

Answer 1

最简单的方法是使用 HTML5 pattern attribute:

<style>
:invalid { border-color: red }
</style>
<form>
<label for=uname>Username:</label>
<input id=uname name=uname type=text pattern="XYZ.*">
<p><input type=submit value=Submit>
</form>

该示例使用 CSS 来指示带有红色边框的无效字段，以供说明。

代码接受任何以 XYZ 开头（区分大小写）的字符串，包括字符串 XYZ。根据需要修改。

由于 pattern 属性未得到普遍支持，您可能需要添加 JavaScript 代码来执行类似的检查。其中，使用正则表达式，如在 pattern 属性中，是最简单的方法。

HTML 表单字段所需的字符集

HTML required character set for form fields

html

javascript

web