2020-08-05 15:22:21 版本 : vue 表单验证问题
作者: 陈婉 于 2020年02月28日 发布在分类 / 人防组 / 人防前端 下,并于 2020年08月05日 编辑
 历史版本

修改日期 修改人 备注
2020-09-03 16:49:18[当前版本] 陈婉 格式调整
2020-08-05 15:22:21 陈婉 其他原因...
2020-05-08 16:40:46 陈婉 更新知识
2020-05-08 16:34:54 陈婉 更新知识

(一)自定义验证

1.Form表单上绑定rules

:rules="ruleValidate"

2.FormItem上绑定prop

prop="confirmPassWord"

3.在data中定义验证规则

 const validateConfirmPassWord = (rule,value,callback)=>{
      if(!value){
        return callback(new Error("请输入密码"));
      }else if(value !== this.info.passWord){
        callback(new Error("两次密码输入不一致"));
      }else{
        callback();
      }
    }

4.data中使用规则绑定到数据上

ruleValidate:{
        confirmPassWord:[validateConfirmPassWord]
},

5.示例:

粘贴图片


(二)表单中使用v-for如何验证----嵌套表单验证

1.Form表单上绑定rules

:rules="ruleValidate"
2. FormItem上动态绑定prop
:prop="`[members[${index}].militaryRowGuid]`"
3.示例:


4.嵌套验证升级版-多级嵌套

粘贴图片

5.表单嵌套验证需要自定义验证规格时,可以这样写

粘贴图片 6.表单秦涛验证需要自定义验证规则,并且验证与同组中的其他数据相关时,可这样写

粘贴图片

粘贴图片

粘贴图片

(三)多表单验证

1.定义一个空数组,用来存放所有的表单验证返回的的promise

let promises=[];
2.找到所有表单验证返回的peomise存放到pormises数组里面
promises.push(this.$refs.formValidate0.validate());
this.$refs.validate.forEach(e=>promises.push(e.validate()));

3.执行所有的promise

Prmise.all(promises).then(function(values){
     //成功的操作
     if(values.every(e=>e)){
          //验证成功执行的操作
     }else{
          //验证失败执行的操作
     }
},function(rej){
     //失败执行的操作
})

也可以使用 aysnc/await 

let res = await Prmise.all(promises);
if(res.every(e=>e)){
     //验证成功执行的操作
}else{
     //验证失败执行的操作
}

4.示例:

粘贴图片



 附件

附件类型

PNGPNG

历史版本-目录  [回到顶端]
    知识分享平台 -V 4.8.7 -wcp