表单校验步骤

表单的校验大致可以分为如下三步：

1. 定义验证规则

2. 配置模板，应用规则 给表单设置 rules 属性传入验证规则 给表单设置model属性传入表单数据 给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

3. 手动兜底验证

1，定义验证规则

在data中 定义校验规则
格式为

rules: { 字段名: [ { 验证规则1 }, { 验证规则2 }, ....], ...}

示例代码：

rules: {
    username: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { min: 6, max: 15, message: '6~15个字符', trigger: 'blur' },
        { validator: validatorName, trigger: 'blur' }
        // validator 自定义校验规则
    ],
     password: [
        // ...省略
        { pattern: /^\S{6,15}$/, message: '密码必须是 6 ~ 15 位的非空字符', trigger: 'blur' }
    ]
}

2. 配置模板，应用规则

注意：这几处都需要保持一致

做完这一步我们输入框失去焦点就会触发表单校验规则了
未输入内容：

但是我们如果不触发失去焦点事件 还是可以提交 所以还需要手动兜底校验

3，兜底校验

 <el-form ref="loginForm" :rules="loginRules" :model="loginForm" />

 <el-button @click="hSubmit">确定</el-button>

 hSubmit() {
      // 手动兜底校验
      this.$refs.roleForm.validate((valid, value, callback) => {
        if (valid) { // valid是一个布尔值通过为true错误为false
          // 验证通过
          alert('登录成功')
        } else {
          // 验证不通过
          callback(new Error(value + '格式不正确'))
          return false
        }
      })