整體思路：
1：利用element-ui的柵格實現小分辨率和大分辨率的適配
2：模擬一組數據，從中篩選出 綁定各個表單值的對象 以及生成驗證規則對象
3：在script標簽內 、data（）外，自定義驗證規則，這樣在created鈎子中（也就是生成驗證對象時）就可以將這些自定義的規則加入進去
下面是整了一天的代碼：
<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]"
placeholder="請選擇活動區域"
@change="valChange"
style="width:100%;">
<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>
// import global from '@/js/global.js';
//自定義校驗規則(郵箱)
var checkEmail = (rule, value, callback) => {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if (!value) {
return callback(new Error('郵箱不能為空'));
}
setTimeout(() => {
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('請輸入正確的郵箱格式'));
}
}, 100)
}
// 電話驗證
var checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
if (!value) {
return callback(new Error('電話號碼不能為空哦也'))
}
setTimeout(() => {
// Number.isInteger是es6驗證數字是否為整數的方法,但是我實際用的時候輸入的數字總是識別成字符串
// 所以我就在前面加了一個+實現隱式轉換
if (!Number.isInteger(+value)) {
callback(new Error('請輸入數字值'))
} else {
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('電話號碼格式不正確'))
}
}
}, 100)
}
export default {
components:{
},
data(){
return {
formData:{},//用於綁定各個表單值的對象
arrList:[],//模擬一個初始化數據
rules:{},//驗證規則對象
}
},
created(){
//模擬的假數據
this.arrList=[
{name:"a1",required:1},
{name:"a2",required:0},
{name:"select",required:1},
{name:"email",required:1},
{name:"phone",required:1},
{name:"textarea",required:1},
]
// 用於綁定各個表單值的對象
for(let i=0,len=this.arrList.length;i<len;i++){
var obj={[this.arrList[i].name]:""}
this.formData=Object.assign({},this.formData,obj);
}
console.log(this.formData);
// 生成校驗規則對象
for(let i=0,len=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: this.arrList[i].name+'不能為空',
trigger: 'change'
}
arrs.push(objs);
}else if(this.arrList[i].name=='email'){
arrs.push(objs);
objs={ validator: checkEmail, trigger: 'blur' };//自定義的驗證規則
arrs.push(objs);
}else if(this.arrList[i].name=='phone'){
arrs.push(objs);
objs={ validator: checkPhone, trigger: 'blur' };//自定義的驗證規則
arrs.push(objs);
}else if(this.arrList[i].name=='textarea'){
arrs.push(objs);
objs={ min: 5, max: 8, message: '長度在 5 到 8 個字符', trigger: 'blur' };//長度驗證
arrs.push(objs);
}else{
arrs.push(objs);
}
}
this.rules[this.arrList[i].name]=arrs;
}
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) {
this.$refs[formName].resetFields();
},
// 每個表單的值改變的事件
valChange(val){
console.log(val)
console.log(this.formData)
}
}
}
</script>
增加一個表單驗證的正則：
function verifyEmail(email){ var reg = new RegExp(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/); //郵箱驗證 if(reg.test(email)){ return true; }else{ return false; } }
完整郵箱驗證：
var validUsername=(rule, value, callback)=>{ var reg = new RegExp(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/); //郵箱驗證 if(value){ if(reg.test(value)){ this.checkEmail(value).then((data=>{ if(data){ callback(); }else{ callback(new Error('郵箱已存在')); } })) }else{ callback(new Error('請輸入正確的郵箱地址')); } }else{ callback(new Error('請填寫郵箱')); } }
。