Element UI 表单动态for循环验证
提示:以下是本篇文章正文内容,下面案例可供参考
一、普通的表单验证
1.表单验证的目的是在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。
2.Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
3.通过给表单绑定ref属性,在保存方法中配合validate回调函数,即可在表单提交时触发回调函数,继而弹出消息提醒用户。
二、动态for循环表单验证
代码示例:
<template>
<div style="width:100%;height:100%;" id="ManualAddId">
<div class="el-table el-table--fit el-table--border el-table--enable-row-transition">
<el-form style="width: 100%;" size="medium" :model="formInfo" ref="form" :rules="rules">
<div v-for="(item,index) in formInfo.processData" :key="index">
<table class="el-table__header" id="perCrudID" style="width: 100%;" cellspacing="0" cellpadding="0"
border="0">
<tr class="el-table__row">
<td class="col-th">
<div class="cell">设备序列号</div>
</td>
<td colspan="2">
<el-form-item :prop="'processData.'+index+'.devNum'" :rules="rules.devNum">
<el-input placeholder="请输入设备序列号" class="addinput" v-model="item.devNum">
</el-input>
</el-form-item>
</td>
<td class="col-th">
<div class="cell">设备位置</div>
</td>
<td colspan="2">
<el-form-item :prop="'processData.'+index+'.location'" :rules="rules.location">
<el-input placeholder="请输入设备序列号" class="addinput" v-model="item.location">
</el-input>
</el-form-item>
</td>
<td class="col-th">
<div class="cell">设备名称</div>
</td>
<td colspan="2">
<el-form-item :prop="'processData.'+index+'.name'" :rules="rules.name">
<el-input placeholder="请输入设备序列号" class="addinput" v-model="item.name">
</el-input>
</el-form-item>
</td>
<td>
<div class="cell">
<el-button size="mini" type="danger" @click="deleteMethod(index)">删除</el-button>
</div>
</td>
</tr>
</table>
</div>
</el-form>
</div>
<div class="butClass">
<el-button size="medium" type="primary" @click="addMethod">增加循环数组</el-button>
<el-button size="medium" type="primary" @click="submitForm('form')">保存</el-button>
<el-button size="medium" type="plain" @click="cancelMethod">取消</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
var checkdevNum = (rule, value, callback) => {
if (!value) {
return callback(new Error('设备序列号不能为空!'));
} else {
if (value.length > 30) {
callback(new Error('输入内容长度不能大于30个字符!'));
} else {
callback();
}
}
};
var checkdevType = (rule, value, callback) => {
if (!value) {
return callback(new Error('设备位置不能为空!'));
} else {
if (value.length > 30) {
callback(new Error('输入内容长度不能大于30个字符!'));
} else {
callback();
}
}
};
var checkdevLocation = (rule, value, callback) => {
if (!value) {
return callback(new Error('设备名称不能为空!'));
} else {
if (value.length > 30) {
callback(new Error('输入内容长度不能大于30个字符!'));
} else {
callback();
}
}
};
return {
rules: {
devNum: [{
validator: checkdevNum,
trigger: 'blur'
}],
location: [{
validator: checkdevType,
trigger: 'change'
}],
name: [{
validator: checkdevLocation,
trigger: 'change'
}],
},
formInfo: {
processData: [{
devNum: '',
location: '',
name: '',
}],
}
}
},
mounted() {
},
methods: {
addMethod() {
this.formInfo.processData.push({
devNum: '',
location: '',
name: '',
})
},
deleteMethod(index) {
this.$confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.formInfo.processData.splice(index, 1)
}).catch(() => {
});
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
}
}
</script>
<style scoped>
.cell {
font-weight: bold;
text-align: center;
border-collapse: collapse;
}
.el-table td,
.el-table th {
padding: 8px 8px;
}
.butClass {
margin: 0.5% 0 0.5% 0;
text-align: center;
}
</style>
<style>
#ManualAddId .el-form-item {
margin-bottom: 8px;
}
</style>
2.效果展示
总结
觉得有帮助的随机发挥