WhatsApp Flow中TextInput格式验证遇阻：pattern属性不允许如何解决？

你遇到的问题是WhatsApp Flow的TextInput组件本身不支持pattern属性，直接添加会触发非法属性报错，可通过以下两种方式实现格式验证：

一、Flow前端验证（结合Action组件） #

利用WhatsApp Flow的表达式和Action逻辑，在用户输入后实时或提交前完成格式校验：

1. 保留原TextInput配置，移除无效的pattern属性：

{
   "type": "TextInput",
   "required": true,
   "label": "National ID Number",
   "name": "national_id",
   "input-type": "text",
   "min-chars": 14,
   "max-chars":15,
   "helper-text": "eg. 70-123456-C-78"
}

2. 添加验证逻辑：
   在表单提交按钮的on-press事件中，使用validate类型的Action触发校验：

   {
     "type": "Action",
     "name": "validate_national_id",
     "action-type": "validate",
     "expression": "{{matches(national_id, '^(?i)\\d{2}-\\d{5,7}-[A-Za-z]-\\d{2}$')}}",
     "error-message": "请输入正确格式的身份证号，例如：70-123456-C-78"
   }
   

   若验证不通过，Flow会自动展示error-message中的提示内容，并阻止表单提交。你也可以将验证逻辑整合到步骤跳转条件中，仅当输入匹配正则时才允许进入下一步。

二、后端二次验证（必须执行） #

前端验证仅用于优化用户体验，无法完全拦截非法输入。因此在后端接收表单数据时，务必用相同的正则表达式再次校验：

以Node.js为例，后端验证代码示例：

const nationalIdRegex = /^(?i)\d{2}-\d{5,7}-[A-Za-z]-\d{2}$/;
const nationalId = req.body.national_id;

if (!nationalIdRegex.test(nationalId)) {
  return res.status(400).json({
    error: "Invalid National ID format",
    message: "请输入正确格式的身份证号，例如：70-123456-C-78"
  });
}

验证不通过时，返回错误信息给Flow，Flow可通过Error组件将提示展示给用户。

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