el-input-number 手动输入无法触发校验

发布时间 2023-08-23 15:22:12作者: shayloyuki

前情提要

今天终于找到了 鬼打墙之谁改了我的代码 中的鬼,庆贺:-)

鬼找到了:测试对象不一致

  • 请输入0-1000间的整数 这则校验一直都有,不是改 bug 期间提交的,因此代码提交记录是正常的。

    		  {
    			pattern: /^([0-9][0-9]{0,2}|1000)$/,
    			message: "请输入0-1000间的整数",
    			trigger: "change",
    		  },
    
  • 为什么校验有时生效、有时不生效?
    上午测试时,校验不生效。原因是:测试的是 orderNum,如下所示:

          <el-form-item label="属性排序" prop="orderNum">
            <el-input-number
              v-model="clsAttrForm.orderNum"
              :min="1"
              :disabled="isInherited"
            />
          </el-form-item>
    	  
      // 校验规则
      clsAttrRules: {
        orderNum: [
          { required: true, message: "属性排序不能为空", trigger: "change" },
          {
            pattern: /^([0-9][0-9]{0,2}|1000)$/,
            message: "请输入0-1000间的整数",
            trigger: "change",
          },
        ],
      },
    

    但下午测试时,校验生效。原因是:测试的是 roleSort ,它有 @input.native 事件,如下所示:

        <el-form-item label="角色顺序" prop="roleSort">
          <el-input-number
            ref="refRoleSort"
            v-model.trim="form.roleSort"
            controls-position="right"
            @input.native="roleSortCheck"
          />
        </el-form-item>
    	
    	// 校验规则
      rules: {
        roleSort: [
          { required: true, message: "角色顺序不能为空", trigger: "change" },
          {
            pattern: /^([0-9][0-9]{0,2}|1000)$/,
            message: "请输入0-1000间的整数",
            trigger: "change",
          },
        ],
      },
    

原因:el-input-number 手动输入无法触发 change 校验

解决办法:绑定 `@input.native` 事件,根据 `ref` 获取实时值,赋值给 `el-input-number`
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
  <el-form-item label="角色顺序" prop="roleSort">
    <el-input-number
      ref="refRoleSort"
      v-model.trim="form.roleSort"
      controls-position="right"
      @input.native="roleSortCheck"
    />
  </el-form-item>
</el-form>

// 表单校验
rules: {
  roleSort: [
    { required: true, message: "角色顺序不能为空", trigger: "change" },
    {
      pattern: /^([0-9][0-9]{0,2}|1000)$/,
      message: "请输入0-1000间的整数",
      trigger: "change",
    },
  ],
},

// methods 校验排序
roleSortCheck(val) {
  const key = this.$refs.refRoleSort.displayValue;
  if (val.data === null && key === "") {
    this.$set(this.form, "roleSort", undefined);
  } else {
    this.$set(this.form, "roleSort", key);
  }
},

总结

  • 测试时要遵循同一对象原则。
  • 最初测试提的也是 roleSort,当时的 bug 是怎样产生的呢?

参考链接

  1. VUE Element UI中el-input-number组件无法实时触发change事件
  2. Element系列之el-input-number无法实时监听数据变化的解决方法