标签:数组 出现 back llb number 替换 temp sch rgba
在表单包括表格页面校验情况下 对input框的值进行必填校验和格式校验时,会遇到value值 只能拿到第一次获取的到校验值。这样后面每次输入都是按照第一次情况进行校验。由此我的经验是在自定义校验时 用具体值进行校验 如下方式:
usedTime(rule, value, callback){ console.log(rule) let reg = /^[1-9]\d*$/; let index = Number(rule.field.split(‘.‘)[1])//获取当前验证项的index,对应数据的index console.log(this.ruleForm.rights[index].usedTime) if(this.ruleForm.rights[index].isChecked && !this.ruleForm.rights[index].usedTime){ callback(new Error(‘该项为必填项‘)) }else if(this.ruleForm.rights[index].isChecked && reg.test(this.ruleForm.rights[index].usedTime) === false){ callback(new Error(‘只能输入大于等于1的正整数‘)) }else if(this.ruleForm.rights[index].usedTime > this.ruleForm.rights[index].remainNumber){ callback(new Error(‘本次使用次数不可大于可用次数‘)) }else { callback() } },
在rules 里使用 如下:
rules:{ phone:[ required, phone ], verificationName: [ required , // chineseChar, // {min:2,message: ‘至少输入两个字符‘, trigger: ‘blur‘} ], usedTime:[{required: true,validator:this.usedTime,trigger: [‘blur‘,‘change‘]}, positiveIntNum], verificationOrgId:[required,requiredChange], costValue:[required, twoFloat, {required:true,validator:this.costValueValid,trigger: [‘blur‘,‘change‘]} ], },
页面校验实现方式:
<el-table-column prop="usedTime" label="本次使用次数" width="140"> <!-- :prop="`rights.${scope.$index}.usedTime`" --> <template slot-scope="scope"> <el-form-item label=" " v-show="scope.row.isChecked == true" :prop="‘rights.‘+scope.$index+‘.usedTime‘" :rules="rules.usedTime" class="costValue"> <el-input style="margin:0;width:89%" type="text" v-model="scope.row.usedTime"></el-input> </el-form-item> </template> </el-table-column>
以上方式 之前 this.ruleForm.rights[index].usedTime 都是用value值替换实现,发现上面描述的bug 之后 直接根据index值来精准取数组内相对应的要校验的值就没有出现校验bug 的情况。希望能帮助到大家。
element UI -- 表格内自定义表单校验Value 值只获取上一次的值 解决方案
标签:数组 出现 back llb number 替换 temp sch rgba
原文地址:https://www.cnblogs.com/zhu-xl/p/13839860.html