博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【入门】浅谈JS表单验证之邮箱验证
阅读量:5740 次
发布时间:2019-06-18

本文共 2874 字,大约阅读时间需要 9 分钟。

      声明:这是一些写给自己看的文章,总结自己在自学前端路上遇到的一些问题及目前的处理办法,第一次写这类的文章,第一次献给掘金了,我会一直写下去,写给自己看。当然如果你不幸的看到这篇文章(应该没人看到吧...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

你可能感兴趣的文章
我国古代的勾股定理
查看>>
Linux下的C编程实战
查看>>
[32期] html中部分代码与英语单词关系
查看>>
PHP安装环境,服务器不支持curl_exec的解决办法
查看>>
9.1(java学习笔记)正则表达式
查看>>
fopen打开文件失败的问题
查看>>
jQuery|元素遍历
查看>>
sql语句大全
查看>>
RedHat 6 安装配置Apache 2.2
查看>>
Openstack 安装部署指南翻译系列 之 Manila服务安装(Share Storage)
查看>>
underscore.js学习笔记
查看>>
Centos7安装
查看>>
windows下常用命令
查看>>
1.5编程基础之循环控制_29:数字反转
查看>>
iptables的CLUSTER target与以太网交换机的思想
查看>>
组策略 之 设备安装设置
查看>>
人工智能还能干这些?这8种AI应用你可能意想不到
查看>>
实现Hyper-V 虚拟机在不同架构的处理器间迁移
查看>>
linux根目录下的文件解析
查看>>
简单使用saltstack
查看>>