前言
- 为什么需要表单校验？
- 前端提前校验可以 省去一些错误的请求提交，为后端节省接口压力；
- 避免一些低级错误的出现；
- 一些简单的校验，我们就可以根据现有的配置字段进行配置，但是一些特殊的校验，就需要我们自定义校验规则，此时就会用到
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>
