如何为Shopify Dawn主题注册表单添加姓名字母验证？

操作步骤： #

• 进入Shopify后台打开代码编辑器，找到并编辑templates/customers/register.liquid文件
• 定位到姓名相关的输入框（通常是first_name和last_name对应的<input>标签）
• 给这些输入框添加pattern属性和title属性，用正则表达式限制输入内容

示例代码修改： #

原来的姓名输入框可能长这样：

<input
  type="text"
  name="customer[first_name]"
  id="FirstName"
  class="field__input"
  value="{{ form.first_name }}"
  {% if form.errors contains 'first_name' %}aria-invalid="true" aria-describedby="FirstName-error"{% endif %}
  placeholder="{{ 'customer.register.first_name' | t }}"
>

修改后（添加pattern和title）：

<input
  type="text"
  name="customer[first_name]"
  id="FirstName"
  class="field__input"
  value="{{ form.first_name }}"
  {% if form.errors contains 'first_name' %}aria-invalid="true" aria-describedby="FirstName-error"{% endif %}
  placeholder="{{ 'customer.register.first_name' | t }}"
  pattern="^[A-Za-z\s]+$"
  title="姓名只能包含字母和空格，不能有数字或符号"
>

正则说明： #

• ^[A-Za-z\s]+$：允许大小写字母和空格（适合带空格的姓名，比如"John Doe"）
• 如果不需要允许空格，改成^[A-Za-z]+$即可

方法优势： #

HTML5的pattern属性会在用户提交表单时自动触发验证，浏览器会弹出你在title里设置的提示文本，不需要额外编写JavaScript，对刚接触Liquid的新手非常友好。

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