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<len;i++){
          if(this.tableData[i].type=='range'){
              var obj={[this.tableData[i].id]:""}
              this.formData=Object.assign({},this.formData,obj);
          }               
      }
      // 生成校验规则对象
      for(let i=0,len=this.tableData.length;i<len;i++){              
          if(this.tableData[i].type=='range'){
              var arrs=[
                  { validator: this.checkEmail,
                   trigger: ['blur','change'] 
                  }
              ];//自定义的验证规则
              this.rules[this.tableData[i].id]=arrs;
          }               
      }
      // console.log(this.rules)
},
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)
            }

总结

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值