Svelte中含大括号的input正则验证模式问题求助

Svelte会把模板里的{}解析为插值表达式，导致你的pattern="[A-Za-z]{3}"中的{3}触发语法错误。要保留原生HTML表单验证（满足无障碍要求），可以用以下两种实用方法：

方法1：使用HTML实体转义大括号 #

把正则里的{替换为{，}替换为}，这样Svelte不会解析这些字符，浏览器仍能正确识别正则规则：

<form action="/action">
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]&#123;3&#125;" title="Three letter country code"><br><br>
  <input type="submit">
</form>

方法2：用单引号包裹属性值（推荐） #

将pattern的属性值用单引号包裹，Svelte会把单引号内的内容当作纯字符串处理，不会解析其中的{}：

<form action="/action">
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern='[A-Za-z]{3}' title="Three letter country code"><br><br>
  <input type="submit">
</form>

两种方法都能完整保留原生HTML5表单验证的功能，完全符合无障碍要求，无需依赖额外JavaScript验证逻辑。

内容的提问来源于stack exchange，提问作者Kvetoslav