regex - HTML简单非空白模式

Question

我有一个简单的表单，我希望提交按钮不适用于我在模式中给出的条件，但如果我将其留空，则提交工作。如果它是空白的，我怎样才能让图案不接受它？

<form action="test.php" method="POST">
Enter user name: 
<input type="text" name="username" pattern="[A-Za-z0-9]{1,20}">
<input type="submit" value="submit">
</form>

我认为 {1,20} 是足够的，但似乎不是。

Answer 1

HTML 具有required完成此任务的属性。如果您将任何输入设置为必需，如果这些字段为空，现代浏览器将不允许您提交表单。

<input type="text" name="username" required="required" pattern="[A-Za-z0-9]{1,20}">

Answer 2

为防止在加载时显示错误，您不能使用 HTML5 required 属性。您可以使用 JavaScript。例如：

if ( $('#form-password').val() === "" ) 
{
    e.preventDefault();
}

使用 HTML 模式匹配至少一个：

<input type="text" name="username" pattern=".{1,}">