- 自定义校验规则额外参数
indexConfigRules = {
inputNormalStart: [
{ validator: (rule, value, callback, source, options) => {
// source是跟value的值一致的键值对象
}, trigger: 'blur' }
]
}
- 多个输入框校验逻辑一致
/** 指标配置验证规则 */
indexConfigRules = {
inputNormalStart: [
{ validator: (rule, value, callback) => {
this.validateRange(rule, value, callback, 'inputNormalStart', 'inputNormalEnd');
}, trigger: 'blur' }
],
inputNormalEnd: [
{ validator: (rule, value, callback) => {
this.validateRange(rule, value, callback, 'inputNormalStart', 'inputNormalEnd');
}, trigger: 'blur' }
],
inputStandardStart: [
{ validator: (rule, value, callback) => {
this.validateRange(rule, value, callback, 'inputStandardStart', 'inputStandardEnd');
}, trigger: 'blur' }
],
inputStandardEnd: [
{ validator: (rule, value, callback) => {
this.validateRange(rule, value, callback, 'inputStandardStart', 'inputStandardEnd');
}, trigger: 'blur' }
],
periodNormalStart: [
{ validator: (rule, value, callback) => {
this.validateRange(rule, value, callback, 'periodNormalStart', 'periodNormalEnd');
}, trigger: 'blur' }
],
periodNormalEnd: [
{ validator: (rule, value, callback) => {
this.validateRange(rule, value, callback, 'periodNormalStart', 'periodNormalEnd');
}, trigger: 'blur' }
]
}
/**
* @Des {验证数字的有效范围}
*/
validateRange(rule, value, callback, beforeKey, afterKey) {
if (value) {
if (this.indexConfigDialogForm[afterKey]) {
if (parseFloat(this.indexConfigDialogForm[beforeKey]) > parseFloat(this.indexConfigDialogForm[afterKey])) {
callback(new Error('输入范围有误，请检查'));
} else {
callback()
}
} else {
callback()
}
} else {
callback();
}
}
-
ElementUI表单校验prop的嵌套写法
页面中的表单经常会有校验某些字段的需要，常规的写法是prop和表单的字段名一致即可，但是表单的数据格式可能会很复杂，如果 某个字段有多级嵌套，那我们该如何正确的写prop呢，下面的三种情况中，我分别介绍如何设置prop属性才能正确的校验name字段。
-
常规写法
这种情况我们只需要设置prop为name即可
<el-form-item prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> form: { name: '', sex: '', age: '' } -
对象嵌套写法
如果校验的字段是二级属性，那么prop从一级属性user_info开始
<el-form-item prop="user_info.name"> <el-input v-model="form.user_info.name"></el-input> </el-form-item> form: { user_info: { name: '', sex: '', age: '' } } -
数组嵌套写法
如果校验的字段是数据里面的某一项的某个字段，我们需要从user_info开始，然后跟上数组的索引，最后再加上需要校验的字段
<el-form-item v-for="(info, index) in form.user_info" :prop="'user_info.' + index + '.name'" > <el-input v-model="info.name"></el-input> </el-form-item> form: { user_info: [ { name: '', sex: '', age: '' }, { name: '', sex: '', age: '' } ] }
总结：el-form-item上的属性prop字段，必须是其父级组件el-form中绑定model字段中的一个直接子属性。比如某个字段我们可以通过this.form.user_info[0].name获取到，那么我们就需要设置prop为user_info[0].name，这样就可以添加校验规则了，其他嵌套情况也一样。
-
-
添加验证方式
- 方式一
<template v-if="dialogFormData.experimentList && dialogFormData.saveAndSubmitBtnFlag"> <div v-for="(items, outIndex) in dialogFormData.experimentList" :key="items.experimentName"> <el-form-item label="名称：">{{ items.experimentName }}</el-form-item> <el-form-item v-for="(item, innerIndex) in items.experimentItemList" :key="item.id" :label="item.experimentItemName + '：'" :prop="'experimentList.' + outIndex + '.experimentItemList.' + innerIndex + '.experimentItemValue'" :rules="[ { required: true, message: '不能为空', trigger: 'blur' }, { type: item.dataType === 'NUMERICAL_TYPE' ? 'number' : 'string', message: item.dataType === 'NUMERICAL_TYPE' ? '请输入具体数值' : ''}, { validator: (rule, value, callback) => { validateInputLen(rule, value, callback, item.dataType); }, trigger: 'blur' }, ]" > <!-- <el-input v-model="item.experimentItemValue" autocomplete="off"> <template slot="append">{{ item.unit }}</template> </el-input> --> <el-input v-if="item.dataType !== 'NUMERICAL_TYPE'" v-model="item.experimentItemValue" autocomplete="off"> <template slot="append">{{ item.unit }}</template> </el-input> <el-input v-else v-model.number="item.experimentItemValue" autocomplete="off"> <template slot="append">{{ item.unit }}</template> </el-input> </el-form-item> </div> </template>
