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

      声明:这是一些写给自己看的文章,总结自己在自学前端路上遇到的一些问题及目前的处理办法,第一次写这类的文章,第一次献给掘金了,我会一直写下去,写给自己看。当然如果你不幸的看到这篇文章(应该没人看到吧...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)
不知你发现没有,这个例子可以控制位数了,即控制@及‘.’可以拥有多少个字符了。没错,就是这样的。
式三:.................举不胜举

说了这么多,今天的问题还没有解决,说好的验证邮箱呢?你倒是写个正则表达式出来噻...0.0.......写就写,瞧你那嘚瑟的样........(摊手)0.0
自创:(不发几个图都不知道自己在记录...0.0)

经测试,按上面验证思路基本实现0.0,暂时的思路就这样,也不知道可行不,以后再想到了再填加。
补充:正则表达式运算法则
按照加减法运算法则样,相同优先级从左到右进行运算,不同优先级先高后低进行运算。
那么谁高谁低呢?
如下:


写给自己看的第一篇笔记,主要是怕学习后就忘了,写下来,以后可以回来看。第一次这这类笔记,比记在笔记本上好多了,以后也会以这样的方式来记笔记,挺好的!
一个在前端的路上的蜗牛,没错就是我,我跑得慢,你们都被欺负我......0.0

转载于:https://juejin.im/post/5a24e4356fb9a045204c0cbb

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值