html - Html5 输入模式检查

Question

我不擅长 html 模式验证。

我有这个问题，我的输入文本仅有效：最少 3 个最多 30 个字符，字符串开头和结尾的空格是不允许的，允许一个单词和另一个单词之间有空格，允许 A-Za- z，单词的第一个字符必须是大写，其他单词必须是小写。谢谢。

--更新--输入#名称

有效示例：

• '马里奥乔瓦尼'
• '玛丽亚'
• '雅各布卡罗尔皮奥'
• '雅各布·K'

无效示例：

• '马里奥乔瓦尼'
• '马里奥乔瓦尼'
• '马里奥乔瓦尼'
• '马里奥乔瓦尼'
• “玛丽亚”
• '玛丽亚'
• 《安东尼奥·马里奥》

标签： htmlregex

Answer 1

您将需要使用正则表达式模式来检查输入是否有效，以及使用maxlengthandminlength属性来确保输入在 3 到 30 个字符之间。

关于 RegEx 模式，我们必须：

• 从输入的开头开始：^
• 验证第一个字符是否在 A 和 Z 之间：[A-Z]
• 验证最后一个字符之前的以下字符是否为小写字母或空格：[a-z ]*，其中*表示可能有多个字符与该部分模式匹配；如果您只想在单词之间留一个空格，请使用([a-z]* ?)
• 验证最后一个字符是否为小写字母：[a-z]$，其中$表示输入结束

下面是我将使用的代码。

<input type="text" minlength=3 maxlength=30 pattern="^[A-Z][a-z ]*[a-z]$">