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

【问题标题】：form with input attributes 'required' and 'pattern' doesn't work具有输入属性“必需”和“模式”的表单不起作用
【发布时间】：2021-01-10 22:59:46
【问题描述】：

您好，我有这段 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>

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

【问题讨论】：

style="display:none;" type="hidden" 将成为您的<form> 的问题。 </a> 没有开始标签是个问题。 ^[A-Za-zèòà\s]$ 作为您的模式意味着仅匹配以您的字符集中的单个字符开头和结尾的字符串。请改用^[A-Za-zèòà\s]+$ 或^[A-Za-zèòà\s]{3,20}$。顺便说一句，这将匹配三个空格，等等。

标签： javascript html css regex

【解决方案1】：

实际上并不了解问题，但您的<a> 标签不完整，并且您通过设置display:none; 隐藏了您的表单

【讨论】：

【解决方案2】：

您的正则表达式模式：

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

是一个单个字符。

如果您希望 从零到任意数量的字符，请使用：

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

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

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

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

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

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

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

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

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

【讨论】：