简言

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

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

  • 最短4位,最长16位 {4,16}
  • 可以包含小写大母 [a-z] 和大写字母 [A-Z]
  • 可以包含数字 [0-9]
  • 可以包含下划线 [ _ ] 和减号 [ - ]

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

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

测试

测试结果如下:

var pattern = /[1]{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 = /[2][a-zA-Z0-9_-]{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-Z\u4E00-\u9FA5][a-zA-Z0-9\u4E00-\u9FA5_-]{3,15}$/;

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

给出测试结果如下:

var pattern = /[3][a-zA-Z0-9\u4E00-\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

测试代码

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

原文链接


  1. a-zA-Z0-9_- ↩︎

  2. a-zA-Z ↩︎

  3. a-zA-Z\u4E00-\u9FA5 ↩︎

JavaScript中登录名的正则表达式及解析(0基础)的更多相关文章

  1. SQLServer中登录名的用户名配置

    其实这个问题困扰我很久了. 今夏(13.7)实习的时候第一次接触sqlserver 当时是统一安排,按部就班的做就行. 那时候链接数据库用的id是sa. 后来自己做小程序时候举得不管什么都用sa登录好 ...

  2. JavaScript中的prototype和__proto__细致解析

    最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...

  3. SQl Server 中登录名 、用户、角色、概念一览

      转载:http://www.2cto.com/database/201306/216922.html       数据库,角色,用户,安全        登录SQL server 2008可以用w ...

  4. JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法

    今天在程序中出现一个bugger ,调试了好久,最后才发现,原来是这个问题. 做了一个实验: alert(parseInt("01")),当这个里面的值为01====>07时 ...

  5. Javascript中的undefined、null、""、0值和false的区别总结

    在程序语言中定义的各种各样的数据类型中,我们都会为其定义一个"空值"或"假值",比如对象类型的空值null,.NET Framework中数据库字段的空值DBN ...

  6. Javascript中那些你不知道的事之-- false、0、null、undefined和空字符串

    话不多说直接进入主题:(如果有写的不对的地方欢迎指正) 我们先来看看他们的类型分别是什么: typeof类型检测结果 结论:false是布尔类型对象,0是数字类型对象,null是object对象,un ...

  7. Javascript中使用replace()方法+正则表达式替换掉所有字符

    Js中的replace方法,只能替换掉第一次匹配到的字符,   而我们经常需要替换一个字符串中所有的匹配字符,这时候可以用正则表达式: str.replace(/a/g,"b"); ...

  8. JavaScript中常用的数据输出方式解析

    在js中,一般使用如下几种方式进行数据的输出: 1. 在浏览器的控制台输出 浏览器F12打开浏览器控制台(一般前端开发人员必备浏览器为谷歌浏览器,下面就以谷歌浏览器为例对控制台尽心解析): 1.1 E ...

  9. JavaScript中原型链存在的问题解析

    我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function ...

随机推荐

  1. 洛谷P3386——二分图匹配

    题目:https://www.luogu.org/problemnew/show/P3386 二分图匹配模板,注意左部点只dfs未匹配点. 代码如下: #include<iostream> ...

  2. javascript私有属性失效及解决方案

    1.js创建私有属性的方法 在 javascript 中所有对象的成员是公有的 构造函数也是如此: function Gadget ( ) { this.name = ' jack '; this.p ...

  3. maven学习八 关于maven的version

      在一个有继承关系的POM文件中,父项目中有如下定义: <dependencyManagement> <dependency> <groupId>com.type ...

  4. ceph 删除了osd但是osd目录保存完整如何恢复

    1. 这里假设有一个osd被删除了 执行下列步骤删除: ceph osd out osd.0 service ceph stop osd.0 ceph osd crush remove osd.0 c ...

  5. 【248】◀▶IEW-Unit13

    Unit 13 Technology 流程图讲解 1.model1对应图片讲解 2.Model1范文分析 Model 1 The ice cream making process has five k ...

  6. Oracle数据去重

    一.完全重复数据去重方法    具体思路是,首先创建一个临时表,然后将DISTINCT之后的表数据插入到这个临时表中;然后清空原表数据;再讲临时表中的数据插入到原表中;最后删除临时表. 对于表中完全重 ...

  7. ACM-ICPC2018南京网络赛 AC Challenge(一维状压dp)

    AC Challenge 30.04% 1000ms 128536K   Dlsj is competing in a contest with n (0 < n \le 20)n(0<n ...

  8. 【转】mysql数据库的数据类型

    一.数值类型            Mysql支持所有标准SQL中的数值类型,其中包括:                严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC ...

  9. docker-compose是个好东西,越用越香

     回顾前文 前文演示了在单一容器中部署 Nginx和ASP.NET Core WebApp, 正在前文评论区某大牛指出的,容器化部署 nginx+ASP.NET Core 有更符合实战的部署选择:多容 ...

  10. Unity T4M 中文讲解

    http://blog.csdn.net/tianmao111/article/details/46482963 现在在u3d圈里流行了一种地形转换器(或者叫编辑器吧),但是经查阅之后,似乎还没有中文 ...