el-form-item自定义校验规则传递参数
时间: 2023-11-05 18:42:59 浏览: 145
传递表单参数
你可以使用自定义校验规则时传递参数。在 el-form-item 中的 prop 属性上,可以使用函数的方式来定义校验规则。这个函数会接收两个参数:rule 和 value。
你可以在 rule 中定义一些自定义的属性,然后在校验函数中使用这些属性来传递参数。例如,你可以在 rule 中定义一个属性为 args,然后在校验函数中通过 rule.args 来获取传递的参数。
以下是一个示例代码:
```html
<template>
<el-form :model="form" ref="form" :rules="rules">
<el-form-item label="Age" prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
age: ''
},
rules: {
age: [
{ required: true, message: 'Age is required', trigger: 'blur' },
{ validator: this.validateAge, trigger: 'blur', args: { minAge: 18 } }
]
}
};
},
methods: {
validateAge(rule, value) {
const { minAge } = rule.args;
if (value && value < minAge) {
return Promise.reject(`Age must be greater than ${minAge}`);
} else {
return Promise.resolve();
}
}
}
};
</script>
```
在上面的例子中,我们定义了一个 age 字段,并且设置了两个校验规则。第一个校验规则是必填的,第二个校验规则是自定义的校验规则。在第二个校验规则中,我们传递了一个参数 minAge,然后在校验函数中使用该参数来进行校验。
希望这个例子对你有帮助!如果有任何问题,请随时提问。
阅读全文