<!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()
});
}
},
})
})
标签：index,return,form,value,element,callback,var,单项,domains From： https://www.cnblogs.com/j-a-h/p/16877310.html