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