前端的正则重要吗?为什么后端能检验正则前端还要去做呢?(ps:这里这要针对登录模块的正则)

312 阅读4分钟

我正在参加「初夏创意投稿大赛」详情请看:初夏创意投稿大赛

一直单纯地认为正则都是后端老哥的事儿,前端只要 split 一把梭就够了。万不得已的时候就网上搜几段正则代码,copy 一下也能用。

一、思考,正则是什么?他有什么用?正则表达式的分类?

定义:是一种匹配字符串的方法,通过一些特殊符号,实现快速查找、删除、替换某个特定字符串

用途:系统运行过程中会产生大量的信息,这些信息有些是非常重要的,有些则仅是告知的信息。如果直接看这么多的信息数据,无法快速定位到的重要信息,如“用户账号登陆失败”“服务启动失败”等信息。这时可以通过正则表达式快速提取“有问题”的信息。如此一来,可以将运维工作变得更加简单、方便

分类:正则表达式的字符串表达方式根据不同的严谨程度与功能分为基本正则表达式与扩展正则表达式。

二、正则的基本使用

使用流程:

1创建正则对象

Let reg = new RegExp(‘a’)
简写 let reg = /正则/

2调用test()方法

Reg.test(‘abc’)
调用正则对象的test方法:  reg.test('需要校验的字符串')
Js中几乎所有的对象都是new创建
New arr 创建数组
New object 对象
New RegExp
New date()
...

独立的语言

写正则时不要加空格,语言是会检测出来的****

原义文本字符:字符串本身的含义

说人话:写什么就是什么

预定义类

预定义类           等价类                                     含义
     .                 [^\r\n]                         除了回车和换行之外的所有字符
    \d                 [0-9]                           数字字符
    \D                 [^0-9]                          非数字字符
    \s                 [\f\n\r\t\v]                    空白字符
    \S                 [^\f\n\r\t\v]                   非空白字符
    \w                 [a-zA-Z_0-9]                    单词字符(字母、下划线、数字)
    \W                 [^a-zA-Z_0-9]                  非单词字符

元字符

元字符:该变字符串本身的含义(相当于js的关键字)【】(){}^$*+|.\?一共11个关键字
【】:字符类,把字符归为一类,把abc归为一类,只要符合其中任何一类即可,全都不是才为false
【^】:负向类,只要有一个不符合测试是字符就是true,必须是测试的字符,只有全都是测试的字符才为false
范围类
【0-9】检测有没有数字
【a-z】检测有没有小写
【A-Z】检测有没有大写
范围类是一个闭区间
范围类是可以连写的,中间什么都不用加例:
【0-9a-zA-Z】09a到小z大A到大Z
友情提示:A-z检测的AISS码,记得用中括号包起来哟

边界类

开头边界:^abc
      正确含义: 检测 以a开头 +  bc的字符串   (^只对a检测)
      错误含义: 检测 以abc开头的字符串    (^把abc当做整体)
结尾边界:/abc$/
 正确含义 :   ab + 以c结尾的字符串   ($只对c检测)
 错误含义:    以abc结尾   ($把abc当做整体)
特殊的语法:严格匹配:开头边界与结尾边界同时存在 /^abc$/必须以a开头+bc结尾严格意义就是abc

范围类

/[0-9]/ : 检测有没有数字
/[a-z]/ : 检测有没有小写字母
/[A-Z]/ : 检测有没有大写字母
范围类特点
   范围类是一个闭区间 :  /[5-8]/ : 包含5,也包含8
   范围类可以连写:  /[0-9a-zA-Z]/ : 大小写字母+数字
  范围类一定是 右边 > 左边 (依据ASCII码)

量词

作用,检测字符与出现的次数
?                       出现零次或一次(最多出现一次 <=1)
+                       出现一次或多次(至少出现一次 >=1)
*                       出现零次或多次(任意次)
{n}                     出现n次
{n,m}                   出现n-m次
{n,}                    出现至少n次(>=n)
replace:(替换,要替换的元素)括号里可以使用正则
()分组,将括号里的元素看做一个字符
|或让两边多选一

思考题(下列log打印的是什么)

    console.log(/lo|ve/.test('lo01v'))
    console.log(/l(o|i)ve/.test('love'))
    console.log(/\w.+/.test('除了梦以外我还能剩下什么.'))

以上输出的是:true true false

修饰符

g:global  全局匹配
I:intentsity  不区分大小写
默认情况下正则只能匹配第一个
默认情况正则区分大小写

三、以为这就完了,给大家准备了一点点常用的正则

名字检测正则

//用户名正则,4到16位(字母,数字,下划线,减号)
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//输出 true
console.log(uPattern.test("caibaojian"));

验证密码

规则

  • 6-16 为组成
  • 必须由数字字母组成
let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\d(a-z)(A-Z)]{6,16}$/;

验证邮箱

规则:

  • 邮箱的名字以‘数字字母下划线-.’几部分组成,但是-/.不能连续出现也不能作为开头 \w+((-\w+)|(.\w+))*;
  • @ 后面可以加数字字母,可以出现多位 @[A-Za-z0-9]+ ;
  • 对@后面名字的补充:多域名 .com.cn ;企业域名 (.|-)[A-Za-z0-9]+)*
  • .com/.cn 等域名 .[A-Za-z0-9]+
let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/

 验证身份证号

规则:

  • 18 位
  • 最后一位是数字或者 X
  • 前 6 位是省市县
  • 后四位是年
  • 后两位是月 01-12
  • 后两位是日 01-31
  • 最后四位
  • 最后一位:X 或者数字
  • 倒数第二位:偶数:女 奇数:男
    小括号分组的作用:分组捕获,不仅可以把大正则匹配信息捕获到,还可以单独捕获到每个小分组的内容
let reg =/^([1-9]\d{5})((19|20)\d{2})(0[1-9]|10|11|12)(0[1-9]|[1-2]\d|30|31)\d{3}(\d|x)$/i;
最近在写后台管理系统,因为之前总是百度,刚好今天有空,整理了一下正则相关知识,也算学习了一下正则的使用吧,最后总结一下正则对于前端正则重要程度和为什么 要学习正则做一解释

首先回答有必要学吗?
1 有必要,不仅要学,还要学全面点,零宽断言,捕获分组,前向引用等都要知道
2 别总把自己限制在前端这个框里面,你先是个程序员才是个前端
正则在前端的应用有哪些?
比如说验证、文本搜索、文本替换、服务配置…。其实并不只有登录或者input使用,所以还是要好好学习的
为什么后端能检验正则前端还要写呢?
1 前端校验便于用户纠正(快速反馈),并且减少服务器压力、节省流量(减少无意义的请求),对用户友好
2 后端校验比前端校验更安全,更可靠,前端校验可以增加用户体验