表单验证 rules内触发事件trigger只有一下几种:

比如 阁下遇到没有这些触发事件的时候,或者自定义封装组件 需要正则验证,就不能用上边的触发事件

 

类似于这种自己封装的表单时间段组件

按照正常表单验证代码就是:

HTML:

         <el-form-item label="呼叫时间段:" prop="outboundTime"
            >(最小可选呼叫时间段为1小时,双击已选中时间段可取消选择)<br/>
            <div class="timeul">
              <drag-weektime
                v-model="outboundTime"
                :data="weektimeData"
                @on-clear="clearWeektime"
              />
            </div>
          </el-form-item>
         <el-form-item style="margin-top: 20px">
            <el-button @click="resetForm('ruleForm')">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">
                创建任务
            </el-button>
          </el-form-item>

JS:

 data() {
    return {
      rules: {
        outboundTime: [
          { required: true, message: '请选择呼叫时间段', trigger: 'change' }
        ],
      },
    };
  },

 submitForm(formName) {
      var createParams = {
          accountId: this.name,
          calleeIds: this.calleeIds,
          reMoveStatus: str,
          ...this.ruleForm,
        };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createTask(createParams).then((res) => {
            if (res.code == 200) {
              this.taskId = res.id;
              this.$message({
                type: "success",
                message: "创建成功",
              });
              this.isNewly_ = false;
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

这样写的话 不选择时间段会有正则提示,但是重新选择时间段之后,提示不会消失  valid还是为false

所以我的小小解决办法:

给他单独增加ref 

<el-form-item label="呼叫时间段:" ref='outTimes' prop="outboundTime"
            >(最小可选呼叫时间段为1小时,双击已选中时间段可取消选择)<br />
            <div class="timeul">
              <drag-weektime
                v-model="outboundTime"
                :data="weektimeData"
                @on-clear="clearWeektime"
              />
            </div>
          </el-form-item>




// JS代码:
submitForm(formName) {
      var createParams = {
          accountId: this.name,
          calleeIds: this.calleeIds,
          reMoveStatus: str,
          ...this.ruleForm,
        };
      this.$refs[formName].validate((valid) => {
        if(this.ruleForm.outboundTime!==undefined){
                //或者不为null的时候,就将他的正则提示清除,将valid的值改为true就OK
           this.$refs['outTimes'].clearValidate()
           valid = true
        }
        if (valid) {
          createTask(createParams).then((res) => {
            if (res.code == 200) {
              this.taskId = res.id;
              this.$message({
                type: "success",
                message: "创建成功",
              });
              this.isNewly_ = false;
            }
          });
        }
      });
    },

这样就OK 比较简单粗暴 O(∩_∩)O哈哈~

Logo

前往低代码交流专区

更多推荐