先以官方的demo举例
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
return {
ruleForm: {
pass: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
普通对象属性
其实普通对象属性就是除数组外的数据结构，可以使用数组，对象或是validator函数来进行校验，此时校验的原理是通过prop获取到el-form标签绑定对应的哪一项item，再检验值是否为空（null，''，undefined），如果为空状态则报错，这是最简单理解的第一种情况
data() {
return {
pass: [
{ validator: validatePass, trigger: "blur" } // 可以自定义校验规则的方式
],
check: [{ require: true, message: "请填写*****", trigger: "blur"}] // 简单校验方式
}
}
数组对象属性
上面提到rules的校验规则是判断值是否为空，那数组是不为空的，因为!![] === true，因此有两种方式可以实现数组的校验
第一种方式
第一种方式适用于数组中每一项有特定的条件进行判断，如数组中某一项值不能重复的场景，可以把rules规则放在数组父级的el-form-item标签中，再在对应的validator里通过value的值做一系列的判断。
var validatePass = (rule, value, callback) => {
if (Array.isArray(val) {
callback(new Error('数据异常'));
} else {
value.map(item=>{
// do sth.
})
}
};
第二种方式
第二种方式适用于把数组项当做一个小的form表单，即无法和数组中的其他项发生联动（实际上是可以的，但是写法很反人类，不推荐这样写），但是校验会轻巧一点。
简单展示一下示例代码，我这里是把他抽象成一个组件了
<template>
<div>
<el-row v-for="(form, index) in value" :key="index">
<el-col :span="10" style="padding-right: 10px;">
<el-form-item :prop="prop+`[${index}].key`" :rules="rules.key">
<el-select v-model="form.key" placeholder="请选择条件" clearable>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" style="padding-right: 10px;">
<el-form-item prop="condition">
<el-select v-model="form.condition" placeholder="请选择条件" clearable>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" style="padding-right: 10px;">
<el-form-item :prop="prop+`[${index}].value`" :rules="rules.value">
<el-input v-model="form.value" placeholder="请选择条件" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="2" :offset="0" class="btn-opt">
<i v-if="index ===0" class="c-p el-icon-circle-plus" style="color: #409eff" @click="addItem()"></i>
<i v-else class="c-p el-icon-remove" style="color: #f56c6c" @click="delItem(index)"></i>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'InputItem',
props: {
value: {
type: Array,
require: true,
default() {
return [{
key: '',
condition: '',
value: '',
}]
},
},
prop: {
type: String,
require: true,
default: '',
},
},
data() {
return {
rules: {
key: [{ required: true, message: '请输入调整后价格', trigger: 'change' }],
condition: [{ required: true, message: '请输入调整后价格', trigger: 'change' }],
value: [{ required: true, message: '请输入调整后价格', trigger: 'blur' }],
},
}
},
methods: {
addItem(val) {
this.$emit('input', [...this.value, Object.assign({
key: '',
condition: '',
value: '',
}, val)])
},
delItem(index, howmany = 1) {
const ary = this.value
ary.splice(index, howmany)
this.$emit('input', ary)
},
},
}
</script>
<style lang="scss" scoped>
.btn-opt {
display: flex;
justify-content: center;
align-items: center;
height: 32px;
font-size: 24px;
}
</style>
然后在实际表单中这样使用
最终效果：
深结构校验
如果理解了上面的第二种校验方式，就不难理解深结构校验了。
实际上form表单的校验规则是根据没个el-form-item标签内的prop属性，由字符串转化成对象属性，再找到form表单绑定的v-mode的值进行判断，那么深结构的普通校验可以沿用上面第二种方式，但是绑定的prop就再增加一层关系就可以了。
网友评论