【入门】浅谈JS表单验证之邮箱验证

最新推荐文章于 2022-03-03 17:16:49 发布

weixin_33709364

最新推荐文章于 2022-03-03 17:16:49 发布

阅读量809

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5a24e4356fb9a045204c0cbb

版权

声明：这是一些写给自己看的文章，总结自己在自学前端路上遇到的一些问题及目前的处理办法，第一次写这类的文章，第一次献给掘金了，我会一直写下去，写给自己看。当然如果你不幸的看到这篇文章（应该没人看到吧...0.0...哈哈），又恰巧你是一位前端大牛或者处理过相关的问题，又刚好发现文章中解决问题的思路或者其他有问题（或者实在看不下去了，太烂了，不得不站出来说话以防止继续污染广大看客的眼球，还世界一个和平......┑(￣Д ￣)┍）.....（摊手）...），希望你能不吝赐教，这或许是对我这些正在前端路上的人最大的帮助。又或许你同我一样正在路上，也正遇到了这个问题，解决了你的问题，那就再好不过了，一起共勉吧！

好了，废话一大顿，干啥呢.........0.0
在刚开始学习JS的时候，表单的验证是很好的练习题目。以下是结合百度谷歌搜索的答案和自己的过滤，在邮箱验证之前先让我们连看下一些常用邮箱都有哪些格式？
常见：xxx@qq.com xxx@126.com xxx@163.com xxx@sina.com xxx@gmail.com xxx@139.com xxx@sohu.com xxx@hotmail.com xxx@aliyun.com xxx@yeah.net
xxx@yahoo.com 等
及一些企业邮箱
这里就不一一列举了.............0.0
虽然很多，邮箱的格式都有相同的规则。必须含有@和‘.’ , 且@必须在‘.’的前面，@的后面至少有四个字符，@的前面不能为空，一般要求前面至少有六个字符（假设估计，其他规则暂时没想到....0.0）。

知道了这些，验证思路如下

一、验证邮箱思路

1.不能为空或全是空格
2.有@和‘.’
3.@的前面至少有六位字符之多十八位（假设这么多），字符内容为0-9、a-z、A-Z、‘ ’、‘-’
4.@的后面必须有‘.’
5.@与‘.’之间至少两位字符至多八位字符（假设那么多），字符内容为a-z、A-Z
6.‘.’之后至少有两位至多八位（还是假设那么多...0.0怪我了，没找到标准，或许根本没有标准），字符内容a-z、A-Z
7.（暂时就想到这样了...0.0）

二、思路的实行

1.正则表达式

建立正则两种写法：

flags：标志；一个正则表达式可以带一个或多个标志。分为三种：g、i、m
g：全局模式，即在所以字符串中被应用。
i：不区分大小写模式。
m：多行模式，即查询多行文本。
pattern：即正则表达式

一些常用的符号意义

[]:查找方括号之间满足条件的字符
[^]:查找不满足条件的字符
.:查找除换行符之外的单个任意字符，并显示该字符
\w \W:查找单词/非单词字符；单词包括：A-Z、a-z、0-9、下划线；(\w==[a-zA-Z0-9 ] \W==[^a-zA-Z0-9_ ])
\d \D:查找数字/非数字字符
\s \S：查找空白\非空白字符；空白字符有：空格、制表符、换行符、回车、换页符、垂直换行符
\b \B:查找单词为/非边界的单词
\n：换行符
\f：换页符
\r：回车
\t：制表符
：匹配包含前面字符零个或多个的字符；等价{0，}
+：匹配包含前面字符一个或多个的字符；等价{1，}
？:匹配包含前面字符零个或一个的字符；等价{0,1}。或指明一个非贪婪限定符
{n}：匹配n个前面的字符
{n，}：匹配至少个前面的字符
{n，m}：匹配n到m之间（包含）个前面的字符
$：以前面字符结尾的字符
^:以前面字符开头的字符
|:或，两者匹配一个
():匹配括号里的并获取匹配内容
常用的一些字符意义基本就是上面这些了（其他还有的话目前自己的水平能用这些就可以了）。

2.网上能搜索到验证邮箱的正则表达式

在一开始需要验证邮箱写正则表达式的时候，先去百度谷歌了一下，看来下放在网上用于验证的表达式，一下列举几个一般能在网上搜到的式子，都是一串串非人类直接读的类似这样&&^[]%%$0-9的一堆（我也不知道我打的什么，随便打的.....0.0），这可不行，居然看不懂...0.0，一下在激发了我的求知欲，得弄懂啊，便去看了各个符号代表的意思，那么接下了就解析一下搜到的正则表达式都说的是些什么鬼......0.0

式一：^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+.[a-zA-Z0-9_-]+$

这一段是我在网上见过最多次数的表达式（感觉是），那么他在说啥呢？还记得^$这两个家伙吧！开始和结束，看来规则在里面的式子了；[]+去匹配里面的内容一次或多次，然后遇到@，即是说 允许匹配的式子里有@且@前面的东东必须是[]里面的内容；匹配完后继续，还有呢！ @后面也要给我是[a-zA-Z0-9_-]+里面的内容，然后还得有个‘.’在这里，‘.’后面也是方括号里的内容，直到遇到$，只是因为在人群中瞟了你一眼，然后就结束了。
注：乍一看，老铁没毛病666，确实有@和‘.’了，但一想不对啊，@前后没有说多少个字符啊，有@和‘.’但如果前面只有一个字符，这肯定是不行的。纳尼....0.0不行？差评...退货

式二：^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$;

网上搜到的第二个，同样来解析下吧！
^嘟嘟...开始了，匹配[]里面的一次多次（老样子），遇到@，再匹配[]里面的一次或多次...0.0，然后遇到‘.’,匹配[]里面的内容,{2,3}即是给我匹配至少2次最多3次，最后又遇到了{1,2}和前面一个括号，咋回事？（黑人问号），莫非这就是传说中的给我匹配括号里面的1到2次吗？
马上去验证了一下，好像不是这么回事，后面{1,2}貌似没他什么事。看来这里还是有问题的..............（摊手0.0）
不知你发现没有，这个例子可以控制位数了，即控制@及‘.’可以拥有多少个字符了。没错，就是这样的。