elementUI自定义表单验证
一、需求
对输入框的值进行正则验证,但是这些输入框是通过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)
}
总结
一直很讨厌正则验证从内心觉得正则验证很麻烦 弄了这个复杂的以后发现好像也不过如此 所以对自己技术上讨厌的地方就要从心里上打败他。