Vue中的el-form的自定义校验方法

Question

问题描述

想在校验时校验两个不同属性名的值是否相等,只靠自定义方法中的value参数不够,于是就用rule参数.
为什么自定义校验方法不能操作rule,只能console.log(rule)显示一下,其他对rule的操作一运行校验就失效..

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）

  export function validateScEqualEc(rule, value, callback) {
        console.log(rule)
        const r = JSON.stringify(rule)
        console.log(r)
        console.log(rule.field)
        const a = r.field.split('.')
        console.log(a)
        // 根据value操作
        if (!value) {
          return callback(new Error('不能为空'))
        } else {
          return callback(new Error('就要报错'))
         }
     }

你期待的结果是什么？实际看到的错误信息又是什么？

能够操作rule参数

Answer 1

data() {
const validateF= (rule, value, callback) => {
  console.log(rule)
  // let r = JSON.stringify(rule)
  // console.log(r)
  const r = rule
  console.log(r[Object.keys(r)[1]])
  // console.log(r['field'])
  const a = r.field.split('.')
  console.log(a)
  // dataForm中的一级属性名
  const name1 = r.field.split('.')[0]
  // dataForm中的二级属性名
  let name2 = r.field.split('.')[1]
  // dataForm中的三级属性名
  const name3 = r.field.split('.')[2]
  console.log('name1：' + name1 + ' name2:' + name2 + ' name3:' + name3)
  if (name2.includes('first')) {
    name2 = 'second' + name2.substring(5)
  } else if (name2.includes('second')) {
    name2 = 'first' + name2.substring(6)
  }
  console.log('name2:' + name2)

  if (value === this.dataForm[name1][name2][name3]) {
    return callback()
  } else {
    return callback(new Error())
  }
}

自定义校验方法如果涉及到操作页面内的其他数据,要写在data()下;rule参数不能直接操作,绑定校验要写在<el-from-item>中