如何在Vue Formulate中实现两个字段的联合自定义验证？

关键要点 #

• 必须给表单字段设置name属性，才能在验证函数中获取对应字段的值
• 自定义验证函数可访问整个表单状态，实现跨字段校验
• 验证函数返回true表示校验通过，返回字符串则为错误提示文本

完整实现代码 #

<template>
  <FormulateForm 
    @submit="onSubmit" 
    #default="{ hasErrors }"
    :validation-rules="{ atLeastOneField }"
  >
    <FormulateInput
      type="text"
      label="Field1"
      name="field1"
      validation="atLeastOneField"
      validation-name="Field1"
    />

    <FormulateInput
      type="text"
      label="Field2"
      name="field2"
      validation="atLeastOneField"
      validation-name="Field2"
    />

    <FormulateInput
      type="submit"
      label="Submit"
      input-class="btn btn-primary w-full"
      :disabled="hasErrors"
    />
  </FormulateForm>
</template>

<script>
export default {
  methods: {
    onSubmit(values) {
      // 处理表单提交逻辑
      console.log('提交的表单值:', values);
    },
    atLeastOneField(value, state) {
      // 获取两个字段的值并去除首尾空格
      const field1 = (state.values.field1 || '').trim();
      const field2 = (state.values.field2 || '').trim();
      
      // 只要其中一个字段有值，校验通过
      if (field1 || field2) {
        return true;
      }
      
      // 校验不通过时返回错误提示
      return 'Field1和Field2至少需要填写一个';
    }
  }
}
</script>

代码说明 #

1. 注册自定义验证规则：通过表单的validation-rules属性，将自定义的atLeastOneField函数注册为可用的验证规则
2. 字段命名：给两个输入框添加name="field1"和name="field2"，确保能从state.values中获取对应字段的值
3. 验证逻辑：在atLeastOneField函数中，检查两个字段是否至少有一个非空（去除空格后），满足条件返回true，否则返回错误提示文本
4. 错误状态联动：利用表单的hasErrors状态控制提交按钮的禁用，只要有字段校验不通过，按钮就会处于禁用状态

额外优化：精准字段错误提示（可选） #

如果需要给每个字段显示更针对性的提示，可以修改验证函数：

atLeastOneField(value, state, context) {
  const field1 = (state.values.field1 || '').trim();
  const field2 = (state.values.field2 || '').trim();
  
  if (field1 || field2) {
    return true;
  }
  
  // 根据当前字段返回对应提示
  return context.name === 'field1' 
    ? '请填写Field1，或填写Field2' 
    : '请填写Field2，或填写Field1';
}

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