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

news2024/10/6 1:46:05

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.coloradmin.cn/o/878979.html

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

相关文章

最新Kali Linux安装教程:从零开始打造网络安全之旅

Kali Linux,全称为Kali Linux Distribution,是一个操作系统(2013-03-13诞生),是一款基于Debian的Linux发行版,基于包含了约600个安全工具,省去了繁琐的安装、编译、配置、更新步骤,为所有工具运行提供了一个…

无监督学习之主成分分析-半导体制造高维数据如何降维

数据降维不只存在于半导体数据中,它是存在于各行各业的,我们要分析的数据维数较多的时候全部输入维数较大这时就要采取降维的方法综合出主要的几列用于我们的分析。 PCA的哲学理念是要抓住问题的主要矛盾进行分析,是将多指标转化为少数几个…

13 docker使用问题

目录 docker模块分布: ①:安装"abseil"C库 ②:安装CMake​编辑 ③:grpc安装 ④:protobuf安装​编辑 ⑤:qt界面显示 ⑥:dockerfile编写​编辑 ⑦:执行docker脚本 …

(隐性)类型转换和算数转换

类型转换(char,short) 几个char 类型或者short 类型的数相加,会把他们提升为整形来相加 整型提升的意义: 表达式的整型运算要在CPU的相应运算器件内执行,CPU内整型运算器(ALU)的操作数的字节长度 一般就是int的字节长…

开学触控笔买哪个牌子好?ipad可以用的电容笔推荐

随着开学时间的临近,各大学院的学生们也都陆陆续续为走进校园而做准备了。那么开学自然需要买一些必要的数码电子产品,比如搭配iPad使用的电容笔。我们究竟要不要买苹果原装电容笔?事实上,如果只是为了写字记录东西的话&#xff0…

python爬虫数据解析xpath、jsonpath,bs4

数据的解析 解析数据的方式大概有三种 xpathJsonPathBeautifulSoup xpath 安装xpath插件 打开谷歌浏览器扩展程序,打开开发者模式,拖入插件,重启浏览器,ctrlshiftx,打开插件页面 安装lxml库 安装在python环境中的Scri…

windows11下配置vscode中c/c++环境

本文默认已经下载且安装好vscode,主要是解决环境变量配置以及编译task、launch文件的问题。 自己尝试过许多博客,最后还是通过这种方法配置成功了。 Linux(ubuntu 20.04)配置vscode可以直接跳转到配置task、launch文件,不需要下载mingw与配…

C#_字符串

String类型 字符串是信息最重要载体,相对于图像、语音、视频更易读易处理;C#字符串具有 不可变 特征, 从使每一次修改都要需要申请内存空间,并且需要复制源字符串到新的内存空间,还要需要销毁原有空间。 优势&#x…

前端实现文件预览功能

前端实现文件预览功能 ❝ 需求:实现一个在线预览pdf、excel、word、图片等文件的功能。 介绍:支持pdf、xlsx、docx、jpg、png、jpeg。 以下使用Vue3代码实现所有功能,建议以下的预览文件标签可以在外层包裹一层弹窗。 ❞ 图片预览 iframe标签…

详细安装配置django

安装配置使用Django。 1,下载安装 django pip install django 2.创建设置项目 先进入要放置项目的文件夹下 2.1, 创建项目 django-admin startproject Api_project 2.2, 创建app命令 cd Api_project dir看一下是否有 manage.py 文件…

ORB-SLAM2第五节---局部地图跟踪(阶段二)

保证三种跟踪方式更加准确 1.局部关键帧 当前帧F的局部关键帧包括: 能够观测到当前帧F中地图点的共视关键帧KF1、KF2,称为一级共视关键帧。一级共视关键帧的共视关键帧(前10个共视程度最高的关键帧),比如图中的KF1的…

取证--实操

2022年美亚杯个人赛 运用软件DB Browser for SQLite (一款用于查看SQLlite数据库文件的浏览器工具) 火眼,盘古石手机取证系统等 案件详情 于2022年10月,有市民因接获伪冒快递公司的电邮,不慎地于匪徒架设的假网站提…

分类预测 | MATLAB实现CNN-BiGRU-Attention多输入分类预测

分类预测 | MATLAB实现CNN-BiGRU-Attention多输入单输出分类预测 目录 分类预测 | MATLAB实现CNN-BiGRU-Attention多输入单输出分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 Matlab实现CNN-BiGRU-Attention多特征分类预测,卷积双向门控循环…

qemu简单使用

参考: 记一次全设备通杀未授权RCE的挖掘经历 claude1 安装使用 附件下载 下载后拖到虚拟机 解压 使用root用户 运行.sh脚本即可 运行脚本解读 #!/bin/bashsudo qemu-system-mipsel \-cpu 74Kf \-M malta \-kernel vmlinux-3.2.0-4-4kc-malta \ -hda debian…

Rabbitmq延迟消息

目录 一、延迟消息1.基于死信实现延迟消息1.1 消息的TTL(Time To Live)1.2 死信交换机 Dead Letter Exchanges1.3 代码实现 2.基于延迟插件实现延迟消息2.1 插件安装2.2 代码实现 3.基于延迟插件封装消息 一、延迟消息 延迟消息有两种实现方案&#xff…

PyQt5下拉列表实现及信号与槽的连接

目录 1、常用方法 2、常用信号 3、实操 1、常用方法 QComboBox() 创建一个下拉框对象addItems 可以使用列表进行多个下拉框内容添加, 单个添加用addItemcurrentIndexChanged 是用来获取当前选择下拉框的索引, 这也是这个"信号"槽函数需要 有个索引传参, 这样就便…

优化查询性能:UNION与UNION ALL的区别

作用 在SQL查询中,当我们需要合并多个查询结果集时,我们通常会使用UNION和UNION ALL操作符,同时,如果你写的or语句不走索引,可以考虑使用UNION、UNION ALL优化。 在本篇博客中,我们将探讨UNION和UNION AL…

Lnux系统usb摄像头测试程序(一)

这是linux或国产系统上(UOS、麒麟)USB摄像头的测试程序,主要功能有 1、系统上USB摄像头的配置查询,包括摄像头支持的协议,支持的分辨率等信息 、视频预览(支持yuv422和RGB两种格式 3、录像录音 4、视频编码…

值传递、形参实参的关系、地址传递(指针和函数)

1 值传递 实现两个数字进行交换&#xff0c;代码和运行结果如下所示&#xff1a; #include<iostream> using namespace std;void change(int a, int b) {int temp a;a b;b temp;cout << "change a " << a << endl;cout << "…

raw socket是啥(一)?

对于网络通讯&#xff0c;耳熟能详的莫过于TCP、UDP&#xff0c;二者皆需要ip和port。对于一般开发人员&#xff0c;找到一个“能用”的库就可以了&#xff0c;因为流式通讯&#xff0c;会有粘包问题&#xff0c;那就需要再加一个库&#xff0c;解决粘包问题&#xff0c;这样一…