js学习（正则表达式&表单验证）

一、首先了解传统的验证方式

1、非空验证

if(emall==""){
    alert("Emall 不能为空")
    return false
}

2、查找字符串首次出现的位置

var str = "this  is  JavaScript"
var selectFirst = str.indexOf("Java");
console.log(selectFirst);
返回值为 8

3、根据字符串的特殊符号来查找

form.onsubmit=function(){
    var mail=email.value;
    if(mail==""){
        alert("Email不能为空");
        return false;
    }
    if (mail.indexOf("@") == -1) {
        alert("Email格式不正确\n必须包含@");
        return false;
    }
    if (mail.indexOf(".") == -1) {
        alert("Email格式不正确\n必须包含.");
        return false;
    }
    return true;
}

4、验证字符串的长度

if(pwd.length<6){
    alert("密码必须等于或者大于6个字符")
    return false
}

5、判断字符串是否有数字

使用for循环和substring()方法依次截断单个字符，再判断每个字符是否是数字

for (var i = 0; i < user.length; i++) {
    var j = user.substring(i, i + 1);
     if (isNaN(j) == false) {
         alert("姓名中不能包含数字");
         return false;
    }
}

二、正则表达式

正则表达式的语法体现在字符模式上。字符模式是一组特殊格式的字符串，它由一系列特殊字符和普通字符构成，其中每个特殊

字符都包含一定的语义和功能。

根据正则表达式语法规则，大部分字符仅能够描述自身，这些字符被称为普通字符，如所有的字母、数字等

元字符就是拥有特动功能的特殊字符，大部分需要加反斜杠进行标识，以便于普通字符进行区别，而少数元字符，需要加反斜杠，以便转译为普通字符使用。JavaScript 正则表达式支持的元字符如表所示。

语法：

构造函数：var reg=new RegExp(pattern,modifiers）

字面量：var reg=/pattern/modifiers;

pattern:表达式；modifiers:修饰符：

检测一个字符串是否与正则相匹配

语法：reg.test(string)——返回值为布尔值

reg.exec(string)——匹配成功返回数组，并确定其位置，否则返回null

示例：

var str="abc";
var reg=/[a-z]/;   var reg=/[A-Z]/;
console.log(reg.test(str));  
console.log(reg.exec(str));

String类中可以支持正则的方法:

1.search——返回匹配字符串的下标，否则返回-1

2.match——如果没有找到任何匹配的文本，返回 null。否则，它将返回一个数组（依赖于是否具有全局标志 g）

3.replace——返回一个新的字符串

4.split——返回一个字符串数组

示例：

    var str="hello memeda";
    console.log(str.search(/me/));
    console.log(str.search(/me/i));

    var str="1 and 2 and 3";
    console.log(str.match(/\d/));
    console.log(str.match(/\d/g));

var str="hello huyang";
console.log(str.replace(/huyang/,"kgc"));
var str="hello huyang, How are you?huyang";
console.log(str.replace(/huyang/g,"kgc"));

console.log("hello".split(""));
console.log("hello".split("",3));

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在第一个匹配后停止）
m	执行多行匹配

常用的表达式

在正则表达式语法中，放括号表示字符范围。在方括号中可以包含多个字符，表示匹配其中任意一个字符。如果多个字符的编码顺序是连续的，可以仅指定开头和结尾字符，省略中间字符，仅使用连字符~表示。如果在方括号内添加脱字符^前缀，还可以表示范围之外的字符。例如：

表达式	描述
[a-z]	查找任何从小写 a 到小写 z 的字符
[A-Z]	查找任何从大写 A 到大写 Z 的字符
[0-9]	查找任何从 0 至 9 的数字
[abc]	查找括号内的任意一个字符
[^abc]	查找除了括号内的任意字符

匹配

字符范围遵循字符编码的顺序进行匹配。如果将要匹配的字符恰好在字符编码表中特定区域内，就可以使用这种方式表示。

示例：

1.var r = /[a-zA-Z0-9]/g;

使用 Unicode 编码设计，匹配数字

选择匹配

选择匹配类似于 JavaScript 的逻辑与运算，使用竖线|描述，表示在两个子模式的匹配结果中任选一个。例如：
1) 匹配任意数字或字母

