踩坑element rules的表单验证

今天使用element的rules功能时遇到个无法验证问题,无法获取到input框的值,由于我是使用全局的表单验证加组件自身的方法去使用,所以一直以为是我代码问题,然而检查到一半去看官方例子时发现prop和form表单里面的v-model里面名字一样,,,,改名使用OK!!!!
上代码

-这一块是全局验证的代码

// 用户名 字母数字组成6-16位
export function userNameRE (rule, value, callback) {
  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/g
  if (!value) {
    return callback(new Error('请填写用户名'))
  } else if (!reg.test(value)) {
    return callback(new Error('用户名格式错误'))
  } else {
    callback()
  }
}

// 密码 字母数字组成6-16位
export function passwordRE (rule, value, callback) {
  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/g
  if (!value) {
    return callback(new Error('请填写密码'))
  } else if (!reg.test(value)) {
    return callback(new Error('用户名格式错误'))
  } else {
    callback()
  }
}
export default {
  // 常用登录  6-16字母数字组合
  logName: [{ required: true, validator: userNameRE, trigger: 'blur' }],
  // 常用密码  6-16字母数字组合
  logPwd: [{ required: true, validator: passwordRE, trigger: 'blur' }]
}


  • 这一块是组件代码 prop里面的值prop="username"必须和v-model="ruleForm.username"form对象里面的值一样。



那么晚安、

你可能感兴趣的:(踩坑element rules的表单验证)