前后端分离------后端创建笔记(07)表单验证

1、我输入数据,然后关闭,重新打开会发现残存的数据仍然保留着

2、点了这个x号,数据就全部被清理了

3、点这三个地方,数据全部都清理掉

4、这里先写一个方法

4.1 定义一个方法

 4.2 这里表单的数据在哪里,就是这个

4.3  this.userForm,这里能够让数据清空

 5、这里的表单要做一个验证,非空验证,长度验证,验证完之后,就是把表单请求,提交给后台,后台把数据填进去,我们前端收到结果,并且窗口刷新表格的数据

6、第一步验证表单

6.1 有两种常规的验证,第一种是非空验证,另一种长度验证,这一种非常普遍,因此在ELEMTUI中做了一些封装,因此我们直接拿过来用就行,还有一种情况,像电子邮件,这种情况就比较特殊了。

 6.2 点击Form表单

 6.3 通过roles可以添加规则

7、这里的props后面写的名字一定要跟你写的匹配规则一致

8、首先回到我们表单里,我们先定义一个roles

9、我们先定义一个roles

10、这里的规则写什么

11、我们只拿一个就行


12、把这一行代码放到文件里

13、这里的数据我改成username 

13.1

14、required:必填项,message是信息提示

15、trigger是显示什么时候触发,这里是失去焦点的时候触发

16、长度的提示,这里填的长度的限制

17、这里建议跟你的属性值要保持一致

18、这里如果你想让他生效,你得加一个props

19、props只加这三个就行,其他的就不用加了

20、现在检验已经可以了

21、邮箱如何校验,这里我们要使用自定义校验规则 

22、你需要定义一个自定义的函数

23、如果你验证失败的话,你必须到callback中进行一个验证提示

24、如果你成功的话,只调一个callback就行

25、如何用,这里我们要拿过代码来,进行复制

26、将代码复制到我们的项目里,这里放到data里,我们检查的是email

26.1

27、这里的代码我们不要

28、这里写的是提示,这里我们要做判断

29、提示写这样,怎样进行验证

30、这里写正则表达式,不会写判断邮箱的正则表达式,百度一下就行

 

30.1 用别人已经写好的正则表达式

 

31、正则表达式粘贴到这里来

32、正则做判断,把值传过去

33、如果是false,那么我们就加个!取反

34、逻辑是如果判断出错了,就报个错,如果没错,就成功调用,这里自定义好了一个验证函数

35、怎么用他,validator:验证器 

36、在下面补录验证器 

37、邮箱验证规则成功

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在 Linux 中使用 cp 命令

cp 命令是 Linux 中一个重要的命令,你可能经常会用到它。 正如名称所示,cp 代表 复制copy,它被用于 在 Linux 命令行中复制文件和目录。 这是一个相对简单的命令,只有几个选项,但你仍有必要深入了解它。 在展示 cp …

VLLM推理流程梳理

0x0. 前言 本文在对VLLM进行解析时只关注单卡情况,忽略基于ray做分布式推理的所有代码。 0x1. 运行流程梳理 先从使用VLLM调用opt-125M模型进行推理的脚本看起: from vllm import LLM, SamplingParams# Sample prompts. prompts ["Hello, my n…

二次封装element-plus上传组件,提供校验、回显等功能

二次封装element-plus上传组件 0 相关介绍1 效果展示2 组件主体3 视频组件4 Demo 0 相关介绍 基于element-plus框架,视频播放器使用西瓜视频播放器组件 相关能力 提供图片、音频、视频的预览功能提供是否为空、文件类型、文件大小、文件数量、图片宽高校验提供图片…

el-table实现懒加载(el-table-infinite-scroll)

2023.8.15今天我学习了用el-table对大量的数据进行懒加载。 效果如下: 1.首先安装: npm install --save el-table-infinite-scroll2 2.全局引入: import ElTableInfiniteScroll from "el-table-infinite-scroll";// 懒加载 V…

clion2020.3配置clang-format

标题clion 启用clang-format 文件->设置->编辑器->代码样式. 为了保持原有代码风格不变,可以把原始的配置风格先导出,最好直接保存到自己的工程下,.clang-format是隐藏文件,需要用ctrlH才能看到 文件->设置->编辑…

SpringBoot复习:(45)@Component定义的bean会被@Bean定义的同名的bean覆盖

