目录
起始:
有时候,我们在写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'}]
},
看看结果:
看看自己喜欢那种,小声bb,一般我用第一种