el-form自定义校验函数如何传递参数

目录

起始：

方法1：利用rule

方法2：利用回调函数

方法3：利用bind

---

起始：

有时候，我们在写el-form自定义规则时候，有很多字段其实用的就是一个规则，只不过规则又不同而已，举个例子如下。

我知道我们可以利用max的属性进行规则的限制，如果不用，需要使用自定义的规则呢？基础代码如下：

<template>
  <el-form class="form" :model="form" :rules="rules" ref="refForm">
    <el-form-item label="测试1" prop="value1">
      <el-input v-model="form.value1"></el-input>
    </el-form-item>
    <el-form-item label="测试2" prop="value2">
      <el-input v-model="form.value2"></el-input>
    </el-form-item>
    <el-form-item label="测试3" prop="value3">
      <el-input v-model="form.value3"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交表单</el-button>
      <el-button type="primary">展示验证结果：{{ result }}</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  name: "index",
  data() {
    return {
      result: null,
      form: {
        value1: '',
        value2: '',
        value3: ''
      },
      rules: {},
    }
  },
  methods: {
    submitForm() {
      this.$refs.refForm.validate(valid => {
        console.log(valid)
        this.result = valid
      })
    }
  }
}
</script>
 
<style scoped>
.form {
  padding: 50px 80px;
}
</style>

使用自定义规则，有人可能会这么写。

    const currencyRule1 = (rule, value, callback) => {
      if (value.length <= 3) callback()
      else callback(new Error('请输入长度小于3的内容'))
    }
    const currencyRule2 = (rule, value, callback) => {
      if (value.length <= 4) callback()
      else callback(new Error('请输入长度小于4的内容'))
    }
    const currencyRule3 = (rule, value, callback) => {
      if (value.length <= 5) callback()
      else callback(new Error('请输入长度小于5的内容'))
    }
 
    rules: {
       value1: [{validator: currencyRule1, trigger: 'blur'}],
       value2: [{validator: currencyRule2, trigger: 'blur'}],
       value3: [{validator: currencyRule3, trigger: 'blur'}],
    },

这么写的确是可行的，但是一旦更多，就架不住了。。。补充一条rule，补充一个自定义校验方法，这个时候就想着，我能不能传递个参数，只写一个自定义校验方法，这样就好了！

方法1：利用rule

    const currencyRule = (rule, value, callback) => {
      console.log(rule)
      const DEFAULT_MAX_LENGTH = 3
      const maxLength = rule.maxLength ?? DEFAULT_MAX_LENGTH
      if (value.length <= maxLength) callback()
      else callback(new Error(`请输入长度小于等于${maxLength}的内容`))
    }
 
    rules: {
       value1: [{maxLength: 3, validator: currencyRule, trigger: 'blur'}],
       value2: [{maxLength: 4, validator: currencyRule, trigger: 'blur'}],
       value3: [{maxLength: 5, validator: currencyRule, trigger: 'blur'}],
    },

看看结果，值得注意的是maxLength是自己自定义的，最好不要与async-validator

的属性值发生命名冲突 

方法2：利用回调函数

    const currencyRule = (rule, value, callback, maxLength) => {
      const DEFAULT_MAX_LENGTH = 3
      maxLength = maxLength ?? DEFAULT_MAX_LENGTH
      console.log(maxLength)
      if (value.length <= maxLength) callback()
      else callback(new Error(`请输入长度小于等于${maxLength}的内容`))
    }
 
rules: {
        value1: [{validator: (e1, e2, e3) => currencyRule(e1, e2, e3), trigger: 'blur'}],
        value2: [{validator: (e1, e2, e3) => currencyRule(e1, e2, e3, 4), trigger: 'blur'}],
        value3: [{validator: (e1, e2, e3) => currencyRule(e1, e2, e3, 5), trigger: 'blur'}]
      },

看看结果：

方法3：利用bind

    const currencyRule = (maxLength, rule, value, callback) => {
      const DEFAULT_MAX_LENGTH = 3
      maxLength = maxLength ?? DEFAULT_MAX_LENGTH
      console.log(maxLength)
      if (value.length <= maxLength) callback()
      else callback(new Error(`请输入长度小于等于${maxLength}的内容`))
    }
 
 rules: {
        value1: [{validator: currencyRule.bind(this, 3), trigger: 'blur'}],
        value2: [{validator: currencyRule.bind(this, 4), trigger: 'blur'}],
        value3: [{validator: currencyRule.bind(this, 5), trigger: 'blur'}]
      },

看看结果：

转载：el-form:自定义校验规则如何传递参数_el-form validator传参_Jay丶萧邦的博客-CSDN博客