js学习第13天-CSDN博客

本文链接：https://blog.csdn.net/weixin_50915530/article/details/126636016

#### 正则表达式的概念及作用

概念:字符串正确的规则

作用:前后端交互的过程中，往往有大量数据效验功能,

通过正则对象的本地字符串格式验证，可以大大提高前后端交互的效率，

降低服务器压力。

#### 正则对象的定义

1：构造方法

var reg = new RegExp("格式字符串"，["修饰符"])

test

功能：判断目标字符串是否满足正则对象的格式，返回布尔值

参数：test(目标字符串)

返回值：布尔值

2：字面量

var reg = /格式字符串/修饰符；

reg = /a/ :代表目标字符串至少包含一个a

通常创建正则用字面量的方式，但以下情况必须用构造方法

var arr = ["dsdds","dcsds","gfgf"]

必须用var reg = new RegExp(arr[0])的方法来创建

### 正则的各种符号

格式字符串：

普通字符+特殊字符

普通字符：普通的字符，看起来是啥就是啥

特殊字符：a:单个字符

b:组合字符

c:各种括号

\转义字符,它不能单独出现

必须和其他字符一起出现构成一个新的字符

与特殊字符结合去掉功能,与普通字符结合添加新功能

### 正则

action:提交数据的服务器文件地址

method:数据提交的方式

get:效率高但安全性低五菱宏光

post:效率低但安全性高武装押运

只能包含a ^$成对出现

至少 //

正则中的特殊字符:

单个字符:

^：正则开始

$ : 正则结束

. : 元字符, 表示任意一个字符

\. : 表示转义字符 \.表示.

+：表示其前面紧挨着的字符至少出现1次等价{1,}

* ：表示其前面出现的字符至少出现过0次等价{0,}

?: 表示其前面出现的字符至少出现过0次，至多1次等价{0,1}

| : 表示或者

组合字符:

\d : 0-9之间的任意一个数字 \d只占一个位置

\D : 除了\d

\w : 数字，字母，下划线 0-9 a-z A-Z _

\W : 除了\w

\s : 空格或者空白等

\S : 除了\s

括号:

{m,n}表示括号前面紧挨着的字符至少出现m个，至多出现n个 : 以b开头至少3个a 至多5个a /^ba{3,5}&/

{m}表示括号前面紧挨着的字符只能出现m个

{m,}表示括号前面紧挨着的字符至少出现m个

[] 表示括号内的任意一个字符

[wd3h]

[a-z]表示任意一个小写字母 [a-zA-Z0-9]

[^ ]表示非括号内的任意一个字符

()一般与或连用表示优先级

[\u4e00-\u9fa5] 任意一个中文字符

### 密码判断

数字字母其他字符三者都有为强其中之一为弱除此之外为中

至少包含 //

只能包含 /^ $/

1：至少包含每一种 //&&//&&// 返回强

2：只包含3个中的一种 /^ $/||/^ $/||/^ $/ 返回弱

### 表单验证

先将框的值默认赋false 当失去焦点时判断正则如果合适返回”正确“标识赋值true 反之错误赋值false

所有的表单只有在都填写正确时 && 才能返回true

密码强弱的判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>测试</button>
</body>
</html>
<script>
var oinput = document.querySelector("input")
var btn = document.querySelector("button")
// 密码判断  数字字母 其他字符 三者都有为强，其中之一为弱 ，除此之外为中

// 至少包含
// +： 表示其前面紧挨着的字符至少出现1次 等价{1,}
 var reg1 = /\d+/;
 var reg2 = /[a-zA-Z]+/
 var reg3 = /[!#$%]+/
//  只能包含
var _reg1 = /^\d+$/
var _reg2 = /^[a-zA-Z]+$/
var _reg3 = /^[!#$%]+$/

btn.onclick = function(){
    // 至少包含每一种 返回强
    if(reg1.test(oinput.value)&&reg2.test(oinput.value)&&reg3.test(oinput.value)){
        console.log("强")
        // 只能包含3个中的一种 返回弱
    }else if(_reg1.test(oinput.value)||_reg2.test(oinput.value)||_reg3.test(oinput.value)){
        console.log("弱")
    }else{
        console.log("中")
    }
}



</script>