使用多个模式来验证html5输入

Question

我要求用户在表单输入中输入有效的文件夹名称。

要求：

1. 最少3个字符。

   图案=＆＃34; {3，}＆＃34;

2. 有效的文件夹名称。

   图案=＃＆34; ^ [\瓦特.-] + $＆＃34;

如何针对这两种模式验证输入？

Answer 1

您可以使用

<div class="label-list">
  <div class="label-item">
    <h1>140</h1>
    <small>Calories</small>
  </div>
  <div class="label-item">
    <h1 class="smaller">1<small>g</small></h1>
    <small>Sat Fat</small>
    <span>5% DV</span>
  </div>
</div>

默认情况下，HTML5 pattern attribute中不需要任何锚点。

  

用于此属性的正则表达式语言与JavaScript中使用的正则表达式语言相同，只是模式属性与整个值匹配，而不仅仅是任何子集（有点像它暗示pattern="[\w.-]{3,}" 在模式的开始和结尾的^(?:。

)$模式匹配3个或更多（[\w.-]{3,}）个字符，这些字符是ASCII字母/数字/下划线，点或连字符。