1.var r = /\w+|\d+/;

2) 可以定义多重选择模式。设计方法：在多个子模式之间加入选择操作符。

1.var r = /(abc)|(efg)|(123)|(456)/;

为了避免歧义，应该为选择操作的多个子模式加上小括号。

常用的元字符（特殊字符）

元字符	描述
.	查找单个字符，除了换行和行结束符
\w	匹配数字、字母、下划线
\W	匹配非数字、字母、下划线
\d	匹配数字
\D	匹配非数字
\s	匹配空白字符（空格、换行）
\S	匹配非空白字符
\n	匹配换行符
\b	匹配单词边界
\B	匹配非单词边界
\0	查找 NUL字符
\n	查找换行符
\f	查找换页符
\r	查找回车符
\t	查找制表符
\v	查找垂直制表符
\xxx	查找以八进制数 xxxx 规定的字符
\xdd	查找以十六进制数 dd 规定的字符
\uxxxx	查找以十六进制 xxxx规定的 Unicode 字符

重复匹配

在正则表达式语法中，定义了一组重复类量词，如表所示。它们定义了重复匹配字符的确数或约数。

常用的限定符

字符	描述
*	匹配前面的子表达式零次或多次
+	匹配前面的子表达式一次或多次
？	匹配前面的子表达式零次或一次
{n}	匹配确定的 n 次
{n,}	至少匹配n 次
{n,m}	最少匹配 n 次且最多匹配 m 次

示例：

var s = “ggle gogle google gooogle goooogle gooooogle goooooogle gooooooogle goooooooogle”;

1.如果仅匹配单词 ggle 和 gogle，可以设计：

var s = "ggle gogle google gooogle goooogle gooooogle goooooogle gooooooogle goooooooogle";
// var r = /go?gle/g;
var r = /go{0,1}gle/g;
var a = s.match(r);
console.log(a)

量词?表示前面字符或子表达式为可有可无，等效于：

var s = "ggle gogle google gooogle goooogle gooooogle goooooogle gooooooogle goooooooogle";
var r = /go?gle/g;
var a = s.match(r);
console.log(a)

2. 如果匹配第 4 个单词 gooogle，可以设计：

var s = "ggle gogle google gooogle goooogle gooooogle goooooogle gooooooogle goooooooogle";
var r = /go{3}gle/g;
var a = s.match(r);
console.log(a)

3.如果匹配第 4 个到第 6 个之间的单词，可以设计：

var s = "ggle gogle google gooogle goooogle gooooogle goooooogle gooooooogle goooooooogle";
var r = /go{3,5}gle/g;
var a = s.match(r);
console.log(a)

4.如果匹配所有单词，可以设计：

var s = "ggle gogle google gooogle goooogle gooooogle goooooogle gooooooogle goooooooogle";
var r = /go*gle/g;
var a = s.match(r);
console.log(a)

5.如果匹配包含字符“o”的所有词，可以设计：

var s = "ggle gogle google gooogle goooogle gooooogle goooooogle gooooooogle goooooooogle";
var r = /go+gle/g;
var a = s.match(r);
console.log(a)

量词+表示前面字符或子表达式至少出现 1 次，最多重复次数不限。等效于：

var s = "ggle gogle google gooogle goooogle gooooogle goooooogle gooooooogle goooooooogle";
var r = /go{1,}gle/g;
var a = s.match(r);
console.log(a)

边界连词

边界就是确定匹配模式的位置，如字符串的头部或尾部，具体说明如表所示。

