elementPlus中Form的rules验证问题

elementPlus中Form的rules验证问题

描述：vue3用elementPlus框架做表单验证的时候，突然发现rule验证不对，代码如下：

export default {
  data() {
    return {
      ruleForm: {
        username: 'zs',
        password: '123'
      },
      rules: {
        userrule: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        passrule: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  }
 }

出现的情况是

• 可以显示’请输入用户名’但是第二条验证不出现，且第一条验证不消失，
• 注释掉第一条验证后一样，后一条验证依旧不生效

解决方案

ruleForm中的属性名 和 rules中的属性名统一化，即如下代码：

export default {
  data() {
    return {
      ruleForm: {
        username: 'zs',
        password: '123'
      },
      rules: {
        username: [       //改了这里
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [       //改了这里
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  }
 }

即可解决