具有输入属性“必需”和“模式”的表单不起作用

Question

嗨，我有 HTML5 的代码：

<form id="pay" method="GET" class="row g-3" style="display:none;" type="hidden">
  <strong>Date</strong></a><br>
  <div class="col-md-10">
    <label for="name_users_card" class="form-label">user card</label>
    <input type="text" class="form-control" id="name_users_card"
           pattern="^[A-Za-zèòà\s]$"
           minlength="3"
           maxlength="20"
           placeholder="titolare carta"
           title="take a valid name" required/>
  </div>
</form>

当我尝试运行代码时，所需的控件不起作用。 为什么？

Answer 1

并不真正理解这个问题，但你有一个不完整的<a>标签，你通过设置display:none;

Answer 2

您的正则表达式模式：

^[A-Za-zèòà\s]$

是单个字符。

如果您想要零到任意数量的字符，请使用：

^[A-Za-zèòà\s]*$

如果您想要一个到任意数量的字符，请使用：

^[A-Za-zèòà\s]+$

如果您想要正好 20 个字符，请使用：

^[A-Za-zèòà\s]{20}$

如果您想要三到二十个字符，请使用：

^[A-Za-zèòà\s]{3,20}$