量词	描述
^	匹配开头，在多行检测中，会匹配一行的开头
$	匹配结尾，在多行检测中，会匹配一行的结尾

示例：

var s = “how are you”

1.匹配最后一个单词

var s = "how are you"
var r = /\w+$/;
var a = s.match(r); //返回数组["you"]
console.log(a)

2.匹配第一个单词

var s = "how are you"
var r = /^\w+/;
var a = s.match(r); 
console.log(a)

3.匹配每一个单词

var s = "how are you"
var r = /\w+/g;
var a = s.match(r);
console.log(a)

声明量词

声明表示条件的意思。声明词量包括正向声明和反向声明两种模式

正向声明

指定匹配模式后面的字符必须被匹配，但又不返回这些字符。语法格式如下：

匹配模式 (?= 匹配条件)

声明包含在小括号内，它不是分组，因此作为子表达式。

反向声明

与正向声明匹配相反，指定接下来的字符都不必被匹配。语法格式如下：

匹配模式(?! 匹配条件)

子表达式

使用小括号可以对字符模式进行任意分组，在小括号内的字符串表示子表达式，也称为子模式。子表达式具有独立的匹配功能，保存独立的匹配结果；同时，小括号后的量词将会作用于整个子表达式。

通过分组可以在一个完整的字符模式中定义一个或多个子模式。当正则表达式成功地匹配目标字符串后，也可以从目标字符串中抽出与子模式相匹配的子内容。

示例：

var s = "ab=21, bc=45, cd=43";
var r = /(\w+)=(\d*)/g;
// while (a = r.exec(s)) {
//     console.log(a); }
console.log(r.exec(s)[0])

反向引用

在字符模式中，后面的字符可以引用前面的子表达式。实现方法如下：

\+ 数字

数字指定了子表达式在字符模式中的顺序。如“\1”引用的是第 1 个子表达式，“\2”引用的是第 2 个子表达式。

示例1：

在正则表达式对象的 test() 方法中，以及字符串对象的 match() 和 search() 等方法中使用。在这些方法中，反向引用的值可以从 RegExp() 构造函数中获得。

var s = "abcdefghijklmn";
var r = /(\w)(\w)(\w)/;
r.test(s);
console.log(RegExp.$1); //返回第1个子表达式匹配的字符a
console.log(RegExp.$2); //返回第2个子表达式匹配的字符b
console.log(RegExp.$3); //返回第3个子表达式匹配的字符c

示例2：

var s = "abcbcacba";
var r = /(\w)(\w)(\w)\2\3\1\3\2\1/;
var b = r.test(s); //验证正则表达式是否匹配该字符串
console.log(b); //返回true

在上面示例的正则表达式中，“\1”表示对第 1 个反向引用 (\w) 所匹配的字符 a 进行引用，“\2”表示对第 2 个反向引用 (\w) 所匹配的字符串 b 进行引用，“\3”表示对第 3 个反向引用 (\w) 所匹配的字符 c 进行引用。

示例3：

可以在字符串对象的 replace() 方法中使用。通过使用特殊字符序列$1、$2、$3 等来实现。例如，在下面的示例中将颠倒相邻字母和数字的位置。

var s = "aa11bb22c3d4e5f6";
var r = /(\w+?)(\d+)/g;//匹配任意连续的字母
var b = s.replace(r,"$2$1");
console.log(b); //返回字符串“aa11bb22c3 d4e5f6”

在上面例子中，正则表达式包括两个分组，第 1 个分组匹配任意连续的字母，第 2 个分组匹配任意连续的数字。在 replace() 方法的第 2 个参数中，$1 表示对正则表达式中第 1 个子表达式匹配文本的引用，而 $2 表示对正则表达式中第 2 个子表达式匹配文本的引用，通过颠倒 $1 和 $2 标识符的位置，即可实现字符串的颠倒来替换原字符串。

原文链接：https://blog.csdn.net/inputlife/article/details/109109296