input元素上的Pattern属性允许空值？

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>

请记住,您仍需要在服务器端进行验证.