vue-element 表单校验

1. 表单校验

• 完整的表单校验需要三个组件完成配合,分别是el-form,el-form-item,表单项,如el-input
  • el-form 负责绑定model和rules
  • el-form-item 负责绑定prop
  • el-input 负责双向绑定具体的表单数据
• 手动兜底校验

1.1 表单项校验

1.1.1 内置校验规则

在Rules:{}中给每一个需要校验的数据写校验规则

• 一般普通校验,如密码长度校验
  • required:非空
  • trigger:何时进行校验 blur:失焦 change:表单数据发生改变
  • min: 最小长度
  • max: 最大长度
  • message:提示信息
  • …element官网Form表单

password:[
    {required:true,trigger:'blur',min:6,max:10,message:'密码长度为6-10位'}
]

1.1.2 validate 自定义校验函数

• 自定义校验规则,如手机号校验等复杂校验
  • validator: 自定义校验 ----属性名
  • validateMobile:自定义属性名–是个函数,要另外自己封装

mobile: [
     { required: true, trigger: 'blur', validator: validateMobile }
 ]

export {validMobile} from  '@/utils/validate' //需要导入手机号校验函数
const validateMobile = (rule, value, callback) => {
      if (!validMobile(value)) {
        callback(new Error('请输入合法的手机号'))
      } else {
        callback()
      }
    }

此处validMobile()函数是封装的一个校验手机号函数

export function validMobile(mobile) {
  const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
  return reg.test(mobile)
}

1.2 兜底校验

是点击登录按钮后对表单的整体校验

对el-form添加ref以方便获取整个表单的DOM元素如ref='loginForm'

兜底校验,给登录按钮添加点击事件,点击事件内写

//this.$refs.loginForm获取DOM 表单校验validate方法有一个参数,参数是一个回调函数
//回调函数的参数是valid,值为布尔值,true表示表单验证通过,false表示表单验证不通过,这也就是手动的兜底校验
this.$refs.loginForm.validate(valid => {
    if(valid){
        //表单验证都通过后进行的操作
    }
})