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()

 var reg=/a/i;     //附加参数为"i",意思为：忽略大小写ignoreCase

             var content=prompt('请输入内容：');

             //验证

             alert(reg.test(content)?'验证通过':'验证失败')    //content里必须包含a

2、exec()

         var reg1=/a/g;

         //附加参数为"g",意思为global：全局匹配，匹配到第一个"a"时，不停止，继续往后匹配，直到字符串完

             var content1='You are an old driver';

             while(true){

                 var b=reg1.exec(content1);    //若content1里有"a",则返回"a";否则返回"null"

                 alert(b)

                 if(!b){

                     break;

                 }

             }

最后写一个练习题：验证一个注册页面

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>登录验证</title>

         <script type="text/javascript">

             window.onload=function(){

                 //获取需要验证的表单内容

                 //JS事件驱动进行表单验证

                 //验证规则

 //var name=document.getElementById('name').value;
　　// 这一行必须放在onload点击事件里面，否则name值为空。

 //因为这一行赋值在页面加载完已经赋值了，然而此时表单并未提交

                 var login=document.getElementById('login');

                 login.onclick=function(){

                     var name=document.getElementById('name').value;

                     var pwd1=document.getElementById('pwd1').value;

                     var riqi=document.getElementById('riqi').value;

                     var reg1=/^[A-Za-z][A-Za-z0-9]{3,15}$/;

                     if(!reg1.test(name)){

                         alert('用户名验证失败')

                     }

                     else{

                         alert('用户名验证成功')

                     }

                     var reg2=/^[a-z\d]{4,10}$/i;

                     if(reg2.test(pwd1)==false){

                         alert('密码验证失败')

                     }

                     else{

                         alert('密码验证成功')

                     }

                     var reg3=/^(19\d{2}|200\d)-(1[0-2]|0[1-9])-(0[1-9]|[1-2]\d|3[0-1])$/;

                     if(reg3.test(riqi)==false){

                         alert('出生日期验证失败')

                     }

                     else{

                         alert('出生日期验证成功')

                     }

                 }

             }

         </script>

     </head>

     <body>

         <from action="" method="post">

             <table cellspacing="0px">

                 <tr>

                     <td>邮箱:</td>

                     <td>

                         <input type="text" id="mail" />

                     </td>

                 </tr>

                 <tr>

                     <td>登录用户名:</td>

                     <td>

                         <input type="text" id="name"/>

                     </td>

                 </tr>

                 <tr>

                     <td>显示名称:</td>

                     <td>

                         <input type="text" />

                     </td>

                 </tr>

                 <tr>

                     <td>密码:</td>

                     <td>

                         <input type="password" id="pwd1" />

                     </td>

                 </tr>

                 <tr>

                     <td>确认密码:</td>

                     <td>

                         <input type="password" id="pwd2" />

                     </td>

                 </tr>

                 <tr>

                     <td>出生日期：</td>

                     <td>

                         <input type="date" id="riqi"/>

                     </td>

                 </tr>

                 <tr>

                     <td colspan="2" align="center">

                         <input type="button" value="注册" id="login"/>

                     </td>

                 </tr>

             </table>

         </from>

     </body>

 </html>

巴特西

JS之正则表达式

最新文章

热门文章