el-form的表单校验，通常情况下，都是在校验第一层对象时使用
例如：
<el-form ref="form" :model="postData" :rules="rules" class="common-form" label-width="118px" size="mini">
<el-row>
<el-col :span="12">
<el-form-item prop="custType" label="客户属性">
<el-radio-group v-model="postData.custType" @change="changeCustomerType">
<el-radio label="客户属性1">客户属性1</el-radio>
<el-radio label="客户属性2">客户属性2</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户名称" class="hintparent" prop="custId">
<el-select
v-model="postData.custId"
placeholder="请选择"
>
<el-option
v-for="item in customers"
:key="item.id"
:label="item.cname"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-row>
</el-form>
数据结构为：
postData: {
custType: '',
custId: '',
},
校验规则为
rules: {
custType: [{ required: true, message: '请选择客户属性', trigger: 'change' }],
custId: [{ required: true, message: '请选择客户名称', trigger: 'change' }]
}
注意到 prop里的名称和属性名和rules里的检验字段名需保持一致。
现有一段数据结构如下：
postData: {
stamp: {
person: null,
tel: null,
reason: null
}
}
当数据嵌套到两层时，校验第二层的数据时，可以这么做
<el-form-item
prop="stamp.concatPerson"
label="联系人"
:rules="{ required: postData.stamp.needPost === 0, message: '请填写联系人', trigger: 'change' }"
>
<el-input v-model="postData.stamp.concatPerson"></el-input>
</el-form-item>
<el-form-item
v-if="postData.stamp.needPost === 0"
prop="stamp.tel"
label="联系电话"
class="hintparent"
:rules="[
{ required: postData.stamp.needPost === 0, message: '请填写联系电话', trigger: 'change' },
{
pattern: /^[\d\-]+$/,
message: '电话格式不正确',
trigger: 'change'
},
{ max: 20, message: '电话格式不正确', trigger: 'change' }
]"
>
<el-input v-model="postData.stamp.tel"></el-input>
</el-form-item>
<el-form-item prop="stamp.reason" label="盖章原因" class="hintparent">
<el-input
v-model="postData.stamp.reason"
maxlength="2000"
show-word-limit
type="textarea"
:autosize="{ minRows: 4 }"
:rules="[
{ required: true, message: '请填写盖章原因', trigger: 'change' },
{ max: 2000, message: '最多只能输入2000个字', trigger: 'change' }
]"
></el-input>
</el-form-item>
此时props传的是去掉最外层之后的嵌套对象，rules写在组件内部，没有拎出来的原因是因为我需要判断required的值，而在data()里获取不到this会报错。
在不需要做我这种判断时，也可以拎出来，写法如下
//第一种方式
stamp: {
reason: [
{ required: true, message: '请填写盖章原因', trigger: 'change' },
{ max: 2000, message: '最多只能输入2000个字', trigger: 'change' }
]
}
//第二种方式
'stamp.reason': [
{ required: true, message: '请填写盖章原因', trigger: 'change' },
{ max: 2000, message: '最多只能输入2000个字', trigger: 'change' }
]
两种方式差不多，第二种比较简洁，第一种在嵌套对象比较多时可读性更高
开发中需要注意的是，需要初始化嵌套层级多的数据的n-1层，不然会报错哦，比如这里就需要初始化：postData.stamp: {}，
如果是postData.stamp.my.reason，就需要初始化到postData.stamp.my: {}文章来源：https://www.toymoban.com/news/detail-700180.html
如果想校验数组内的数据呢
那就只能把校验逻辑写在标签上了文章来源地址https://www.toymoban.com/news/detail-700180.html
<el-form
ref="form"
:model="formData"
class="common-form"
:label-width="$i18n.locale === 'US' ? '200px' : '145px'"
size="mini"
>
<div v-for="(item, index) in formData.arr" :key="index">
<el-form-item
:label="单号"
class="hintparent"
prop="seq"
:rules="{
required: true,
message: '请输入单号',
validator: (rule, value, callback) => validData(rule, item.seq, callback)
}"
>
</el-form-item>
<el-form-item
:label="金额"
class="hintparent"
prop="amount"
:rules="{
required: true,
message: '请输入金额',
validator: (rule, value, callback) => validData(rule, item.amount, callback)
}"
>
</el-form-item>
</div>
</el-form>
<script>
data() {
return {
formData: {
arr: []
}
}
},
methods: {
validData(rule, value, callback) {
if (rule.required && !value) {
callback(new Error(rule.message));
} else {
callback();
}
}
}
</script>
到了这里，关于el-form的rules如何校验多层嵌套对象的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
