Element-ui 中对表单进行验证
Element-ui 中对表单（Form）绑定的对象中的对象属性进行校验
如果是直接绑定属性，是可以的，但是绑定对象中的属性就需要特别处理，需要在rules中添加双引号 " "或者''
<template>
<div class="about">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
// 注意这里
<el-form-item label="活动形式" prop="activity.type">
<el-input v-model="ruleForm.activity.type"></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>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
activity:{
type:""
}
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
// 注意这里
"activity.type": [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', 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>
原文链接：https://blog.csdn.net/ZYS10000/article/details/107179238/
vue使用Element组件时v-for循环里的表单项验证方法
Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。
然鹅问题来了，如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？这个官方文档并没有明确的说法，我们通过查找解决方案和实际验证，总结出来解决方法如下。
首先是循环表单项没有加验证之前的代码：
<template>
<div class="content-body">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row :gutter="10">
<el-col :span="12" :offset="0">
<el-form-item label="套餐名称：" prop="activityName" id="activityName">
<el-input v-model="form.activityName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="状态：">
<el-radio v-model="form.status" label="1">上线</el-radio>
<el-radio v-model="form.status" label="0">下线</el-radio>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="2" style="width:120px;">
<div class="sub-title">梯度设置：</div>
</el-col>
<el-col :span="20">
<el-row :gutter="10" v-for="(item,index) in form.productGroup" :key="index">
<el-col :span="6">
<el-form-item label="商品数量:">
<el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="优惠价格:">
<el-input v-model="item.price" type="number" size="small" style="width:80px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<i class="el-icon-remove-outline" @click="deleteLadder(index)"></i>
<i class="el-icon-circle-plus-outline" @click="addLadder" v-if="index==0"></i>
</el-col>
</el-row>
</el-col>
</el-row>
<el-form-item size="medium" class="div-submit">
<el-button @click="resetForm('form')">取消</el-button>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
/* eslint-disable */
export default {
data() {
return {
form: {
activityName: '',
status: '1',
productGroup: [{num:"",price:""}]
},
rules: {
activityName: [
{ required: true, message: '请输入套餐名称', trigger: 'blur' }
]
}
}
},
methods: {
deleteLadder(index)
{
if(this.form.productGroup.length>1){
this.form.productGroup.splice(index,1);
}
},
addLadder()
{
this.form.productGroup.push({num:"",price:""});
},
submitForm(formName)
{
console.log("activityName...",this.form.activityName);
this.$refs[formName].validate((valid,obj) => {
if (valid) {
this.submitFormAction();
} else {
this.$message.error("验证不通过");
}
});
},
submitFormAction()
{
this.$message.success("提交成功");
},
resetForm(formName)
{
this.$refs[formName].resetFields();
this.form.productGroup = [{num:"",price:""}];
}
}
}
</script>
<style>
.el-form-item {
margin-bottom: 20px;
}
</style>
首先是添加rules规则，这个和正常添加规则一样：
productGroupRules: {
productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}],
productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}]
}
然后给表单项添加验证，以商品数量为例：
<el-form-item label="商品数量:" :prop="'productGroup.'+index+'.num'" :rules="productGroupRules.productGroupNum"> <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input> </el-form-item>
注意这里:rules是每个表单项都要添加，有多个的话用productGroupRules.productGroupNum这样的形式区分，对应上面productGroupRules里的内容。
另外主要就是:prop了，注意正常验证表单项是prop，而这里是:prop。:prop="'productGroup.'+index+'.num'"是拼接的形式，前面是v-for绑定的数组，中间是数组索引index，最后是表单项绑定的v-model的名称，然后用点.把它们连接起来。这三项都必须保证正确，错一个都无法验证。
另外就是要注意，v-for绑定的数组也必须绑定在form对象里，注意上面的data里：
form: {
activityName: '',
status: '1',
productGroup: [{num:"",price:""}]
}
如果是：
form: {
activityName: '',
status: '1'
},
productGroup: [{num:"",price:""}] |
是无法验证的，这一点也要注意。
好了，以上就是解决vue使用Element组件时v-for循环里的表单项验证的解决方案了，希望能帮助到遇到此问题的同学。
