Element-Plus表单校验

目录

一、表单校验

（1）简要概述

（2）基本使用

二、自定义表单校验

         （1）简要概述

（2）基本使用

---

一、表单校验

（1）简要概述

Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。这里设置表单校验规则，我们主要有四点。

（1）el-form中的  :model='ruleform'  绑定的是这个form的数据对象,不像以前我们用input中的name属性值一个一个接受获取，他是直接一次性传递一个对象。

（2）el-form中的 :rules='rules'  绑定的是整个rules的规则对象

（3）表单元素中的 v-model='ruleform.xxx'  给表单元素绑定form的子属性

（4）el-form-item中的 prop配置生效的是哪个校验规则

（2）基本使用

二、自定义表单校验

（1）简要概述

基本的校验是不满足很多的开发条件的，比如说校验第二次输入的密码是否和第一次输入的密码是否一致，比如说输入的数据要求一定要是数字，并且数值要在多少之间，这时候我们就需要使用自定义表单校验了，他的实现是函数。具体如下。

（2）基本使用

repassword: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15位非空字符',
      trigger: 'blur'
    },
    {
      //rule表示的是当前校验规则相关的信息
      //value所校验的表单元素的的当前的值
      //callback：无论是成功还是失败，都需要callback回调
      //           callback()校验成功
      //           callback(new Error(错误信息))校验失败
      validator: (rule, value, callback) => {
        //判断两次输入的密码是否一致
        if (value !== formModel.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]