elementplus表单校验rules el-cascader
时间: 2023-11-07 20:02:29 浏览: 39
elementplus表单校验的rules中,可以使用自定义方式去校验el-cascader组件是否有值,而不用required属性。例如,可以通过在rules中定义一个validator函数来实现校验。在函数中,可以使用v-model获取el-cascader选择的值,然后进行判断是否有值,如果没有值则返回错误信息,否则返回true。这样可以对el-cascader进行必填验证。
相关问题
elementplus表单校验 el-date-picker
关于elementplus表单校验el-date-picker,通过您引用的内容可以看出,对于el-date-picker的表单校验可以通过给rules对象设置校验规则来实现。在rules中设置相应的校验规则,如required属性,可以确保在提交表单时进行日期的选择校验。此外,可以通过设置trigger属性来触发校验的时机,比如设置为blur,则表示在失去焦点时进行校验。另外,您还可以使用深拷贝和浅拷贝来进行el-date-picker的数据回显到控件。通过使用JSON.parse(JSON.stringify(row))来进行深拷贝,然后使用this.$set方法给对象赋值,即可实现数据回显。
el-cascader 表单校验
el-cascader 表单校验可以使用 async-validator 进行校验。如果在 el-cascader 级联选择器中选择了值,但是校验仍然失败,可以按照以下解决方案进行排查:
1. 检查验证规则对象的 type 属性是否是 'array'(不可大写)。
2. 检查 el-form 标签中的 :model="form" 是否是 el-cascader 组件 v-model 绑定的对象相同。
3. 检查 el-form-item 标签 prop 属性绑定的值是否是 el-cascader 组件 v-model 绑定的 key 相同。
以下是一个 el-cascader 表单校验的示例代码:
```html
<template>
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="地区" prop="region">
<el-cascader v-model="form.region" :options="options"></el-cascader>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { mapState } from 'vuex';
import { validateRegion } from '@/utils/validators';
export default {
data() {
return {
form: {
region: [],
},
rules: {
region: [
{ required: true, message: '请选择地区', trigger: 'change' },
{ validator: validateRegion, trigger: 'change' },
],
},
options: [
{
value: 'beijing',
label: '北京',
children: [
{
value: 'dongcheng',
label: '东城区',
},
{
value: 'xicheng',
label: '西城区',
},
],
},
{
value: 'shanghai',
label: '上海', children: [
{
value: 'pudong',
label: '浦东新区',
},
{
value: 'minhang',
label: '闵行区',
},
],
},
],
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message.success('校验成功');
} else {
this.$message.error('校验失败');
}
});
},
},
};
</script>
```