element-ui做表单验证 v-for遍历表单 自动生成校验规则 pc移动双适配

整体思路：

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">&nbsp;</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('请填写邮箱'));
            }
        }

 

。