添加MD5加密代码后Vue表单验证始终返回false的原因

问题原因分析 #

• 字段拼写错误：你注释的加密代码里写的是sendForm.password1，但表单实际字段是password，属于笔误。不过这个错误本身不会导致验证失败，只会让加密操作无效，发送给后端的还是明文密码。
• 核心问题：误修改原表单触发长度验证失败
  如果你实际编写时，没有通过JSON.parse(JSON.stringify(this.registerForm))拷贝出独立的sendForm，而是直接修改了this.registerForm的密码字段（比如this.registerForm.password = md5(this.registerForm.password)），会触发两个问题：
  1. 原表单的password会变成32位的MD5加密串，而你的密码规则要求长度在6~20位之间，直接导致password字段的长度验证不通过，整个表单valid返回false。
  2. 即便同时加密password2，只要加密操作在表单验证前执行，加密后的字符串长度不符合规则，依然会验证失败。
• 验证时机错误：如果加密代码被放在this.$refs["registerForm"].validate()调用之前，会提前修改表单数据，让验证逻辑使用加密后的数据，破坏原有规则。

解决方案 #

确保加密操作只针对拷贝后的sendForm，绝不修改原表单registerForm的数据：

handlerRegister(){
    this.$refs["registerForm"].validate((valid) => {
        if (valid) {
            let sendForm = JSON.parse(JSON.stringify(this.registerForm))
            // 修正字段名，正确加密密码
            sendForm.password = md5(sendForm.password)
            // 前端已验证两次密码一致，无需传递password2给后端
            delete sendForm.password2
            axios.post("/register", sendForm).then((response) => {
                if (response.data.error !== ""){
                    this.$message.error(response.data.msg)
                    return
                }
                this.$message.success("注册成功")
                this.$router.push("/login")
            })
        } else {
            console.log(valid)
            console.log(this.registerForm)
            console.log("error")
        }
    })
}

额外优化建议 #

• 可以给password字段也添加一致性验证，提升用户体验：

  password: [
      {min: 6, max: 20, message: '密码长度需在6~20位之间', trigger: 'blur'},
      {validator: validatePassword, trigger: 'blur'}
  ],
  

• 后端必须再次验证密码的合法性，不能完全依赖前端验证，避免恶意请求绕过前端逻辑。

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