前后端分离------后端创建笔记(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、邮箱验证规则成功

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux文件系统管理

Linux文件系统管理 磁盘的组成与分区 计算机用于存取文件的硬件是磁盘,磁盘的组成主要有磁盘盘、机械手臂、磁盘读取头与主轴马达所组成, 而数据的写入其实是在磁盘盘上面。磁盘盘上面又可细分出扇区(Sector)与磁道(Track)两种单位, 其中扇区…

idea常见错误大全之:解决全局搜索失效+搜索条件失效(条件为空)+F8失灵

问题一:全局搜索快捷键ctrlshiftf 突然失灵了,键盘敲烂了 都没反应,这是为什么呢? 肯定不是idea本身的原因,那么就是其它外在因素影响到了idea的快捷键,那么其它的快捷键为什么没失效呢,原因只有…

P13-CNN学习1.3-ResNet(神之一手~)

论文地址:CVPR 2016 Open Access Repository https://arxiv.org/pdf/1512.03385.pdf Abstract 翻译 深层的神经网络越来越难以训练。我们提供了一个残差学习框架用来训练那些非常深的神经网络。我们重新定义了网络的学习方式,让网络可以直接学习输入信息与输出信息…

【应用笔记】使用 CW32 实现电池备份(VBAT)功能

前言 电池备份(VBAT)功能的实现方法,一般是使用 MCU 自带的 VBAT 引脚,通过在该引脚连接钮扣电池,当系统电源因故掉电时,保持 MCU 内部备份寄存器内容和 RTC 时间信息不会丢失。 本文档介绍了如何基于 C…

迭代器失效问题

1.什么是迭代器失效 迭代器失效是一种现象,由特定操作引发,这些特定操作对容器进行操作,使得迭代器不指向容器内的任何元素,或者使得迭代器指向的容器元素发生了改变。 2.可能引起迭代器失效的操作 ①.插入元素/扩容引起的迭代…

web图书管理系统Servlet+JSP+javabean+MySQL图书商城图书馆 源代码

本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 web图书管理系统ServletJSPjavabeanMySQL 系统有1权限…

合同管理是什么,合同管理怎么做

阅读本文, 您可以了解:1、合同管理是什么;2、合同管理怎么做 一、合同管理是什么 合同管理是指对合同的有效执行、监督和维护过程的管理。合同是一种法律文件,用于规定各方之间的权利和义务。在商业和法律交易中,合同…

Windows 11 家庭中文版找不到组策略文件gpedit.msc

最近因为调整日期问题需要用到组策略文件gpedit.msc,但是发现找不到文件 在按键盘 winR 打开运行界面输入 gpedit.msc 回车 Windows找不到文件’gpedit.msc’。请确定文件名是否正确后,再试-次。 检查电脑Windows系统版本 是 Windows 11 家庭中文版 果断早网上搜…

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

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

抖音关键词搜索小程序排名怎么做

抖音关键词搜索小程序排名怎么做 1 分钟教你制作一个抖音小程序。 抖音小程序就是我的视频,左下方这个蓝色的链接,点进去就是抖音小程序。 如果你有了这个小程序,发布视频的时候可以挂载这个小程序,直播的时候也可以挂载这个小…

Fiddler模拟请求发送和修改响应数据

fiddler模拟伪造请求 方法一:打断点模拟HTTP请求 1、浏览器页面填好内容后(不要操作提交),打开fiddler,设置请求前断点,点击菜单fiddler,”Rules”\”Automatic Breakpoints”\”Before Requests” 2、在…

Linux RPM包安装、卸载和升级(rpm命令)详解

(转载请删除括号里的内容) 下面讲解一下,如何使用 rpm 命令对 RPM 二进制包进行安装、卸载和升级操作。我们以安装 apache 程序为例。 RPM包默认安装路径 通常情况下,RPM 包采用系统默认的安装路径,所有安装文件会按照类别分散安装到下表所…

Redis使用Lua脚本和Redisson来保证库存扣减中的原子性和一致性

文章目录 前言1.使用SpringBoot Redis 原生实现方式2.使用redisson方式实现3. 使用RedisLua脚本实现3.1 lua脚本代码逻辑 3.2 与SpringBoot集成 4. Lua脚本方式和Redisson的方式对比5. 源码地址6. Redis从入门到精通系列文章7. 参考文档 前言 背景:最近有社群技术交…

Tuxera NTFS Mac2023最新免费版Mac读写工具

有时候我们在使用苹果笔记本的时候,会遇到一些问题,比如怎么打开移动硬盘,或者为什么苹果电脑读不出U盘。这些问题可能让我们感到困惑和沮丧,但其实都有解决办法。本文就来为大家介绍一下苹果笔记本怎么打开移动硬盘和苹果电脑读不…

pdf怎么转换成jpg图片?这几个转换方法了解一下

pdf怎么转换成jpg图片?转换PDF文件为JPG图片格式在现代工作中是非常常见的需求,比如将PDF文件中的图表、表格或者图片转换为JPG格式后使用在PPT演示、网页设计等场景中。 【迅捷PDF转换器】是一款非常实用的工具,可以将PDF文件转换成多种不同…

mac ssh连接另一台window虚拟机vm

vmware配置端口映射 编辑(E) > 虚拟网络编辑器(N)... > NAT设置(S)... window防火墙,入站规则添加5555端口 控制面板 > 系统和安全 > Windows 防火墙>高级设置>入站规则>新建规则... tips windows查看端口命令:netstat -ano | f…

中电金信:技术实践|Flink多线程实现异构集群的动态负载均衡

导语:Apache Flink是一个框架和分布式处理引擎,用于对无界和有界数据流进行有状态计算。本文主要从实际案例入手并结合作者的实践经验,向各位读者分享当应用场景中异构集群无法做到负载均衡时,如何通过Flink的自定义多线程来实现异…

cloud_mall-notes01

1、登录 1.1 获取token令牌 登录时的ajax请求: 后端路由配置处理: 登录的路由配置 作用:把oAuth2.0颁发的token存储到redis中 package com.powernode.config;import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject;…

12 注册登录

12 注册登录 整体概述 使用数据库连接池实现服务器访问数据库的功能,使用POST请求完成注册和登录的校验工作。 本文内容 介绍同步实现注册登录功能,具体涉及到流程图、载入数据库表、提取用户名和密码、注册登录流程与页面跳转的代码实现。 流程图&a…

【vue】vue中的插槽以及使用方法

插槽 普通插槽 1、在父组件中直接调用子组件的标签&#xff0c;是可以渲染出子组件的内容&#xff1b;如果在子组件标签中添加了内容&#xff0c;父组件就渲染不出来了&#xff1b; ParentComponent.vue&#xff1a; <template><div><h1>Parent Componen…