zoukankan      html  css  js  c++  java
  • 多个表单如何同时验证

    最近公司的项目会有大量的表单需要输入很多信息。

    比如下面的表单:

     

     像这种,三个表单点确定同时提交,因而需要对三个表单进行同时验证,一个验证不通过,接口就走不通。

    我知道的有两种方法:

    第一种方法是通过promise.all(),通过promise进行同步验证。代码示例度娘有很多。

    我使用的是第二种方法,代码如下:

     1 addBaseInfo(){     
     2 that.$refs['store'].validate((valid) => {   //第一个表单ref="store”
     5           if (valid) {
     6             this.titleFormValid = true      //如果通过,加个true相当于开关判断
     7           }
     8         });
     9         if(this.store.type==1){
    10           that.$refs['school'].validate((valid) => {  //第二个表单ref='school'
    11             if(valid){
    12               that.customFormValid = true    //同上
    13             }
    14           });
    15         }else if(this.store.type==3){
    16           that.$refs['company'].validate((valid) => {
    17             if(valid){
    18               that.customFormValid = true
    19             }
    20           });
    21         }else{
    22           that.$refs['community'].validate((valid) => {
    23             if(valid){
    24               that.customFormValid = true
    25             }
    26           });
    27         };
    28         that.$refs['dynamicValidateForm'].validate((valid) => {   //第三个表单ref='dynamicValidateForm'
    29           if(valid){
    30             that.orangerFormValid = true   //同上
    31           }
    32         });
    33         if (this.titleFormValid && this.customFormValid && this.orangerFormValid) {    //这是最关键的,当这三个表单都通过,之间是且关系,才能走下一步
    34          
    35         }
    36       },

    通过加个true/false判断,表示表单是否可是验证的方法,亲测有效。

  • 相关阅读:
    稀疏自编码器和矢量化编程
    使用支持向量机训练mnist数据
    采用libsvm进行mnist训练
    支持向量机
    月下“毛景树”
    最小费用最大流模板
    最大流模板
    选学霸
    线段树 2
    线段树 1
  • 原文地址:https://www.cnblogs.com/zr123/p/11479412.html
Copyright © 2011-2022 走看看