ElementPlus使用总结 - 【Form】表单校验

前言

• 为什么需要表单校验？
  • 前端提前校验可以 省去一些错误的请求提交，为后端节省接口压力；
  • 避免一些低级错误的出现；
• 一些简单的校验，我们就可以根据现有的配置字段进行配置，但是一些特殊的校验，就需要我们自定义校验规则，此时就会用到 validator 这个属性，其属性值是个函数，有三个参数，下面会详细介绍；

校验实现步骤

• 1️⃣ 声明表单对象 并 绑定 在 el-form 上；
  • 声明的表单对象的属性，一般情况下都是和接口所需的字段保持一致，这样在传输数据的时候更加方便省事；
• 2️⃣ 准备 规则对象 并使用 prop属性 绑定 在 el-form-item 上，属性值 为 规则对象中对应的属性名；
  • 规则对象中，属性的属性值是数组，表示可以绑定多个规则；
  • 规则对象中的属性名 必须 和 表单对象中的属性名 对应（保持一致）；
• 3️⃣ 使用 v-model 将 表单对象的属性 绑定 在 el-input 等 表单元素 上；
  • 不一定是 el-input 别的表单元素也能绑定；
• 4️⃣ 一些特殊的校验需要 自定义校验函数 去校验；
  • 需要使用的字段：validator，其属性值是个函数；

校验 属性 / 函数参数 说明

• 🔺 注意：

  • 规则对象的属性 和 表单对象的属性 保持一致，
  • 规则对象的属性的属性值是 Array<Object>，表示可以绑定多个校验规则；
  • 🔺🔺 自定义校验规则的时候，callback() 必须执行，不管是否通过校验，都必须执行；

• 常用属性介绍：

属性	属性含义	属性值
type	验证数据的类型	array, string, data, string, numer, ...
required	是否必填	true / false
message	校验不通过的提示信息	string类型，自定义
trigger	验证逻辑的触发方式	blue（失去焦点触发） / change（对应的数据改变时触发）
min	输入的最小长度	number类型，自定义
max	输入的最大长度	number类型，自定义
validator	自定义校验规则	function，有三个参数：    rule【当前校验规则】；     value【输入框的数据】；    callback【回调函数，不管是否通过校验都 必须执行，当校验不通过的时候，显示提示信息：callback(new Error('提示信息'))】

表单的整体校验

• 防止用户刚进入登录页面的时候，直接点击登录（之前的校验效果不会触发）；
• 表单组件提供了一个内置方法： ref.validate((valid) => {})，只要调用这个方法，就会给表单域需要校验的字段都进行校验；
  • 参数说明：
    • valid：只有当 所有校验字段 都通过校验 之后才会是 true，否则就是false；
• 见：示例展示；

示例展示

<script setup>
    // 表单对象
    const loginForm = reactive({
        username: '',
        password: '',
        agree: true
    });

    // 规则对象
    /**
     * 自定义校验函数 - 参数介绍
     * @param { any } rule 当前对应的规则
     * @param { any } value 对应文本框的值
     * @param { any } callback 回调函数，不管是否通过校验，都必须执行
    */
    const validatorUsername = (rule, value, callback) => {
        if (!/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(value)) return callback(new Error("请输入正确格式的手机号！"));
        callback();
    };
    const validatorPwd = (rule, value, callback) => {
        // 检验密码强度
        if (/\d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) return callback();
        callback( new Error("密码强度较弱，请输入带有 大写字母、小写字母、数字三种字符组合的密码！"));
    };
    const formRules = {
        username: [
            // required - 是否必填
            // message - 校验不通过的提示信息
            // trigger - 校验的触发方式【blur - 失去焦点触发；change - v-model绑定的值改变触发】
            { required: true, message: '用户名不能为空', trigger: 'blur' },

            // validator - 自定义校验规则
            { validator: validatorUsername, trigger: 'blur' }
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },

            // min - 最小长度
            // max - 最大长度
            { min: 6, max: 14, message: '密码长度为 6~14 个字符', trigger: 'blur' },
            { validator: validatorPwd, triger: 'blur' }
        ],
        agree: [
            // 自定义校验规则
            validator: (rule, value, callback) => {
                if (!value) return callback(new Error('请勾选同意协议！'));
                callback();
            },
            trigger: 'change'
        ]
    };
    
    // TODO 表单整体校验 + 登录
    const loginFormRef = ref(null);
    const login = (formEl) => {
        fromEl.validate((valid) => {
            // 不通过校验
            if (!valid) return ElMessage.error('请填写 登录信息 或 同意协议 再进行登录操作！');
            // 通过校验
            // 登录逻辑
        });
    };
</script>

<template>
    <el-form :model="loginForm" :rules="formRules" ref="loginFormRef" label-position="right" label-width="60px" status-icon>
        <el-form-item label="账户" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入手机号" />
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码"/>
        </el-form-item>
        
        <el-form-item label-width="22px" prop="agree">
            <el-checkbox size="large" v-model="loginForm.agree">
                我已同意隐私条款和服务条款
            </el-checkbox>
        </el-form-item>
        
        <el-button size="large" class="subBtn" @click="login(loginFormRef)">点击登录</el-button>
    </el-form>
</template>