el-form表单校验,已经配置rules,当我们手动删除输入框的值,提示firstParty is required英文提示,配置的明明是中文:请选择合同甲方,为何会有英文提示?让我们一起来看代码~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<el-form  :model="addModel"  :rules="addRule" ref="addForm" label-width="90px" style="padding-right: 0.9375rem;" >
<el-form-item label="合同名称" required prop="contractName">
<el-input v-model="addModel.contractName" size="small"></el-input>
</el-form-item>
<el-form-item label="合同编号" required prop="contractNo">
<el-input v-model="addModel.contractNo" size="small"></el-input>
</el-form-item>
<el-form-item label="合同甲方" required prop="firstParty">
<el-select v-model="addModel.firstParty" placeholder="请选择" size="small" filterable clearable>
<el-option v-for="item in partyList" :label="item.partyName" :key="item.id" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="合同乙方" required prop="secondParty">
<el-select v-model="addModel.secondParty" placeholder="请选择" size="small" filterable clearable>
<el-option v-for="item in partyList" :label="item.partyName" :key="item.id" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-row :gutter="4">
<el-col :span="12">
<el-form-item label="合同类别" required prop="contractType">
<el-select v-model="addModel.contractType" placeholder="请选择" size="small" filterable clearable>
<el-option v-for="item in typeList" :label="item.dictLabel" :key="item.dictValue" :value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="签订时间" required prop="signTime">
<el-date-picker v-model="addModel.signTime" size="small" type="date" placeholder="选择合同签订日期" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="签订地点" prop="signPlace">
<el-input v-model="addModel.signPlace" size="small"></el-input>
</el-form-item>
<el-row :gutter="4">
<el-col :span="12">
<el-form-item label="合同金额" prop="totalMoney">
<el-input-number v-model="addModel.totalMoney" style="width: 14.5rem;"
size="small" :min="0" :precision="2" controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款方式" prop="payWay">
<el-select v-model="addModel.payWay" placeholder="请选择" size="small" filterable clearable>
<el-option v-for="item in payWayList" :label="item.payName" :key="item.id" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="合同描述" prop="remark">
<el-input v-model="addModel.remark" size="small" type="textarea" placeholder="限200字"
maxlength="200" show-word-limit :rows="4"></el-input>
</el-form-item>
<el-form-item label="合同附件">
<el-upload class="upload-demo" multiple :file-list="fileList" :accept="acceptFile" :on-change="fileChangeHandler"
action="#" :auto-upload="false" :on-remove="handleRemove">
<el-button size="small" type="primary" icon="el-icon-upload2" slot="trigger">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg、png、pdf、word、excel等格式的文件</div>
</el-upload>
</el-form-item>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
addRule: {
contractName: [{
required: true,
message: '请输入合同名称',
trigger: 'blur'
}],
contractNo: [{
required: true,
validator: contractNoValidator,
trigger: 'blur'
}, ],
firstParty: [{
required: true,
message: '请选择合同甲方',
trigger: 'blur'
}],
secondParty: [{
required: true,
message: '请选择合同乙方',
trigger: 'blur'
}],
signTime: [{
required: true,
message: '请选择合同签订日期',
trigger: 'blur'
}],
contractType: [{
required: true,
message: '请选择合同类别',
trigger: 'blur'
}],
},

配置校验规则注意点:

  1. el-from-item这个组件标签绑定prop属性,校验规则才能生效(此处prop的值是我们绑定在el-from标签上对象的key);

  2. 观察代码,我们已经在rules配置自定义校验规则,所以要将el-form-item标签内部required去掉(这时再查看页面,发现英文提示已经消失);