下面看一道html表单相关的问题：
编写HTML注册表单,需要字段：用户名,密码,确认密码,邮件,确认邮件,性别(单选),城市(下拉列表),兴趣爱好(多选),提交及重置按钮。
使用JavaScript验证HTML表单。要求如下：1,“登录名”必须是字母数字或下划线, 不能以数字开头；2,密码为6-16位字母、数字或者下划线； 3,密码和确认密码一致；4,邮件地址是正确的邮件地址格式；5,邮件地址和确认邮件地址一致；
正则表达式的一些常用的符号表示含义：
常用的元字符：
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
常用的限定符：
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
我们先来看下题：
首先写html表单；
然后需要做几个正则判断，1、“登录名”必须是字母数字或下划线, 不能以数字开头；2、密码为6-16位字母、数字或者下划线；3、邮件地址是正确的邮件地址格式；
再然后需要判断下两次密码输入是否相符，邮箱是否相符
1、判断登录名，“登录名”必须是字母数字或下划线, 不能以数字开头。
\w表示字母数字下划线，而不能以数字开头所以就需要拼，为[a-zA-Z_],所以合起来就是^[a-zA-Z_]\w*$
2、密码判断，很简单，只要限制一下位数就好，由上面的限定符可以知道它的正则是：\w{6,16}
3、判断邮箱
比如一个的邮箱jxqlovawh@gmail.com
先观察下结构,大概有3部分组成,用户账号部分,这是第一部分
@ 是第二部分
邮箱域名部分，这里是gmail.com
先匹配用户账户部分，用户账号，用户账号我先简单的假设必须为字母数字或下划线，且不能为空，那么该怎么办？
\w 表示表示一个字母、数字或下划线字符
等价于[a-zA-Z0-9_]
那么用户账号对应的正则就是\w+
+ 表示啥
表示至少匹配一次
也就是说用户账号至少一个字符
然后第二部分一个@字符，对应的正则匹配直接为 @
第三部分邮箱域名部分
比如这些域名都是合法的
gmail.com yahoo.com.cn 163.com sina.com.cn sina.com
都有啥共同点
都是一个字符串带一个句点，然后重复1次或者多次
一个字符串带一个句点该如何表示呢？
前面说了单个字符用\w表示
那一个非空字符串就用\w+表示
然后句点如何表示呢？
直接用 .?
不行
因为 . 在正则里面表示除了换行符以外的任意字符 任意单个字符
那咋办呢？
正则表达式当然也提供了机制
答案就是用反斜杠转义
所以句点用 \. 表示
所以域名部分的正则就是这样了
(\w.)+
圆括号表示啥意思呢？
圆括号表示分组
这样行不行呢？
还不行
(\w.)+ 这个正则只能匹配这种 gmail.com.
yahoo.com.cn.
多了个句点
所以咋办？
那就拆分呗
让最后一部分的com或者cn独立出来
所以这样写 (\w.)+[a-zA-Z]+
因为最后一部分不能为数字也不能为下划线
只能由字母组成
所以是[a-zA-Z]+
[a-zA-Z]匹配任意一个字母字符
可以大写也可以小写
所以合起来整个正则就是
\w+@(\w\.)+[a-zA-Z]+
懂没？
还没完
\w+@(\w\.)+[a-zA-Z]+
这个还不可以匹配邮箱
因为假如说一段文本 abc feichexia@yahoo.com.cn ok
它去匹配这个正则也会返回true
因为它里面有一段是邮箱
所以咋办呢？
我们就需要限定文本首末
不允许首末为其他字符
比如上面的空格
就这样
^\w(\w.)+[a-zA-Z]+$
看看多了^和$
^ 表示必须以这个开头
$ 表示必须以这个结尾
所以现在只有 feichexia@Yahoo.com.cn可以匹配了
abc zs@sina.cn java 就不行了
^\w+@(\w\.)+[a-zA-Z]+$
邮箱账号部分其实还可以是这样
比如 zhagnsan.java
zhang-san.love
zhang-san.love.java
即除了可以包括字母数字下划线外还可以包含连字符 -
因为我们平时的账号也可以包括连字符
那又该如何呢
很简单，增加连字符就好了
^\w+@(\w\.)+[a-zA-Z]+$
修改这个
^[\w-]+@(\w\.)+[a-zA-Z]+$
现在账号部分可以匹配 zhagn-san了
中括号[\w-]表示这个字符可以是字母、数字、下划线或者连字符
现在账号部分可以匹配zhang-san
但是仍不能匹配zhang-san.love，也不能匹配zhangsan.love.java
所以继续修改账号部分正则
观察下规律
账号部分继续拆
拆成两部分
比如zhang-san.love-java.c
可以拆成 zhang-san和.love-java.c
zhang-san 用[\w-]+就可以匹配
.love-java.c-plusplus咋匹配呢？
(\.[\w-]+)+
就可以了
所以账号部分就是[\w-]+(\.[\w-]+)+
最后面的加号表示匹配一次或多次
即最少一次
最少出现一次类似.love-java这种
但这样是错的
比如我的邮箱jxqlovejava@gmail.com
账号jxqlovejava就没有.love-java这种
所以修改+为*
*表示匹配0次或多次
[\w-]+(\.[\w-]+)*
这个就是账号部分的正则了
邮箱域名部分前面推出的正则是 (\w\.)+[a-zA-Z]+
包含两部分 (\w\.)+和[a-zA-Z]+
第一部分(\w\.)+表示gmail.或yahoo.com.这种
基本就这样了吧
其实邮箱域名部分还支持连字符的
^[\w-]+(\.[\w-]+)+@(\w\.)+[a-zA-Z]+$
这个是完整的邮箱正则
^[\w-]+(\.[\w-]+)+@(\w+\.)+[a-zA-Z]+$
js里的正则一般这样写
re = /^[\w-]+(\.[\w-]+)+@(\w+\.)+[a-zA-Z]+$/
这就是一个正则了
然后要匹配邮箱怎么办？
比如我的邮箱 var myEmail = "feichexia@yahoo.com.cn"
很简单
js有一个test方法
re.test(myEmail)就可以了
就是这样了
正则还有一些高级规则
贪婪与非贪婪 正向与负向预查 捕获与非捕获
各种乱七八糟的
给大家推荐一个工具
http://www.cnblogs.com/deerchao/archive/2006/08/24/zhengzhe30fengzhongjiaocheng.html
这个网址有一个工具
http://deerchao.net/tools/regex_tester/index.htm
下载地址上面这个
下下来，这样就不用敲JS代码了
4、密码和邮件是否一直直接判断就可以。
1 <head> 2 <title></title> 3 <script type="text/javascript"> 4 function check() { 5 //判断用户名 6 var re = /^[a-zA-Z_]\w*$/; 7 var msg = getE("username"); 8 var result = re.test(msg); 9 if (!re.test(msg)) { 10 alert("“登录名”必须是字母数字或下划线, 不能以数字开头"); 11 return; 12 } 13 //判断密码 14 var re2 = /\w{6,16}/; 15 var pw = getE("pwd"); 16 if (!re2.test(pw)) { 17 alert("密码为6-16位字母、数字或者下划线"); 18 return; 19 } 20 var pw2 = getE("cPwd"); 21 if (pw != pw2) { 22 alert("两次密码不一致"); 23 return; 24 } 25 //判断邮箱 26 var re3 = /^[\w-]+(\.[\w-]+)+@(\w\.)+[a-zA-Z]+$/; 27 var em = getE("Email"); 28 if (!re3.test(em)) { 29 alert("邮件格式有错误"); 30 return; 31 } 32 33 var em2 = getE("cEmail"); 34 if (em != em2) { 35 alert("两次邮件地址不一致"); 36 return; 37 } 38 } 39 40 function getE(ele) { 41 return document.getElementById(ele).value 42 } 43 </script> 44 </head> 45 <body> 46 <form id="reg" action="" method="post"> 47 <table border="0" cellpadding="0" cellspacing="6px"> 48 <tr> 49 <td> 50 用 户 名：<input type="text" id="username" name="username" /><span> *<!--“登录名”必须是字母数字或下划线, 不能以数字开头；--></span> 51 </td> 52 </tr> 53 <tr> 54 <td> 55 密 码：<input type="password" id="pwd" name="pwd" /><span> *<!--密码为6-16位字母、数字或者下划线--></span> 56 </td> 57 </tr> 58 <tr> 59 <td> 60 确认密码：<input type="password" id="cPwd" name="cPwd" /> 61 </td> 62 </tr> 63 <tr> 64 <td> 65 邮 件：<input type="text" id="Email" name="Email" /> 66 </td> 67 </tr> 68 <tr> 69 <td> 70 确认邮件：<input type="text" id="cEmail" name="cEmail" /> 71 </td> 72 </tr> 73 <tr> 74 <td> 75 性 别：<input name="sex" type="radio" />男<input name="sex" type="radio" />女 76 </td> 77 </tr> 78 <tr> 79 <td> 80 城 市：<select name="city" id="Select1"> 81 <option value="none">选择城市</option> 82 <option value="beijin">北京</option> 83 <option value="shanghai">辽宁</option> 84 <option value="tianjin">山东</option> 85 <option value="guangzhou">河北</option> 86 <option value="taiwan">天津</option> 87 </select> 88 </td> 89 </tr> 90 <tr> 91 <td> 92 兴趣爱好： 93 <input type="checkbox" name="ch" value="1" />运动 94 <input type="checkbox" name="ch" value="2" />旅游 95 <input type="checkbox" name="ch" value="3" />游戏 96 <input type="checkbox" name="ch" value="4" />购物 97 </td> 98 </tr> 99 <tr> 100 <td> 101 <input type="button" value="提交" onclick="check()" /> 102 <input type="reset" value="重置" /> 103 </td> 104 </tr> 105 </table> 106 </form> 107 </body>
在这里由于有很多重复的document.getElementById()方法，所以写成一个单独的方法，减少代码量，每句后面的return是为了阻止后面的验证，只要当前的要求不满足就停止。
扫一扫
1800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
