elementUI表单验证 v-for遍历表单 自定义正则校验以及对区间范围进行正则校验

一、需求

对输入框的值进行正则验证，但是这些输入框是通过v-for的值来绑定的 并且这是绑定区间范围的值。因此需要自定义验证 这里的难点在于多prop的绑定。

二、具体实现

1、数据结构以及效果

2、要达到的验证效果

既要对单个绑定的验证(只能是数字 并且要满足默认的范围)还要对范围进行验证（即参数一 要小于参数二）

3、具体代码实现form表单验证

1、首先通过将数组变形为普通form表单验证的对象数据格式

<div class="form-table">
    <ul>
        <li class="table-header fn-clear">
            <span class="fl node-con first">参数</span>
            <span class="fl node-con">默认范围</span>
            <span class="fl node-con last">自定义范围</span>
        </li>
        <li class="table-list fn-clear" 
            :class="{'list-sel':item.type == 'select',
                'has-error':item.errorShow}"
             v-for="(item,index) in tableData" :key="index">
            <span class="fl node-con first">{{item.name}}</span>
            <span class="fl node-con">{{item.value}}</span>
            <span class="fl node-con last" v-if="item.type == 'select'">
                <el-select v-model="item.selValue" placeholder="请选择">
                    <el-option
                    v-for="item1 in item.option"
                    :key="item1.value"
                    :label="item1.label"
                    :value="item1.value">
                    </el-option>
                </el-select>    
            </span>
            <span class="fl node-con last" v-if="item.type == 'range'">
                 <el-form-item :prop="item.id" >
                    <el-input v-model.trim="item.min" @focus="valChange(item.id,index)"></el-input>
                    <div class="separator">-</div>
                    <el-input v-model.trim="item.max" @blur="valChange(item.id,index)"></el-input>
                </el-form-item>             
            </span>
        </li>
    </ul>
</div> 

2、这里动态设置校验规则

mounted() {

   // 初始化数据
      this.tableData = JSON.parse(JSON.stringify(this.paramData));
      // 用于绑定各个表单值的对象
      for(let i=0,len=this.tableData.length;i

3、自定义验证方法

注意这里 这样才能使用vue里面的this

 //自定义校验规则(邮箱)
            var checkEmail = (rule, value, callback) => {     
                const mailReg = /^[0-9]*$/;
                // setTimeout(() => { 
                     let idx = this.tableIndex;
                     var tableData = this.tableData;
                    //  参数都要存在
                    if (!tableData[idx].min || !tableData[idx].max) {
                        tableData[idx].errorShow = true;
                        return callback(new Error('参数必须都填写完整'));
                    }
                     //  参数格式
                    if (mailReg.test(tableData[idx].min)&& mailReg.test(tableData[idx].max)) {
                        if(tableData[idx].min && tableData[idx].max){
                            if (parseInt(tableData[idx].max) > parseInt(tableData[idx].min)) {
                                tableData[idx].errorShow = false;
                                callback();
                            } else {
                                tableData[idx].errorShow = true;
                                return callback(new Error('参数1必须小于参数2'));
                            }
                        }
                    } else {
                        tableData[idx].errorShow = true;
                        return callback(new Error('参数格式不正确'));
                    }
                    //  参数必须满足区间[0,1]
                    // 默认满足范围还没完成
                    this.tableData = tableData;
                // }, 500)
            }

总结

一直很讨厌正则验证从内心觉得正则验证很麻烦 弄了这个复杂的以后发现好像也不过如此 所以对自己技术上讨厌的地方就要从心里上打败他。