【vue element-ui】表单连锁验证，el-form validate函数失效问题

最新推荐文章于 2024-09-24 10:50:41 发布

米老鼠的摩托车日记

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量161

点赞数 1

分类专栏： element-ui vue2 文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/weixin_41747256/article/details/142362312

版权

vue2 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

element-ui

6 篇文章 0 订阅

订阅专栏

实现效果：连锁表单验证，在LED版本号选择为升级版LED时候，标题名称不超过8

实现代码：

    <el-form
      :model="configuration"
      ref="form"
      :rules="rule"
      size="small"
      label-width="130px"
      v-if="isture == 1"
    >
      <el-form-item label="LED版本号" prop="version">
        <el-select
          style="width: 100%"
          v-model="configuration.version"
          @change="changeBB"
        >
          <el-option
            v-for="item in versionOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >{{ item.label }}</el-option
          >
        </el-select>
      </el-form-item>
      
     
      <el-form-item label="标题名称" prop="titile">
        <el-input
          placeholder="请输入内容"
          v-model="configuration.titile"
        ></el-input>
      </el-form-item>
    </el-form>

  data() {
    // 表单校验规则
    var validatePass = (rule, value, callback) => {
      //console.log("当前表单数据", this.configuration.version, value.length);
      if (this.configuration.version == 2) {
        if (value.length > 10) {
          callback(new Error("标题字数过长"));
        } else {
          callback();
        }
      }
      if (value === "") {
        callback(new Error("标题不可为空"));
      } else {
        callback();
      }
    };
    return {
     
      //表单
      configuration: {
        version: "",
        titile："",
      },
      versionOption: [
        {
          value: 1,
          label: "烽云智能LED"
        },
        {
          value: 2,
          label: "烽云升级版LED"
        }
      ],
      rule: {
        titile: [
          {
            //  required: true,
            validator: validatePass,
            // message: "标题有误",
            trigger: "blur"
          }
        ],
        
      }
    };
  },

表单提交代码：

    sumbit() {
      
      this.isture == 0;
      this.$refs["form"].validate(r => {
       
        if (r) {
         
          this.configuration.contentOne = this.configuration.contentOne.join(
            ","
          );
          this.configuration.index1 = this.configuration.index1.join(",");
          this.configuration.index2 = this.configuration.index2.join(",");
          this.configuration.index3 = this.configuration.index3.join(",");
          this.configuration.index4 = this.configuration.index4.join(",");
          this.configuration.index5 = this.configuration.index5.join(",");
         

          if (this.isadd == true) {
            this.doadd();
            
          } else {
            this.edit();
            
          }
        }
      });
    },

注意：如果点击表单的确认按钮，没有任何效果，validate函数不运行就需要确定验证是否出问题

每一个 if 都要对应了一个 else 并且每个条件都要 callback 确保在不同情况下都会执行callback