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

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>

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