正则表达式pattern属性

你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。

多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。

<form action="" method="get">
    <label for="username">姓名:</label>
    <input id="username" name="username" type="text" placeholder="4-10个英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus />
    <button type="submit">提交</button>
</form>

如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。

如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。