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

前情提要

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

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

• 请输入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无法实时监听数据变化的解决方法