前后端分离------后端创建笔记(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.rhkb.cn/news/91205.html

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

相关文章

Qt扫盲-QWidget理论使用总结

QWidget理论使用总结 一、概述二、顶层 控件 和子 控件三、复合控件四、自定义控件和绘制五、大小提示和大小策略六、事件七、一组函数和属性八、QWidget样式表九、透明度和双缓冲十、创建半透明窗口 一、概述 widget 是用户界面的最小单位:它从window系统接收鼠标…

Unity游戏源码分享-精品即时战略游戏_官网60美刀素材

Unity游戏源码分享-精品即时战略游戏_官网60美刀素材 下载地址:https://download.csdn.net/download/Highning0007/88204017

Jmeter-压测时接口按照顺序执行-临界部分控制器

文章目录 临界部分控制器存在问题 临界部分控制器 在进行压力测试时,需要按照顺序进行压测,比如按照接口1、接口2、接口3、接口4 进行执行 查询结果是很混乱的,如果请求次数少,可能会按照顺序执行,但是随着次数增加&a…

《零基础实践深度学习》(第2版)学习笔记,(二)机器学习和深度学习综述

文章目录 1. 人工智能、机器学习、深度学习的关系2. 机器学习2.1 实现原理2.2 如何实施 3. 深度学习神经网络核心概念 1. 人工智能、机器学习、深度学习的关系 **人工智能(Artificial Intelligence,AI)**是研发用于模拟、延伸和扩展人的智能…

helm安装harbor + nerdctl 制作push 镜像

参考 文章:Helm部署Harbor_helm harbor_风向决定发型丶的博客-CSDN博客 安装好后使用 nerd containerd对接harbor_containerd 容器 insecure-registries 配置_柠是柠檬的檬的博客-CSDN博客 推送镜像 Containerd 对接私有镜像仓库 Harbor - 知乎 接下来我们来…

“一日之际在于晨”,欢迎莅临WAVE SUMMIT上午场:Arm 虚拟硬件早餐交流会

8月16日,盛夏的北京将迎来第九届WAVE SUMMIT深度学习开发者大会。在峰会主论坛正式开启前,让我们先用一份精美的元气早餐,和一场“Arm虚拟硬件交流会”,唤醒各位开发小伙伴的开发魂! 8月16日,WAVE SUMMIT大…

【注解使用】使用@Autowired后提示:Field injection is not recommended(Spring团队不推荐使用Field注入)

问题发生场景: 在使用 IDEA 开发 SpringBoot 项目时,在 Controller 类中使用注解 Autowired 注入一个依赖出现了警告提示,查看其他使用该注解的地方同样出现了警告提示。这是怎么回事?由于先去使用了SpringBoot并没有对Spring进行…

三、性能测试场景设计

性能测试场景设计 一、引言:如果公司要求你去做性能测试,遇到这些场景,我们要如何设计?二、6种常见设计方法1、普通性能场景设计2、负载测试性能场景3、压力测试场景4、面向目标性能场景 一、引言:如果公司要求你去做性…

W6100-EVB-PICO 做UDP Server进行数据回环测试(七)

前言 前面我们用W6100-EVB-PICO 开发板在TCP Client和TCP Server模式下,分别进行数据回环测试,本章我们将用开发板在UDP Server模式下进行数据回环测试。 UDP是什么?什么是UDP Server?能干什么? UDP (User Dataqram P…

海量数据迁移,亚马逊云科技云数据库服务为大库治理提供新思路

1.背景 目前,文档型数据库由于灵活的schema和接近关系型数据库的访问特点,被广泛应用,尤其是游戏、互联网金融等行业的客户使用MongoDB构建了大量应用程序,比如游戏客户用来处理玩家的属性信息;又如股票APP用来存储与时…

Jmeter常用功能-参数化介绍

JMeter也有像LR中的参数化,本篇就来介绍下JMeter的参数化如何去实现。 参数化:录制脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户来登录系统。 这个时…

RabbitMQ简单使用

RabbitMq是一个消息中间件:它接收消息、转发消息。你可以把它理解为一个邮局:当你向邮箱里寄出一封信后,邮递员们就能最终将信送到收信人手中。 RabbitMq、消息相关术语如下: 生产者:生产者只发送消息,发…

React(5)

1.受控组件案例 1.1之前的影院案例改写 import React, { Component } from react import axios from axios import BetterScroll from better-scroll import ./css/02_tab.cssexport default class Cinema extends Component {constructor() {super();this.state {cinemaLis…

Jmeter进阶使用:BeanShell实现接口前置和后置操作

一、背景 我们使用Jmeter做压力测试或者接口测试时,除了最简单的直接对接口发起请求,很多时候需要对接口进行一些前置操作:比如提前生成测试数据,以及一些后置操作:比如提取接口响应内容中的某个字段的值。举个最常用…

只需要自动售货机,商业模式立马大变样!

随着互联网、大数据和人工智能的蓬勃发展,商业模式正以前所未有的方式融合,其中自动售货机作为新零售模式的一颗璀璨明珠,正引领着购物体验的革命。这个巧妙的结合将消费者的便利、数据的智能分析以及科技的创新融为一体,重新定义…

Mysql:Access denied for user ‘root‘@‘localhost‘ (using password:YES)解决方案

最近在配置Maven以及Mybatis时,连接localhost数据库时出现无法连接,用cmd测试时报错:Access denied for user ‘ODBC’‘localhost’ (using password: NO),这个意思就是不允许远程访问,一开始笔者进入mysql试了一下是…

Untiy Json和Xml的序列化和反序列化

Json的序列化和反序列化 1.定义数据类 [Serializable] public class ZoomPoint {// 点名称, 将作为Key被字典存储public string name;// 轴心X坐标public Vector2 pivot Vector2.one / 2;// 放大倍率,小于1是为缩小倍率,小于0是取绝对值,不…

机器学习中基本的数据结构说明

数据维度或数据结构 当我们在机器学习或深度学习的领域内处理数据,我们通常会遇到四种主要的数据结构:标量,向量,矩阵和张量。理解这些基本数据结构是非常重要的,因为它们是机器学习算法和神经网络的核心。下面是对这…

NLPR、SenseTime 和 NTU 加速自动视频纵向编辑

视频人像编辑技术已经在电视、视频和电影制作中得到了应用,并有望在不断发展的网真场景中发挥关键作用。最先进的方法已经可以逼真地将同源音频合成为视频。现在,来自北京模式识别国家实验室(NLPR)、商汤科技研究和南洋理工大学的…