正则及表单验证
一、正则的概念
正则表达式是一种特殊的字符串模式，用于匹配一组字符串，就好比用模具做产品，而正则就是这个模具，定义一种规则去匹配符合规则的字符
二、创建方式
1.字面量的方式：
/正则表达式/标志位
写在斜杠中间的都成为正则的内容
建议使用字面量的方法
2.构造函数
new RegExp(‘正则表达式’,‘标志位’);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="txt01">
<button id="but01">点击验证</button>
<input type="text" id="txt02">
<button id="but02">点击验证</button>
<!-- <input type="button" value="提交"> -->
<script>
//
/*
如何创建正则表达式？
1. 字面量的方式： /正则表达式/标志位
2. 构造函数： new RegExp('正则表达式','标志位')
*/
var oTxt01 = document.querySelector('#txt01');
var oBut01 = document.querySelector('#but01');
var oTxt02 = document.querySelector('#txt02');
var oBut02 = document.querySelector('#but02');
// 1.构造函数方式
oBut01.onclick = function () {
var str = oTxt01.value;
var ch = /^[a-z]+$/;
var re = new RegExp(ch,'i');
if (!re.test(str)) {
alert('不符合规则,请输入英文字母a-z或A-Z至少一个字符');
} else {
alert('符合规则');
}
}
// 2.字面量的方式
oBut02.onclick = function () {
var str = oTxt02.value;
var re = /^[a-z]+$/i;
if (!re.test(str)) {
alert('不符合规则,请输入英文字母a-z或A-Z至少一个字符');
} else {
alert('符合规则');
}
}
/***
* 由以上就可得值字面量的方式较构造函数的方法更加简便
*/
</script>
</body>
</html>
补充:
js正则的标志位 /g /i
(1) /g 为全局比配表示该表达式将用来在输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加最多只会匹配一个
(2) /i 为忽略大小写表示匹配的时候不区分大小写
(3) /gi 全局匹配 + 忽略大小写
注: 现阶段用的最多的就是这两个,其他请自行百度
三、正则的元字符: 三 三 二 三个一
(一) 三
{} [] ()
1.{}
(1).限制{ } 前的一个或一组字符连续出现的次数
(2).{ m } : 限制{ } 前的一个或一组字符连续出现m次
(3).{ m,} : 限制{ } 前的一个或一组字符连续出现m至无限次
(4).{ m, n } : 限制{ } 前的一个或一组字符连续出现m至n次
2.[]
范围
[a-z]:表示取值的范围为从a-z
[A-z]:表示取值的范围为从A-Z
[0-9]:表示取值的范围为从0-9
[a-zA-z0-9]:表示取值的范围为从a-z和A-Z以及0-9
/^[0-9a-z_]{3,6}$/i
//此正则表示范围从0-9从a-z不分大小写,次数是最少3次最多6次
3.()
组
在组中的东西表是一个整体
/^(中国){3,6}$/;
//此正则表达式为元素中国至少得出现3次最多6次,注:中间元素必须连续是一个整体
/^[\u4e00-\u9fa5]{2,}$/;
//此为所有汉字,2至无数位,汉字的编码值从u4e00到u9fa5
(二) 三
* + ?
1.*
限制 * 前的一个或一组字符连续出现0至无限次
2.+
限制 + 前的一个或一组字符连续出现1至无限次
3.?
限制 ? 前的一个或一组字符连续出现0至1次
//i : 不区分大小写
var re = /o*/i;
//此正则表示字符串中(注意此处 处为内容中)字母o出现次数为0-无限次，无论大小写
var re = /o+/i;
//此正则表示字符串中(注意此处 处为内容中)字母o出现次数为1-无限次，无论大小写
var re = /o?/i;
//此正则表示字符串中(注意此处 处为内容中)字母o出现次数为0-1次，无论大小写
(三)二
^ $
1. ^
(1). 用于正则表达式的开头，表示断头（必须以什么字符开头)
(2). 用于[]的开头部分，表示将[]中的内容取反
[^0-9]//表示内容内容中不能出现0-9中的任何一个字符
2. $
表示断尾（必须以什么字符结尾）
var re = /^o?/i;
//此正则表达式为必须以o开头结尾(意思是被检测的这个字符串的内容中必须是o且出现次数为0-1次)
var re = /^[^0-9]+$/;
//此正则表达式为内容中不可出现数字0-9
(四) 三个一
. | \
1. .
表示只能模糊匹配任意一个字符
2. |
或
3. \
转义符
\d: 表示数字[0 - 9]
\D: 表示非数字[^ 0 - 9]
\s: 表示空白
\S: 表示非空白
\w: 表示字母、数字、下划线
\W: 表示非（字母、数字、下划线)
\b: 表示单词边界
\B: 表示非边界
四、正则的方法
(一)正则.test(字符串);
用于检测提供的目标字符串是否包含正则表达式的匹配内容，返回布尔值，如果包含返回true, 否则返回 false
re.test(str)
//用于检测字符串str中是否符合正则re的规则，即字符串str中是否包含正则re中的内容
(二)正则.exec(字符串);
将正则匹配到的内容以数组(伪数组)的方式返回，没有则返回null
五、扩展：处理正则的字符串方法
1.字符串.match(正则表达式);
将正则匹配到的内容以数组的方式返回，没有则返回null
2. 字符串.search(正则表达式);
在字符串中找到正则匹配内容第一次出现的下标位置，没有匹配到，没有则返回 - 1
3. 字符串.replace(正则，新串)
var str = 'how do you do';
var re = /do/;
console.log(str.search(re, de));
