el-form表单校验，已经配置rules，当我们手动删除输入框的值，提示firstParty is required英文提示，配置的明明是中文：请选择合同甲方，为何会有英文提示？让我们一起来看代码~
<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>
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'
}],
}
配置校验规则注意点：
-
el-from-item这个组件标签绑定prop属性，校验规则才能生效（此处prop的值是我们绑定在el-from标签上对象的key）；
-
观察代码，我们已经在rules配置自定义校验规则，所以要将el-form-item标签内部required去掉（这时再查看页面，发现英文提示已经消失）；
