【Element-ui】表单验证的使用--详细讲解

总结一下表单验证的使用，如果后续还有骚操作会继续添加
对有帮助的同学，希望三连一下，或者关注我，我们一起学习进步！！！

自定义表单验证

第一步：为form-item添加prop属性(prop属性值为校验规则的字段名)

第二步：为form添加rules属性并且在：model处绑定要校验的值(rules属性值为校验规则)

第三步：定义rules

注：这里的rules必须定义在data里面的return里
第四步：定义自己的校验规则

注：这里的校验规则必须写在data里面的return的前面，而且value有值是因为表单数据的model属性绑定的是我们要校验规则的那个对象，我们一定要确保：model属性中的值一定要是我们要校验的值

自己的项目代码案例：

<el-form :model='form'></el-form>

props:{
	form:Object
	// form传过来的形式为
	// form:{ username:'', newpassword:'' }  
	
}

data () {
    let validatePass = (rule, value, callback) => {
      // 定义密码的校验正则
      const passreg = /^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$/
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!passreg.test(value)) {
        if (value.length <= 8 || value.length >= 16) {
          callback(new Error('密码长度必须为8-16位'))
        } else {
          callback(new Error('密码必须含大写字母和小写字母'))
        }
      } else {
        callback()
      }
    }
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.newpassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        oldpassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        newpassword: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        endpassword: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },

效果图：