关于antd-vue表单新增和编辑的不同校验逻辑

161 阅读1分钟

只说思路, 第一个问题:新增需要做名字重复的校验,编辑也需要,当名字和当前名不一样才触发校验,那就需要定义新变量来把保存当前的名字,跟输入值作比较 第二个问题:useForm校验表单如何定义多个校验规则

 //validatepoolName是自定义的校验函数 
  const addrulesRef = reactive({
    name: [
      {
        validator: validatepoolName,
        trigger: 'change',
        required: true,
      },
    ],
    description: [
      {
        required: true,
        message: '输入描述',
        trigger: 'blur',
      },
    ],
    address: [
      {
        required: true,
        message: '输入地址',
        trigger: 'blur',
      },
    ],
    port: [
      {
        validator: validateport,
        trigger: 'change',
        required: true,
      },
    ],
    poolStatus: [
      {
        required: true,
        message: '选择状态',
        trigger: 'blur',
      },
    ],
    retryNumber: [
      {
        required: true,
        trigger: 'change',
        message: '请输入重试次数',
      },
    ],
  });
  const emitrulesRef = reactive({
    name: [
      {
        validator: validatepoolemitName,
        trigger: 'change',
        required: true,
      },
    ],
    description: [
      {
        required: true,
        message: '输入描述',
        trigger: 'blur',
      },
    ],
    address: [
      {
        required: true,
        message: '输入地址',
        trigger: 'blur',
      },
    ],
    port: [
      {
        validator: validateport,
        trigger: 'change',
        required: true,
      },
    ],
    poolStatus: [
      {
        required: true,
        message: '选择状态',
        trigger: 'blur',
      },
    ],
    retryNumber: [
      {
        required: true,
        trigger: 'change',
        message: '请输入重试次数',
      },
    ],
  });


  //两个表单对象
      poolParmasadd: {
      name: '',
      description: '',
      poolStatus: '',
      address: '',
      port: '',
      retryNumber: '',
    },
    poolParmasemit: {
      name: '',
      id: '',
      description: '',
      poolStatus: '',
      address: '',
      port: '',
      retryNumber: '',
    },
    //定义校验规则方法
    //这是简写而已 正常应该是  const { validate:自定义名字, validateInfos :自定义名字 }
    //poolParmasadd 是要校验的表单对象,addrulesRef是对应的规则
      const { validate, validateInfos } = useForm(poolParmasadd, addrulesRef, {
    onValidate: (...args) => console.log(...args),
  });
        const { validate:validate1, validateInfos:validateInfos1 } = useForm(poolParmasadd, addrulesRef, {
    onValidate: (...args) => console.log(...args),
  });