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）基本使用

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
//整个用于提交的form数据对象
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})
//整个表单的校验规则
const rules = {
  username: [
    // 非空校验，
    //required表示是否必须输入
    // message表示不满足规则显示的信息
    //trigger：表示显示时机，blur表示是失去焦点，值换成change表示实时
    { required: true, message: '请输入用户名', trigger: 'blur' },
    //长度校验
    { min: 5, max: 10, message: '用户名必须是5-10位字符', trigger: 'blur' }
  ],
  password: [
    //正则表达式校验
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15位非空字符',
      trigger: 'blur'
    }
  ]
}
</script>
<template>
//:model中有着表单数据
//:rulrs中有着校验规则
<el-form
        :model="formModel"
        :rules="rules"
        ref="form"
        size="large"
        autocomplete="off"
        v-if="isRegister"
      >


        <el-form-item>
          <h1>注册</h1>
        </el-form-item>


//prop配置的是生效的是哪个规则
        <el-form-item prop="username">

//v-model绑定form具体的数据
          <el-input
            v-model="formModel.username"
            :prefix-icon="User"
            placeholder="请输入用户名"
          ></el-input>

        </el-form-item>



        <el-form-item prop="password">

          <el-input
            v-model="formModel.password"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>

        </el-form-item>

</el-form>


</template>

二、自定义表单校验

（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'
    }
  ]


<template>

     <el-form-item prop="repassword">
          <el-input
            v-model="formModel.repassword"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入再次密码"
          ></el-input>
        </el-form-item>

</template>