Vue小白练级之路---001表单验证功能的一般实现思路

思路

  1. 先各自验证
    • 非空校验
    • 具体规则校验
  2. 后兜底校验( 防止用户没输入信息直接登录 )

实现:( 以 element-ui 为例 )

  1. 在 标签上用 model 动态绑定收集数据的对象(form)
  2. 在 标签上用 rules 动态绑定验证规则对象(formRule)
  3. 给 form 里的每一项需要验证的 绑定 prop 属性 , 值为验证规则 formRule 里的每一项
  4. 兜底校验(里面也可以写一些自定义校验规则)

示例:(自定义数据名与 element-ui 不一致)
Vue小白练级之路---001表单验证功能的一般实现思路_第1张图片

Vue小白练级之路---001表单验证功能的一般实现思路_第2张图片
Vue小白练级之路---001表单验证功能的一般实现思路_第3张图片

两次密码不一致的提示
实现步骤:

  1. 在data函数之中,return 对象之前定义校验函数 checkPwd,
  2. 在第二次密码校验的规则对象中 添加额外的规则对象
    { validator 属性: 值为校验的函数名,
    triggle 触发方式: 值也为blur }
    data () {
    const checkPwd = (rules, value, cb) => {
    // 两次密码不一致的校验配置
    // checkPwd就是validator属性的校验规则
    // 三个参数:
    // value: 收集的要校验的这一项的值,
    // cb: 处理函数 cb():成功就执行该函数。
    if (value === this.regForm.password) {
    cb()
    } else {
    cb(new Error('两次密码不一致!'))
    }
    }
    return {
    regForm: {
    username: '',
    password: '',
    repassword: ''
    },
    regFormRules: {
    username: [
    { required: true, message: '用户名为必填项!', triggle: 'blur' },
    { pattern: /[1]{1,10}$/, message: '用户名需为1-10位的字母数字组合', triggle: 'blur' }
    ],
    password: [
    { required: true, message: '密码为必填项!', triggle: 'blur' },
    { pattern: /^\S{6,15}$/, message: '密码需为6-15位的非空字符串', triggle: 'blur' }
    ],
    repassword: [
    { required: true, message: '确认密码为必填项!', triggle: 'blur' },
    { pattern: /^\S{6,15}$/, message: '密码需为6-15位的非空字符串', triggle: 'blur' },
    { validator: checkPwd, triggle: 'blur' }
    ]
    }
    }

  1. a-zA-Z0-9 ↩︎

你可能感兴趣的:(Vue小白练级之路---001表单验证功能的一般实现思路)