element form 动态增减表单项加验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery/jquery-3.2.1.js" type="text/javascript"></script> <script type="text/javascript" src="./vue/vue.js"></script> <link href="./elementUI/elementUI.css" type="text/css" rel="stylesheet" /> <!--对elementUI样式的修改--> <script src="./elementUI/elementUI.js" type="text/javascript"></script> <script src="./formadd.js"></script> <style> *{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; } #vue_container { width: 100%; height: 100%; background-color: rgb(235, 237, 241); overflow: hidden; } .el-input{ width: auto; margin-right: 20px; } .demo-dynamic{ width: 52.0833vw; margin-top: 50px; } .col-mb{ margin-bottom: 1.8519vh; } </style> </head> <body> <div id="vue_container"> <!-- model 表单数据对象 --> <!-- prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 --> <el-form :model="dynamicValidateForm.formData" ref="dynamicValidateForm" label-width="200px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ]"> <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item> <el-form-item label="活动时间" required> <div class="aaaa" v-for="(domain, index) in dynamicValidateForm.formData.domains"> <el-col :span="8" class="col-mb"> <el-form-item :key="domain.key" :prop="'domains.' + index + '.value'" :rules="rules.value"> <el-input v-model.number="domain.value"></el-input> </el-form-item> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11" class="col-mb"> <el-form-item :key="domain.key + 'aaa'" :prop="'domains.' + index + '.value2'" :rules="rules.value2"> <el-input v-model.number="domain.value2"></el-input> <el-button @click.prevent="removeDomain(domain)">删除</el-button> </el-form-item> </el-col> </div> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> <el-button @click="addDomain">新增域名</el-button> <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> </el-form-item> </el-form> </div> </body> </html>
var VueContainer = null;
$(function () {
VueContainer = new Vue({
el: "#vue_container",
data() {
var validatePass = (rule, value, callback) => {
var field = rule.field
var index = field.split('.')[1];
var end = this.dynamicValidateForm.formData.domains[index].value2;
if (!Number.isInteger(value)) {
return callback(new Error('请输入数字值'));
} else if (value == '' || value == undefined) {
return callback(new Error('请选择'));
} else if (end != '' && end != undefined) {
if (parseInt(value) > parseInt(end)) {
return callback(new Error('开始时间 大于了结束 的时间'));
} else {
// this.resetValidate('domains' + index + 'value2')
}
}
return callback();
};
var validatePass2 = (rule, value, callback) => {
var field = rule.field
var index = field.split('.')[1];
var start = this.dynamicValidateForm.formData.domains[index].value;
if (!Number.isInteger(value)) {
return callback(new Error('请输入数字值'));
} else if (value == '' || value == undefined) {
return callback(new Error('请选择'));
} else if (start != '' && start != undefined) {
if (value < start) {
return callback(new Error('开始时间 大于了结束 的时间22'));
} else {
console.log('aaaadd ',);
// this.resetValidate('domains' + index + 'value')
}
}
return callback();
}
return {
dynamicValidateForm: {
email: '',
formData: {
domains: [{
value: '',
value2: ''
}],
}
},
rules: {
value: [
{ validator: validatePass, trigger: 'blur' }
],
value2: [
{ validator: validatePass2, trigger: 'blur' }
],
}
}
},
methods: {
resetValidate(prop) {
this.$refs.dynamicValidateForm.validateField(prop);
},
// 提交
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
// 重置
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 删除
removeDomain(item) {
var index = this.dynamicValidateForm.formData.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.formData.domains.splice(index, 1)
}
},
// 新增
addDomain() {
this.dynamicValidateForm.formData.domains.push({
value: '',
value2: '',
key: Date.now()
});
}
},
})
})
效果如下：
