The form verification of el-form is usually used when verifying the first layer of objects
For example:
<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="直属客户">直属客户</el-radio>
<el-radio label="代理商">代理商</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>
The data structure is:
postData: {
custType: '',
custId: '',
},
The validation rule is
rules: {
custType: [{
required: true, message: '请选择客户属性', trigger: 'change' }],
custId: [{
required: true, message: '请选择客户名称', trigger: 'change' }]
}
Note that the name and attribute name in prop must be consistent with the inspection field name in rules.
The existing data structure is as follows:
postData: {
stamp: {
person: null,
tel: null,
reason: null
}
}
When the data is nested to two layers, when verifying the data of the second layer, you can do this
<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>
At this time, the props pass the nested object after removing the outermost layer, and the rules are written inside the component. The reason why it is not picked up is because I need to judge the value of required, and if this is not obtained in data(), an error will be reported.
When you don’t need to make my judgment, you can also take it out, written as follows
//第一种方式
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' }
]
The two methods are similar. The second method is more concise. The first method is more readable when there are many nested objects.
It should be noted in the development that the n-1 layer of data with many nesting levels needs to be initialized, otherwise an error will be reported. , for example, it needs to be initialized here: postData.stamp: {},
if it is postData.stamp.my.reason, it needs to be initialized to postData.stamp.my: {}