博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jquery 与正则表达式应用

Posted on 2008-05-04 11:15  linFen  阅读(76528)  评论(0)  编辑  收藏  举报
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>Test</title>   
  6. <script type="text/javascript" language="javascript" src="jquery.js"></script>   
  7. <script type="text/javascript" language="javascript" >   
  8.     function validata(){   
  9.         if($("#username").val()==""){   
  10.             document.write("请输入名字");               
  11.             return false;   
  12.         }   
  13.         if($("#password").val()==""){   
  14.             document.write("请输入密码");   
  15.             return false;   
  16.         }          
  17.         if($("#telephone").val()==""){   
  18.             document.write("请输入电话号码");   
  19.         }   
  20.         if($("#email").val()==""){   
  21.             $("#email").val("shuangping@163.com");   
  22.         }   
  23.     }      
  24.        
  25.     function isInteger(obj){   
  26.            
  27.         reg=/^[-+]?\d+$/;    
  28.         if(!reg.test(obj)){   
  29.             $("#test").html("<b>Please input correct figures</b>");   
  30.         }else{   
  31.             $("#test").html("");   
  32.         }   
  33.     }   
  34.     function isEmail(obj){   
  35.         reg=/^\w{3,}@\w+(\.\w+)+$/;   
  36.         if(!reg.test(obj)){        
  37.             $("#test").html("<b>请输入正确的邮箱地址</b>");   
  38.         }else{   
  39.             $("#test").html("");   
  40.         }   
  41.     }   
  42.     function isString(obj){   
  43.         reg=/^[a-z,A-Z]+$/;   
  44.         if(!reg.test(obj)){   
  45.             $("#test").html("<b>只能输入字符</b>");   
  46.         }else{   
  47.             $("#test").html("");   
  48.         }   
  49.     }   
  50.     function isTelephone(obj){   
  51.         reg=/^(\d{3,4}\-)?[1-9]\d{6,7}$/;   
  52.         if(!reg.test(obj)){   
  53.             $("#test").html("<b>请输入正确的电话号码！</b>");   
  54.         }else{   
  55.             $("#test").html("");   
  56.         }   
  57.     }   
  58.     function isMobile(obj){   
  59.         reg=/^(\+\d{2,3}\-)?\d{11}$/;   
  60.         if(!reg.test(obj)){   
  61.             $("#test").html("请输入正确移动电话");   
  62.         }else{   
  63.             $("#test").html("");   
  64.         }   
  65.     }   
  66.     function isUri(obj){   
  67.         reg=/^http:\/\/[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;   
  68.         if(!reg.test(obj)){   
  69.             $("#test").html($("#uri").val()+"请输入正确的inernet地址");   
  70.         }else{   
  71.             $("#test").html("");   
  72.         }   
  73.     }   
  74.        
  75.     //document加载完毕执行   
  76.     $(document).ready(function() {   
  77.     // do something here   
  78.        
  79.     //隔行换色功能   
  80.     $("p").each(function(i){   
  81.         this.style.color=['red','green','blue','black'][i%2]   
  82.         });   
  83.        
  84.     //eq(2)获取$("p")集合的第3个元素    
  85.     $("p").eq(2).click(function(){$("#display").css("color","blue")});   
  86.        
  87.     //所有test中的p都附加了样式"over"。   
  88.     $("#test>p").addClass("over");   
  89.        
  90.     //test中的最后一个p附加了样式"out"。   
  91.     $("#test p:last").addClass("out");   
  92.        
  93.     //选择同级元素还没看懂   
  94.     //$('#faq').find('dd').hide().end().find('dt').click(function()    
  95.        
  96.     //选择父级元素   
  97.     $("a").hover(   
  98.                 function(){$(this).parents("p").addClass("out")},   
  99.                 function(){$(this).parents("p").removeClass("out")})   
  100.        
  101.        
  102.     //hover鼠标悬停效果，toggle每次点击时切换要调用的函数  ,   
  103.     //trigger(eventtype): 在每一个匹配的元素上触发某类事件,   
  104.     //bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。   
  105.   
  106.     //方法的连写   
  107.     $("#display").hover(function(){   
  108.             $(this).addClass("over");   
  109.         },function(){   
  110.             $(this).removeClass("over");    
  111.         })   
  112.         .click(function(){alert($("#display").text())});   
  113.            
  114.        
  115.        
  116.        
  117.     if($.browser.msie){//判断浏览器，若是ie则执行下面的功能   
  118.            
  119.         //聚焦   
  120.         $("input[@type=text],textarea,input[@type=password]")   
  121.         .focus(function(){$(this).css({background:"white",border:"1px solid blue"})})   
  122.         //也可以这样连着写,   
  123.         //.blur(function(){$(this).css({background:"white",border:"1px solid black"})})   
  124.            
  125.         //失去焦点   
  126.         //css样式可以通过addClass()来添加   
  127.         $("input[@type=text],textarea,input[@type=password]")   
  128.         .blur(function(){$(this).css({background:"white",border:"1px solid black"});});   
  129.     }   
  130.        
  131.     });   
  132.        
  133.        
  134.        
  135. </script>   
  136. <style type="text/css">   
  137. .over{   
  138.     font-size:large;   
  139.     font-style:italic;   
  140. }   
  141. .out{   
  142.     font-size:small;   
  143. }          
  144. </style>   
  145. </head>   
  146.   
  147. <body >   
  148. <div id="display">demo</div>   
  149. <div id="test">   
  150.     <p>adfa<a>dfasfa</a>sdfasdf</p>   
  151.     <p>adfadfasfasdfasdf</p>   
  152.     <p>adfadfasfasdfasdf</p>       
  153.     <p>adfadfasfasdfasdf</p>   
  154. </div>   
  155. <form id="theForm">   
  156.     isString<div><input type="text" id="username" onblur="isString(this.value)"/></div>   
  157.     isInteger<div><input type="text" id="password" onblur="isInteger(this.value)"/></div>   
  158.     isTelephone<div><input type="text" id="telephone" onblur="isTelephone(this.value)"/></div>   
  159.     isMobile<div><input type="text" id="mobile" onblur="isMobile(this.value)"/></div>   
  160.     isEmail<div><input type="text" id="email" onblur="isEmail(this.value)"/></div>   
  161.     isUri<div><input type="text" id="uri" onblur="isUri(this.value)"/></div>   
  162.     <div><input type="button" value="Validata" onclick="return validata();"  /></div>   
  163. </form>   
  164. </body>   
  165. </html>