regex - 输入元素上的模式属性允许空值？

Question

我要求用户给我一个昵称，昵称最少3个字符，最多30个字符，只能包含字母和数字。

<form>
    Nick: <input type="text" name="nick" pattern="[A-Za-z0-9]{3,30}">
    <input type="submit" value="Join lobby">
</form>

我遇到的问题是接受空表单。
正如预期的那样，长度为 1、2 或 31+ 或包含标点符号的字符串不会通过。但是，如果他们只是不将任何东西放入盒子中，它就会被接受。

我该如何解决这个问题？

Answer 1

添加required 属性。

<input type="text" required name="nick" pattern="[A-Za-z0-9]{3,30}" required>

请记住，您仍然需要在服务器端进行验证。