正则表达式验证表单

Posted 2022-09-09 ruo-shui-yi-fang

正则是用来描述字符规则的，常常用来做表单验证。先说下正则的创建和简单的使用吧！

/ / 是正则表达式的标识符

创建

1. 字面量创建　　 var  reg=/a/;
2. 构造函数创建　　var reg=new RegExp("a");

使用：不能直接使用，需配合方法使用

• 字符：

　　　　str.match(reg)

　　　　str.replace(reg)

•  正则：

　　　　reg.test(str)

特点

1. 筛选出符合条件的子串
2. 替换符合条件的子串
3. 验证字符是否符合规则

需注意正则中的修饰符，写在正则表达式后面／的后面：g表示全局匹配，查找所有；i表示忽略大小写。

正则的表达式较多，我就不列出了。

这个网站比较齐全，可以看下哈！http://tool.oschina.net/uploads/apidocs/jquery/regexp.html

正则就介绍到这里，我做了一个表单验证来感受了下正则的写法。上代码一起感受下吧！

 1     var ouser = document.getElementById("user");
 2     var opass = document.getElementById("pass");
 3     var opass2 = document.getElementById("pass2");
 4     var obtn = document.getElementById("btn");
 5 
 6     // 提前定义每个输入框的成功状态：false为失败，true为成功
 7     var u = p = p2 = false;
 8 
 9     // 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
10     ouser.onblur = function()
11         var reg = /^[\u2E80-\u9FFF\w-]4,20$/;
12         if(reg.test(this.value))
13             this.nextElementSibling.innerhtml = "用户名成功";
14             u = true;
15         else
16             this.nextElementSibling.innerHTML = "用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符";
17             u = false;
18         
19     
20 
21     // 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
22     opass.onblur = function()
23         // 提前定义每种类型的状态：0为没有，1为出现
24         var a=b=c=0;
25         // 是否出现数字a
26         var aReg = /\d/;
27         if(aReg.test(this.value))
28             a = 1;
29         
30         // 是否出现字母b
31         var bReg = /[a-zA-Z]/;
32         if(bReg.test(this.value))
33             b = 1;
34         
35         // 是否出现特殊c
36         var cReg = /[\W]/;
37         if(cReg.test(this.value))
38             c = 1;
39         
40         // 状态累加之后，判断总和，判断难度类型
41         switch(a+b+c)
42             case 1:
43                 this.nextElementSibling.innerHTML = "简单";break;
44             case 2:
45                 this.nextElementSibling.innerHTML = "一般";break;
46             case 3:
47                 this.nextElementSibling.innerHTML = "困难";break;
48         
49         p = true;
50 
51         
52         // 在第一次输入密码时，只要重复密码不为空，都做重复密码的验证
53         if(opass2.value == "") return;
54         if(this.value === opass2.value)
55             opass2.nextElementSibling.innerHTML = "一致";
56             p2 = true;
57         else
58             opass2.nextElementSibling.innerHTML = "不一致";
59             p2 = false;
60         
61     
62 
63     opass2.onblur = function()
64         if(this.value === opass.value)
65             this.nextElementSibling.innerHTML = "一致";
66             p2 = true;
67         else
68             this.nextElementSibling.innerHTML = "不一致";
69             p2 = false;
70         
71     
72 
73     obtn.onclick = function()
74         // 提交时，判断所有输入框的状态必须全为true
75         if(u && p && p2)
76             alert("ok")
77         else
78             // 只要有一个不为true，都单独判断，找到真正的错误
79             if(!u)
80                 alert("用户名error")
81             
82             if(!p)
83                 alert("密码error")
84             
85             if(!p2)
86                 alert("重复密码error")
87             
88         
89     

之前没有正则的时候做表单验证很麻烦，用正则几行代码就可以判断是否满足，是不是很好用呢。正则随便怎么写都行，但要知道写的是设么规则，根据这个规则能写出正确的字符哦。很多人会觉得正则很难，看上去跟乱码一样，但如果一点点的拆分开来，没有那么难。可以多看看，多写写，感受下到底是什么样的。就像别人一说一都理解，但一敲代码就出错，都是一样的。多练多看！