有同名的bean需要配置: spring.main.allow-bean-definition-overridingtrue 否则报错。 package cn.edu.tju.component;import org.springframework.stereotype.Component;Component public class Person {private String name;private int age;{this.name "…

OpenHarmony Meetup 广州站 OpenHarmony正当时—技术开源

招募令 OpenHarmony Meetup 广州站 火热招募中,等待激情四射的开发者,线下参与OpenHarmonyMeetup线下交流 展示前沿技术、探讨未来可能、让你了解更多专属OpenHarmony的魅力 线下参与,先到先得,仅限20个名额! 报名截止时间8月23日…

【云原生】Docker 详解(三):Docker 镜像管理基础

Docker 详解(三):Docker 镜像管理基础 1.镜像的概念 镜像可以理解为应用程序的集装箱,而 Docker 用来装卸集装箱。 Docker 镜像含有启动容器所需要的文件系统及其内容,因此,其用于创建并启动容器。 Dock…

Go学习-Day1

Go学习-Day1 个人博客:CSDN博客 打卡。 Go语言的核心开发团队: Ken Thompson (C语言,B语言,Unix的发明者,牛人)Rob Pike(UTF-8发明人)Robert Griesemer(协助HotSpot编译器,Js引擎V8) Go语言有静态语言的…

MongoDB安装

文章目录 MongoDB安装设置yum源安装指定版本的mongodb配置文件连接MongoDB的工具MongoDBCompass MongoDB安装 设置yum源 [rootWDQCVM sbin]# vim /etc/yum.repos.d/mongodb-org-6.0.repo [mongodb-org-6.0] nameMongoDB Repository baseurlhttps://repo.mongodb.org/yum/red…

JavaScript如何执行语句

目录 语法/词法分析 预编译 解释执行 预编译什么时候发生 js运行三步曲 预编译前奏 预编译步骤 巩固基础练习 语法/词法分析 按语句块的粒度解析成抽象语法树 ,分析该js脚本代码块的语法是否正确,如果出现不正确,则向外抛出一个语法错误&#x…

第4章:决策树

停止 当前分支样本均为同一类时,变成该类的叶子节点。当前分支类型不同,但是已经没有可以用来分裂的属性时,变成类别样本更多的那个类别的叶子节点。当前分支为空时,变成父节点类别最多的类的叶子节点。 ID3 C4.5 Cart 过拟合 缺…

文本挖掘 day5:文本挖掘与贝叶斯网络方法识别化学品安全风险因素

文本挖掘与贝叶斯网络方法识别化学品安全风险因素 1. Introduction现实意义理论意义提出方法,目标 2. 材料与方法2.1 数据集2.2 数据预处理2.3 关键字提取2.3.1 TF-IDF2.3.2 改进的BM25——BM25WBM25BM25W 2.3.3 关键词的产生(相关系数) 2.4 关联规则分析2.5 贝叶斯…

css冒号对齐

实现后的样式效果 实现方式 html&#xff1a; <el-col v-if"item.showInSingle ! false" :span"6" style"padding: 4px 0"><label>{{ item.label }}&#xff1a;</label><span v-if"singleData[item.prop] ! 0 &…

iOS字体像素与磅的对应关系

注意&#xff1a;低于iOS10的系统&#xff0c;显示的字宽和字高比高于iOS10的系统小。 这就是iOS10系统发布时&#xff0c;很多app显示的内容后面出现…&#xff0c;因而出现很多app为了适配iOS10系统而重新发布新版本。 用PS设计的iOS效果图中&#xff0c;字体是以像素&#x…

SRM订单管理:优化供应商关系

一、概述SRM订单管理的概念&#xff1a; SRM订单管理是指在供应商关系管理过程中&#xff0c;有效管理和控制订单的创建、处理和交付。它涉及与供应商之间的沟通、合作和协调&#xff0c;旨在实现订单的准确性、可靠性和及时性。 二、SRM订单管理的流程&#xff1a; 1. 订单创…

NGINX源码安装

文章目录 NGINX源码安装安装依赖包获取源码NGINX官方网站各个目录的用途 编译安装安装结束后的文件设置为服务 NGINX源码安装 安装依赖包 root执行 yum -y install gcc gcc-c make libtool zlib zlib-devel openssl openssl-devel pcre pcre-devel这些包是用于开发和构建软件…

item_review-获得TB商品评论

一、接口参数说明&#xff1a; item_review-获得TB商品评论&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_review 名称类型必须描述keyString是调用key&#xff08;点击获取…

轻拍牛头(约数)

题意&#xff1a;求ai在n个数中&#xff0c;ai可以整除的数有多少个&#xff0c;不包括ai自己。 分析&#xff1a;暴力写需要n^2的时间复杂度&#xff0c;此时想一下预处理每个数的倍数&#xff0c;约数和倍数是有关系的&#xff0c;把每个数的倍数都加上1. #include<bits…

嵌入式Linux驱动开发系列五:Linux系统和HelloWorld

三个问题 了解Hello World程序的执行过程有什么用? 编译和执行&#xff1a;Hello World程序的执行分为两个主要步骤&#xff1a;编译和执行。编译器将源代码转换为可执行文件&#xff0c;然后计算机执行该文件并输出相应的结果。了解这个过程可以帮助我们理解如何将代码转化…