element-ui的表单验证及自定义验证规则

element-ui是一个组件库 里面有很多项大家都会用到 其中的表单项验证时比较常用的

比如我们一个登录界面有以下的要求

• 手机号: 必填, 11位移动手机号

• 验证码: 必填, 6位数字

• 协议: 必须勾选

<el-form :model="form" :rules="rulesArr">
    <el-form-item prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-form-item prop="code">
        <el-input v-model="form.code" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-form-item prop="check">
        <el-checkbox v-model="form.check">我已阅读并同意「用户协议」和「隐私条款」</el-checkbox>
    </el-form-item>
    <el-form-item>
        <el-button type="primary">登 录</el-button>
    </el-form-item>
</el-form>

<script>
export default {
  data () {
    return {
      form: {
        mobile: '',
        code: '',
        check: false
      },
      rulesArr: {
        mobile: [
          { required: true, message: '请输入正确手机号', trigger: 'blur', pattern: /^1[3456789]\d{9}$/ }
        ],
        code: [
          { required: true, message: '验证码是6位数字', trigger: 'change', pattern: /^\d{6}$/ }
        ]
      }
    }
  }
}
</script>

1. el-form设置:model="form表单对象"

2. el-form设置:rules="rule规则数组"

3. el-form-item设置prop="form表单对象的属性名"

4. 定义rulesArr规则数组里, prop名字对应规则

 rulesArr: {
        mobile: [
          { required: true, message: '请输入正确手机号', trigger: 'blur', pattern: /^1[3456789]\d{9}$/ }
        ],
        code: [
          { required: true, message: '验证码是6位数字', trigger: 'change', pattern: /^\d{6}$/ }
        ]
      }

这几句的意思

required  必填项   message 错误提示    trigger 触发判断条件(blur 失去焦点)(change 发生改变)

pattern 正则判断

而我们的判断是否阅读协议 需要自己定一个判断条件 那么就涉及到了

自定义校验

// 检验复选框
const checkValidator = (rule, value, callback) => {
  // rule规则对象
  // value关联表单值
  // callback() 回传结果
  if (value === false) {
    callback(new Error('请勾选协议'))
  } else {
    callback()
  }
}
// 为何不在methods里定义: 因为data初始化时, this还没实例化, 无法访问this.methods里方法
export default {
  data () {
    return {
      form: {
        mobile: '',
        code: '',
        check: false
      },
      rulesArr: {
        // ...其他省略
        check: [
          { validator: checkValidator }
        ]
      }
    }
  }
}

这样就可以简单的判断  表单的 复选框是否点击  如果 为false   就回弹一个 请勾选协议的提醒

如果正确 那么 callback()会继续进行下一项

 如果必填项的话 他还会在 左侧提示一个小小的红色*  提高用户体验~

那么 还有一个小问题 如果 你在登陆界面 没有输入内容 直接点击登陆按钮 也是可以直接进入页面 

那么我们如何做到 在没有任何输入情况点击登陆时候 判断表单规则呢?

 

在这里赋予ref=''form'属性

然后在 

给一个 submitFn的函数

 submitFn () {
      // this.$refs.form 为了获取 el-form 组件标签对象(整个表单对象)
      // validate() 是form表单对象内置的 会触发表单内所有的校验规则执行一遍
      // 校验完毕后 会回调函数体执行 valid变量接到校验最终结果
      // 只要有一个没通过 那么 valid直接为false
      this.$refs.form.validate((valid) => {
        // 有一项没通过表单校验规则, valid就为false
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

 这样我们点击的时候 他会触发这个函数   然后判断 这个表单的表单规则 如果有一项没有达成 那么就会 返回false  然后 走入else分支  打印error submit!!!!

如果想要提示弹窗 那么就自己加好了