JS之正则表达式
Posted 近朱朱者赤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS之正则表达式相关的知识，希望对你有一定的参考价值。
一、正则表达的目标：
1、使用表单事件和脚本函数实现表单验证
2、使用String对象和文本框控件常用属性和方法实现客户端验证
二、什么需要表单验证：
1、表单元素是否为空
2、用户名和密码
3、E-mail地址是否正确
4、身份证号是否是数字
三、表单验证思路：
1、获得表单元素值
2、使用javascript的一些方法对数据进行判断
3、当表单提交时，对获取的数据进行验证
四、正则表达式：是一个描述字符模式的对象
第一步：定义正则表达式
第二步：表达式的模式
1、定义正则表达式：
简单模式：
普通方式：var reg=/表达式/附加参数
例：var reg=/white/; 里面必须是white
var reg=/white/g; g是全局匹配，找到表单字符串里所有的white
构造方式：var reg=new RegExp("表达式","附加参数");
var reg=new RegExp("white");
var reg=new RegExp("white","g");
复杂模式：
RegExp常用符号：
这些符号都如何使用呢？下面来看几个例子：
结果为：
五、RegExp方法验证：
正则表达式写出来后，如何验证呢？用test()、exec()方法
test()方法检索字符串中的指定值，返回值时true或false
exec()方法检索字符串中的指定值，返回值是被找到的值，如果没有发现匹配，则返回null
1、test()
1 var reg=/a/i; //附加参数为"i",意思为：忽略大小写ignoreCase 2 var content=prompt(\'请输入内容：\'); 3 //验证 4 alert(reg.test(content)?\'验证通过\':\'验证失败\') //content里必须包含a
2、exec()
1 var reg1=/a/g; 2 //附加参数为"g",意思为global：全局匹配，匹配到第一个"a"时，不停止，继续往后匹配，直到字符串完 3 var content1=\'You are an old driver\'; 4 while(true){ 5 var b=reg1.exec(content1); //若content1里有"a",则返回"a";否则返回"null" 6 alert(b) 7 if(!b){ 8 break; 9 } 10 }
最后写一个练习题：验证一个注册页面
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录验证</title> 6 <script type="text/javascript">
7 window.onload=function(){ 8 //获取需要验证的表单内容 9 //JS事件驱动进行表单验证 10 //验证规则 11 //var name=document.getElementById(\'name\').value;
// 这一行必须放在onload点击事件里面，否则name值为空。 12 //因为这一行赋值在页面加载完已经赋值了，然而此时表单并未提交 13 var login=document.getElementById(\'login\'); 14 login.onclick=function(){ 15 var name=document.getElementById(\'name\').value; 16 var pwd1=document.getElementById(\'pwd1\').value; 17 var riqi=document.getElementById(\'riqi\').value; 18 var reg1=/^[A-Za-z][A-Za-z0-9]{3,15}$/; 19 if(!reg1.test(name)){ 20 alert(\'用户名验证失败\') 21 } 22 else{ 23 alert(\'用户名验证成功\') 24 } 25 var reg2=/^[a-z\\d]{4,10}$/i; 26 if(reg2.test(pwd1)==false){ 27 alert(\'密码验证失败\') 28 } 29 else{ 30 alert(\'密码验证成功\') 31 } 32 var reg3=/^(19\\d{2}|200\\d)-(1[0-2]|0[1-9])-(0[1-9]|[1-2]\\d|3[0-1])$/; 33 if(reg3.test(riqi)==false){ 34 alert(\'出生日期验证失败\') 35 } 36 else{ 37 alert(\'出生日期验证成功\') 38 } 39 } 40 41 } 42 </script> 43 </head> 44 <body> 45 <from action="" method="post"> 46 <table cellspacing="0px"> 47 <tr> 48 <td>邮箱:</td> 49 <td> 50 <input type="text" id="mail" /> 51 </td> 52 </tr> 53 <tr> 54 <td>登录用户名:</td> 55 <td> 56 <input type="text" id="name"/> 57 </td> 58 </tr> 59 <tr> 60 <td>显示名称:</td> 61 <td> 62 <input type="text" /> 63 </td> 64 </tr> 65 <tr> 66 <td>密码:</td> 67 <td> 68 <input type="password" id="pwd1" /> 69 </td> 70 </tr> 71 <tr> 72 <td>确认密码:</td> 73 <td> 74 <input type="password" id="pwd2" /> 75 </td> 76 </tr> 77 <tr> 78 <td>出生日期：</td> 79 <td> 80 <input type="date" id="riqi"/> 81 </td> 82 </tr> 83 84 <tr> 85 <td colspan="2" align="center"> 86 <input type="button" value="注册" id="login"/> 87 </td> 88 </tr> 89 </table> 90 91 </from> 92 </body> 93 </html>
以上是关于JS之正则表达式的主要内容，如果未能解决你的问题，请参考以下文章