el-form: How to pass parameters in custom validation rules

Table of contents

start:

Method 1: Use rule

Method 2: Use callback function

Method 3: Use bind

---

start:

Sometimes, when we write el-form custom rules, there are many fields that are actually a rule, but the rules are different. An example is as follows.

I know that we can use the max attribute to limit the rules. If not, need to use custom rules? The basic code is as follows:

<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>

With a custom rule, someone might write it like this.

    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'}],
    },

It is indeed feasible to write in this way, but once there are more, it will be unstoppable. . . Add a rule and add a custom verification method. At this time, I thought, can I pass a parameter and just write a custom verification method, and that will be fine!

Method 1: Use 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'}],
    },

Looking at the results, it is worth noting that maxLength is self-defined, it is best not to use async-validator

A naming conflict occurred in the attribute value for 

Method 2: Use callback function

    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'}]
      },

Take a look at the results:

Method 3: Use 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'}]
      },

Take a look at the results:

 See which one you like, whisper bb, usually I use the first one