首页 > 代码库 > JS之正则表达式

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="http://www.mamicode.com/注册" id="login"/> 87 </td> 88 </tr> 89 </table> 90 91 </from> 92 </body> 93 </html>

 

JS之正则表达式