1、首先安装vee-validate（指定版本），安装命令如下：

npm i vee-validate@4.0.3

2、在app.vue中写入如下内容：用vee-validate提供的Form组件代替form标签，用Field组件代替input标签，errors是接收校验的错误信息放在v-slot中，errors的键其实就是form中的键，值就是TRUE和FALSE

这里边有个特别需要注意的是重置按钮点击后在formCom.value.resetForm()之前要先清空form表单，否则感觉resetForm()无效

3、新建一个叫validate-schema.js作为表单验证，其内容如下：

// 定义校验规则提供给vee-validate组件使用
export default {// 校验accountaccount (value) {// value是将来使用该规则的表单元素的值// 1. 必填// 2. 6-20个字符，需要以字母开头// 如何反馈校验成功还是失败，返回true才是成功，其他情况失败，返回失败原因。if (!value) return '请输入用户名'if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'return true},password (value) {if (!value) return '请输入密码'if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'return true},mobile (value) {if (!value) return '请输入手机号'if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'return true},code (value) {if (!value) return '请输入验证码'if (!/^\d{6}$/.test(value)) return '验证码是6个数字'return true},isAgree (value) {if (!value) return '请勾选同意用户协议'return true}
}

4、效果如下：

在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：怎么用一个planning ADSO和一个characteristic实现保存评论

下一篇：复习整理（待完）

热门资讯

linux入门---制作进度条了解缓冲区我们首先来看看下面的操作：我们首先创建了一个文件并在这个文件里面添加了...

C++ 机房预约系统（六）：学... 8、学生模块 8.1 学生子菜单、登录和注销实现步骤：在Student.cpp的...

JAVA多线程知识整理 Java多线程基础线程的创建和启动继承Thread类来创建并启动自定义Thread类的子类&#...

【洛谷 P1090】[NOIP... [NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G ...

国民技术LPUART介绍低功耗通用异步接收器（LPUART）简介低功耗通用异步收发器...

城乡供水一体化平台-助力乡村振... 城乡供水一体化管理系统建设方案城乡供水一体化管理系统是运用云计算、大数据等信息化手段࿰...

程序的循环结构和random库... 第三个参数就是步长引入文件时记得指明字符格式，否则读入不了 ...

中国版ChatGPT在哪些方面... 目录一、中国巨大的市场需求二、中国企业加速创新三、中国的人工智能发展四、企业愿景的推进五、...

报名开启 | 共赴一场 Flu... 2023 年 1 月 25 日，Flutter Forward 大会在肯尼亚首都内罗毕...

汇编00-MASM 和 Vis... Qt源码解析索引汇编逆向--- MASM 和 Visual Studio入门前提知识ÿ...

【简陋Web应用3】实现人脸比... 文章目录🍉 前情提要🌷 效果演示🥝 实现过程1. u...

前缀和与对数器与二分法 1. 前缀和假设有一个数组，我们想大量频繁的去访问L到R这个区间的和，...

windows安装JDK步骤一、下载JDK安装包下载地址：https://www.oracle.com/jav...

分治法实现合并排序(归并排序)... 🎊【数据结构与算法】专题正在持续更新中，各种数据结构的创建原理与运用✨...

在linux上安装配置node... 目录前言1，关于nodejs2，配置环境变量3，总结前言...

Linux学习之端口、网络协议... 端口：设备与外界通讯交流的出口网络协议：　　网络协议是指计算机通信网...

Linux内核进程管理并发同步... 并发同步并发是指在某一时间段内能够处理多个任务的能力，而并行是指同一时间能够处理...

opencv学习-HOG LO... 目录1. HOG(Histogram of Oriented Gradients,方向梯度直方图)1...

EEG微状态的功能意义导读大脑的瞬时全局功能状态反映在其电场结构上。聚类分析方法一致地提取了四种头表面脑电场结构ÿ...

【Unity 手写PBR】Bu... 写在前面前期积累： GAMES101作业7提高-实现微表面模型你需要了解的知识【技...

vue3使用vee-validate自定义表单校验，提交实现步骤