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 是怎样产生的呢?
参考链接
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/17651562.html
posted on 2023-08-23 15:17 shayloyuki 阅读(1099) 评论(0) 编辑 收藏 举报