JavaScript中登录名的正则表达式及解析(0基础)

JeOam 发布于2019-08-22 15:13 / 278人阅读

摘要：简言在中，经常会用到正则表达式来进行模式匹配。要写出正确的正则表达式，先要定义表达式规则。重复在正则表达式中用来表示元素重复出现的次数。给出测试结果如下毛三胖子测试代码根据以上内容，定义你自己的登录名正则表达式吧原文链接

简言

在JavaScript中，经常会用到正则表达式来进行模式匹配。例如，登录名验证，密码强度验证，字符串查找或替换等操作。现在就开始吧，零基础写出你的第一个正则表达式！

在做用户注册时，都会用到登录名正则校验。要写出正确的正则表达式，先要定义表达式规则。假设登录名做如下规则定义：

最短4位，最长16位 {4,16}

可以包含小写大母 [a-z] 和大写字母 [A-Z]

可以包含数字 [0-9]

可以包含下划线 [ _ ] 和减号 [ - ]

根据以上规则，很容易给出正则表达式的字面量如下：

var pattern = /^[a-zA-Z0-9_-]{4,16}$/

测试

测试结果如下：

var pattern = /^[a-zA-Z0-9_-]{4,16}$/;
pattern.test("ifat3") = true
pattern.test("42du") = true
pattern.test("42du-_") = true
pattern.test("_42du") = true
pattern.test("42d") = false
pattern.test("42du42du42du42du1") = false
pattern.test("42du@") = false

测试代码

解析 字面量 / /

正则表达式的字面量定义为包含在一对斜杠（/）之间的字符，例如：

var pattern = /s$/;

上述字面量匹配所有以字母“s”结尾的字符串。

字符类 [ ]

将字符放进方括号内就组成了字符类。一个字符类可以匹配它所包含的任意字符。因此，正则表达式/[abc]/就和字母“a”，“b”，“c”中的任意一个都匹配。

字符类可以使用连字符来表示字符范围。要匹配拉丁小写字母可以使用/[a-z]/。

[a-zA-Z0-9_-]表示匹配任意的拉丁大小写字母，数字再加上下划线和减号。

重复｛｝

在正则表达式中用{ }来表示元素重复出现的次数。

{n,m} 匹配前一项至少n次，但不能超过m次

{n,} 匹配前一项n次或更多次

{n} 匹配前一项n次

[a-zA-Z0-9_-]{4,16} 表示匹配任意的拉丁大小写字母，数字再加上下划线和减号出现最少4次，最多16次。

匹配位置

^ 匹配字符串的开头，在多行检索中，匹配一行的开头

$ 匹配字符串的结尾，在多行检索中，匹配一行的结尾

延伸1

根据以上说明，你一定理解了上述正则表达式所表达的含义，是不是很简单！

假设你对上述规则不满意，想增加一条规则，如下：

首字母只能是大小写字母

很容易变更上述正则表达式如下：

var pattern = /^[a-zA-Z][a-zA-Z0-9_-]{3,15}$/;

给出测试结果如下：

var pattern = /^a-zA-Z{3,15}$/;
pattern.test("ifat3") = true
pattern.test("Ifat3") = true
pattern.test("du42") = true
pattern.test("42du") = false
pattern.test("d42") = false
pattern.test("du42du42du42du421") = false
pattern.test("du42@") = false

测试代码

延伸2

如果允许中文的登录名，变更规则，如下：

首字母只能是大小写字母或中文基本汉字

其它位也可以包含中文基本汉字

给出如下正则表达式：

var pattern = /^[a-zA-Zu4E00-u9FA5][a-zA-Z0-9u4E00-u9FA5_-]{3,15}$/;

其中[u4E00-u9FA5]是汉字的正则匹配，包括基本汉字2万多个，其中u4E00表示汉字“一”，具体请参见“汉字unicode编码范围”。

给出测试结果如下：

var pattern = /^a-zA-Zu4E00-u9FA5{3,15}$/;
pattern.test("ifat3") = true
pattern.test("Ifat3") = true
pattern.test("毛三胖子") = true
pattern.test("42du") = false
pattern.test("d42") = false
pattern.test("du42du42du42du421") = false
pattern.test("du42@") = false

测试代码

根据以上内容，定义你自己的登录名正则表达式吧！

原文链接

海外云主机私有云正则表达式c4 0 正则表达式基础 0基础学javascript 正则正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93274.html

【Amaple教程】3. 模板指令与状态数据（state）

摘要：指令在上使用元素没有设置属性时，自动设置绑定的状态属性名为属性。一个模块的template模板、JavaScript和css之间的关系其实可以如下图表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337); 如果你了解Angular、Vue动态模板，那你将会对Amaple的模板感到很熟悉，在Amaple中，template...

2shou 2019-08-30 13:52 评论0 收藏0
【Amaple教程】3. 模板指令与状态数据（state）

摘要：指令在上使用元素没有设置属性时，自动设置绑定的状态属性名为属性。一个模块的template模板、JavaScript和css之间的关系其实可以如下图表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337); 如果你了解Angular、Vue动态模板，那你将会对Amaple的模板感到很熟悉，在Amaple中，template...

eccozhou 2019-08-01 18:27 评论0 收藏0
【Amaple教程】3. 模板指令与状态数据（state）

摘要：指令在上使用元素没有设置属性时，自动设置绑定的状态属性名为属性。一个模块的template模板、JavaScript和css之间的关系其实可以如下图表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337); 如果你了解Angular、Vue动态模板，那你将会对Amaple的模板感到很熟悉，在Amaple中，template...

xiao7cn 2019-08-22 13:59 评论0 收藏0
爬虫 - 收藏集 - 掘金

摘要：在这之前，还是有必要对一些概念超轻量级反爬虫方案后端掘金前言爬虫和反爬虫日益成为每家公司的标配系统。爬虫修炼之道——从网页中提取结构化数据并保存（以爬取糗百文本板块所有糗事为例） - 后端 - 掘金欢迎大家关注我的专题：爬虫修炼之道上篇爬虫修炼之道——编写一个爬取多页面的网络爬虫主要讲解了如何使用python编写一个可以下载多页面的爬虫，如何将相对URL转为绝对URL，如何限速，...

1fe1se 2019-07-31 10:58 评论0 收藏0