the whole idea:
1: Use element-ui grid resolution and high resolution to achieve a small adaptation
2: Simulation of a set of data, which form the respective selected objects bound value and generating a target validation rules
3: In the script tag, Data (), the custom validation rules, so that hooks created (i.e. generating authentication object) can be added to these custom rules into
Here is the code for the entire day:
<template>
<div class="box1">
<div style="margin-top:400px;"></div><el-row><el-col :xs="0" :md="3"> </el-col>
<el-col :xs="24" :md="18"><el-form label-width="100px" ref="formData" :model="formData" :rules="rules"><div :index="(index+'')" v-for="(item,index) in arrList" :key="item.name">
<el-form-item v-if="item.name=='select'" :prop="item.name" :label="item.name">
<el-select v-model.trim="formData[item.name]"
style = "width: 100%;">
@ Change = "valChange"
placeholder = "Choose activity area"
<el-option label="请选择" value=""></el-option>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item v-else-if="item.name=='textarea'" :prop="item.name" :label="item.name">
<el-input type="textarea" v-model.trim="formData[item.name]" @change="valChange"></el-input>
</el-form-item>
<el-form-item v-else :prop="item.name" :label="item.name">
<el-input v-model.trim="formData[item.name]" @blur="valChange"></el-input>
</el-form-item></div>
<el-form-item style="text-align:center;">
<el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
<el-button @click="resetForm('formData')">重置</el-button>
</el-form-item></el-form></el-col>
</el-row>
</div>
</template>
<script>{The checkEmail = (rule, value, the callback) =>varcustom validation rules (mailbox)
//Import from Global '@ / JS / the global.js';//
mailReg const = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ;
if (! value) {
return the callback ( new new Error ( 'E-mail can not be empty' ));
}
the setTimeout (() => {
IF (mailReg.test (value)) {
the callback ()
} the else {
the callback ( new new Error ( 'enter correct mailbox format ' ));
}
}, 100 )
}
// phone verification
var checkPhone = (rule, value, the callback) => {
const phoneReg = / ^. 1 [. 3 |. 4 |. 5 |. 7 |. 8] [0-9] {}. 9 $ /
IF (! value) {
returnthe callback ( new new Error ( 'telephone numbers can not be empty oh' ))
}
the setTimeout (() => {
// Number.isInteger digital es6 method to verify whether an integer number, but when I use the actually input always identifying a string
// so I preceded by a + implement implicit conversion
IF (! Number.isInteger (+ value)) {
the callback ( new new Error ( 'Please input digital value' ))
} the else {
IF (phoneReg .test (value)) {
the callback ()
} the else {
the callback (
}
}new new Error ( 'phone number format is incorrect' ))
}, 100 )
}
Export default {
Components: {
},
Data () {
return {
formData: {}, // object for each form values binding
arrList: [], // analog data to initialize a
rules: {} , // validation rule objects
}
},
Created () {
// analog dummy data
the this .arrList = [
{name: "A1", required:. 1 },
{name: "A2", required: 0 },
{name : },"SELECT", required:. 1
{name: "In Email", required:. 1 },
{name: "Phone", required:. 1 },
{name: "TextArea", required:. 1 },
]
// for binding Object form respective values
for (the let I = 0, len = the this .arrList.length; I <len; I ++ ) {
var obj = {[ the this .arrList [I] .name]: "" }
the this .formData = Object .assign ({}, the this .formData, obj);
}
the console.log ( the this .formData);
// generate the parity rule objects
for (the let I = 0,len = the this.arrList.length;i<len;i++){
var arrs=[];
if(this.arrList[i].required==1){
var objs={
required: true,
message: this.arrList[i].name+'不能为空',
trigger: 'blur'
};
if(this.arrList[i].name=='select'){
objs={
required: true,
Message: the this .arrList [I] .name + 'not empty' ,
Trigger: 'Change'
}
arrs.push (OBJS);
} the else IF ( the this .arrList [I] .name == 'In Email' ) {
ARRS. Push (OBJS);
OBJS = {Validator: the checkEmail, Trigger: 'Blur'}; // custom validation rules of
arrs.push (OBJS);
} the else IF ( the this .arrList [I] .name == 'Phone' ) {
arrs.push (OBJS);
OBJS = {Validator: checkPhone, Trigger: 'Blur'}; // custom validation rules of
arrs.push (OBJS);
} the else IF ( the this .arrList [I] .name == 'TextArea' ) {
arrs.push (OBJS);
OBJS = min {:. 5, max:. 8, Message: 'the length in characters 5-8', Trigger: 'Blur'}; // length validation
arrs.push (OBJS);
} the else {
ARRS. Push (OBJS);
}
}
the this .rules [ the this .arrList [I] .name] = ARRS;
}
the console.log (this.rules)
},
mounted(){
},
methods:{
//提交事件
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
// 重置事件
resetForm (formName) {
the this. $ refs [formName] .resetFields ();
},
// each form of value change event
valChange (Val) {
the console.log (Val)
the console.log ( the this .formData)
}
}
}
</ Script>