当前位置: 首页 > Web前端 > vue.js

el-form验证规则和自定义验证规则和动态定义的验证规则

时间:2023-04-01 11:43:57 vue.js

总结:表单验证规则&自定义验证规则1.定义静态验证规则如template在表单定义上绑定rules属性,在需要验证的item上添加prop属性,prop值需要在rules键是一致的condFormRules:{budget:[//{required:true,message:'',trigger:['blur','change']},{valwithpropidator:validateBudget,trigger:'blur'},],}解释:(1)required:是否必填,true会显示一个红星,当设置为必填时,必须有消息,即使为空,否则不填默认提示“budgetisrequired”注:例如{message:'aaaaaaaa',trigger:["blur","change"]},如果没有required,则会被验证,但上次验证失败的信息不会自动消失,即有消息时,必须有required(2)trigger:Optional["blur","change"]触发事件到执行验证blur:当失去焦点时,change:当数据改变时this.$refs.condFormRef.validate()执行时,触发器会执行(3)validator:自定义验证属性,可以定义自己的验证rules,比如validateBudget的自定义规则函数,验证逻辑复杂的时候可以自定义该函数。以下验证逻辑比较复杂:需要数字和最多两位数的正整数或小数varvalidateBudget=(rule,value,callback)=>{if(!value||!Number(value)){//不要enteror输入0.0或0.00时,entercallback(newError('请输入预算'));}elseif(!(/(^[1-9]\d*(\.\d{1,2})?)$/.test(value)||/(^[0](\.\d{1,2}){1})$/.test(value))){callback(newError('请输入正整数或最多两位数的小数'));}else{回调();}};如果验证输入个数比较简单,可以直接写在模板中,比如限制输入个数二、定义动态校验规则当我们的表单项是动态生成的,需要对输入值进行校验时,怎么办?????比如添加一个用户信息,让它输入并验证添加学生信息

保存效果图如下'change']},{validator:(rule,value,callback)=>{if(value&&!(/^\d+$/g).test(value)){callback(newError("请输入数字"))}callback()}}]}方法:{addInfo(){this.testModel.studentsInfos.push({name:"",age:"",sex:""})},testSave(){this.$refs['testForm'].validate((valid)=>{if(valid){console.log("验证通过,可以保存")}else{console.log("验证失败")}})},}动态校验主要是定义的prop,存储在data中,根据索引位置找到需要校验的字段,如:prop="'studentsInfos.'+index+'.name'”这两个点不要忘了哦