如何使用Bouncer验证实现textarea字段的表单邮箱校验

Bouncer 默认仅将 <input>、<select> 标签纳入校验目标范围，且依赖元素的 type 属性匹配校验规则，而 <textarea> 既不在默认校验列表里，也不支持原生 type 属性，因此无法触发默认校验逻辑，可按以下步骤修复：

• 第一步：初始化 Bouncer 时显式将 textarea 加入校验目标字段
  在 Bouncer 初始化配置中新增 fields 配置项，覆盖默认的字段选择规则：

const bouncer = new Bouncer('form', {
  // 追加textarea到校验目标列表
  fields: 'input, select, textarea',
  // 其余原有配置保持不变
})

• 第二步：给目标 textarea 标记校验规则
  由于 <textarea> 不支持 type="email" 原生属性，改用 Bouncer 支持的 data-* 属性声明校验规则：

<!-- 单个邮箱校验场景 -->
<textarea name="email" required data-type="email" placeholder="请输入邮箱地址"></textarea>

• 第三步（可选）：自定义多行多邮箱校验规则
  如果使用 textarea 是为了支持输入多个邮箱，可新增自定义校验规则，适配换行/逗号分隔的多邮箱场景：

const bouncer = new Bouncer('form', {
  fields: 'input, select, textarea',
  customValidations: {
    multipleEmails: function (field) {
      // 仅对标记了data-multiple-emails属性的字段生效
      if (!field.hasAttribute('data-multiple-emails')) return true
      // 按换行/逗号拆分邮箱并去空
      const emailList = field.value.trim().split(/[\n,]/).map(item => item.trim()).filter(Boolean)
      const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
      // 校验所有邮箱是否合法
      const isValid = emailList.every(email => emailReg.test(email))
      return isValid ? false : '存在不合法的邮箱地址，多个邮箱请用换行或逗号分隔'
    }
  }
})

对应textarea的标记方式：

<textarea name="emails" required data-multiple-emails placeholder="请输入邮箱地址，多个用换行或逗号分隔"></textarea>

完成以上配置后，Bouncer 就会对 textarea 执行和 input 一致的校验逻辑，表单提交时也会正常触发校验拦截。

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