elementui数值范围控件-elementUI 表单验证 v

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

elementUI自定义表单验证

1、需求

对输入框的值进行定期验证，这个输入框是由v-for的值绑定的elementui数值范围控件，这是绑定的区间范围的值。 因此需要进行自定义验证。 这里的难点在于多个道具的绑定。

二、具体实现 1、数据结构及功效

2. 需达到的验证功效

不仅要验证单次绑定（只能是数字，必须满足默认范围）还要验证范围（即参数一必须大于参数二）

三、实现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. 定制验证方式

请注意elementui数值范围控件，您可以在 vue 上使用它

 //自定义校验规则(邮箱)
            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)
            }

总结

我仍然讨厌定期验证。 我觉得定期验证很麻烦。 做了这个复杂的事情之后，我发现似乎也不过如此。 所以如果我在技术上讨厌它，我就必须从心里打败它。