Vue搭配Vuetify编辑用户时校验用户名存在性的规则异常问题

• 校验函数无返回值：你编写的checkUserExistence函数仅执行了Array.some()遍历，但没有将遍历的布尔结果返回，函数默认返回undefined，在布尔判断中undefined等价于false，因此校验规则永远会走到「用户已存在」的报错分支。
• 校验逻辑完全错误：some方法内部的判断逻辑不符合需求，原逻辑遍历到当前被编辑用户的原有用户名时会直接返回true，导致some整体返回true，和「用户名和原有值一致就不校验重复」的需求完全相悖。

第一步：修正校验函数逻辑 #

checkUserExistence(v){
  // 输入值和原有用户名一致，直接校验通过
  if(v === this.oldusername) return true
  // 否则判断是否存在其他用户占用当前输入的用户名，无重复返回true，有重复返回false
  return !this.usersdata.some(user => user.username === v)
}

第二步：rules配置无需修改，保持原有逻辑即可 #

nameRules: [
  v => !!v || '必填项',
  v => (v && (v.length <= 20 && v.length >= 2)) || '长度需在2-20字符之间',
  v => ( v && (/^[a-z0-9]+$/.test(v))) || '仅支持小写字母和数字',
  v => ( v && this.checkUserExistence(v)) || '用户已存在'
]

• 要确保校验执行时this.usersdata和this.oldusername已经完成赋值，避免异步获取数据还没返回就触发校验导致逻辑异常。

内容的提问来源于stack exchange，提问作者mrssolaris