javascript之jQuery 插件

Validation

1.引入jQuery库和Validation插件

[javascript] view plaincopy

1. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
2. <script src="lib/jquery.validate.js" type="text/javascript"></script>  

2.确定哪个表单需要被验证

[javascript] view plaincopy

1. $(document).ready(function(){  
2.     $("#commentForm").validate();  
3. });  

3.针对不同的字段,进行验证规则编码

[html] view plaincopy

1. <form class="cmxform" id="commentForm" method="get" action="">  
2. <fieldset>  
3.   <legend>一个简单的验证带验证提示的评论例子</legend>  
4.   <p>  
5.     <label for="cusername">姓名</label>  
6.     <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />  
7.   </p>  
8.   <p>  
9.     <label for="cemail">电子邮件</label>  
10.     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />  
11.   </p>  
12.   <p>  
13.     <label for="curl">网址</label>  
14.     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />  
15.   </p>  
16.   <p>  
17.     <label for="ccomment">你的评论</label>  
18.     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>  
19.   </p>  
20.   <p>  
21.     <input class="submit" type="submit" value="提交"/>  
22.   </p>  
23. </fieldset>  
24. </form>  

[html] view plaincopy

1. class="required"为必须填写,minlength="2"为最小长度为2  
2. class="required email"为必须填写和内容需要符合email的格式  
3. class="url"为url格式验证  

jquery.metadata.js

[javascript] view plaincopy

1. 支持固定格式解析的jQuery插件  
2. 可将验证规则全部编写到class属性中.  

改变调用验证方法

[javascript] view plaincopy

1. <script type="text/javascript">  
2. $(document).ready(function(){  
3.       $("#commentForm").validate({meta: "validate"});  
4. });  
5. </script>  

html调用方法

[html] view plaincopy

1. <form class="cmxform" id="commentForm" method="get" action="">  
2. <fieldset>  
3.   <legend>一个简单的验证带验证提示的评论例子</legend>  
4.   <p>  
5.     <label for="cusername">姓名</label>  
6.     <em>*</em><input id="cusername" name="username" size="25"  class="{validate:{required:true, minlength:2}}" />  
7.   </p>  
8.   <p>  
9.     <label for="cemail">电子邮件</label>  
10.     <em>*</em><input id="cemail" name="email" size="25"   class="{validate:{required:true, email:true}}"  />  
11.   </p>  
12.   <p>  
13.     <label for="curl">网址</label>  
14.     <em>  </em><input id="curl" name="url" size="25"  value=""   class="{validate:{url:true}}" />  
15.   </p>  
16.   <p>  
17.     <label for="ccomment">你的评论</label>  
18.     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="{validate:{required:true}}" ></textarea>  
19.   </p>  
20.   <p>  
21.     <input class="submit" type="submit" value="提交"/>  
22.   </p>  
23. </fieldset>  
24. </form>  

通过字段name属性值来匹配验证规则

• 在$("#commentForm").validate()方法中增加rules属性
• 通过每个字段的name属性值来匹配验证规则
• 定义验证规则:例如required:true,email:true等
  

[javascript] view plaincopy

1.  <script type="text/javascript">  
2.  $(document).ready(function(){  
3.   
4. $("#commentForm").validate({  
5.     rules: {  
6.         username: {  
7.             required: true,  
8.             minlength: 2  
9.         },  
10.         email: {  
11.             required: true,  
12.             email: true  
13.         },  
14.         url:"url",  
15.         comment: "required"  
16.     }  
17.   });  
18.   
19.  });  
20.  </script>  

自定义验证信息

[javascript] view plaincopy

1. $(document).ready(function(){  
2.   
3. ("#commentForm").validate({  
4. rules: {  
5.     username: {  
6.         required: true,  
7.         minlength: 2  
8.     },  
9.     email: {  
10.         required: true,  
11.         email: true  
12.     },  
13.     url:"url",  
14.     comment: "required"  
15. },  
16.   
17. messages: {  
18.     username: {  
19.         required: '请输入姓名',  
20.         minlength: '请至少输入两个字符'  
21.     },  
22.     email: {  
23.         required: '请输入电子邮件',  
24.         email: '请检查电子邮件的格式'  
25.     },  
26.     url: '请检查网址的格式',  
27.     comment: '请输入您的评论'  
28. },    
29.   
30. errorElement: "em", //可以用其他标签，记住把样式也对应修改  
31. success: function(label) {  
32.     //label指向上面那个错误提示信息标签em  
33.     label.text(" ")             //清空错误提示消息  
34.         .addClass("success");   //加上自定义的success类  
35. }  
36.   
37.  });  
38.   
39. });  

[html] view plaincopy

1. <form class="cmxform" id="commentForm" method="get" action="">  
2. <fieldset>  
3.   <legend>一个简单的验证带验证提示的评论例子</legend>  
4.   <p>  
5.     <label for="cusername">姓名</label>  
6.     <em>*</em><input id="cusername" name="username" size="25" />  
7.   </p>  
8.   <p>  
9.     <label for="cemail">电子邮件</label>  
10.     <em>*</em><input id="cemail" name="email" size="25"  />  
11.   </p>  
12.   <p>  
13.     <label for="curl">网址</label>  
14.     <em>  </em><input id="curl" name="url" size="25"  value="" />  
15.   </p>  
16.   <p>  
17.     <label for="ccomment">你的评论</label>  
18.     <em>*</em><textarea id="ccomment" name="comment" cols="22" rows="2"></textarea>  
19.   </p>  
20.   <p>  
21.     <input class="submit" type="submit" value="提交"/>  
22.   </p>  
23. </fieldset>  
24. </form>  

美化验证信息

[javascript] view plaincopy

1. em { font-weight: bold; padding-right: 1em; vertical-align: top; }  
2. em.error {  
3.   background:url("images/unchecked.gif") no-repeat 0px 0px;  
4.   padding-left: 16px;  
5. }  
6. em.success {  
7.   background:url("images/checked.gif") no-repeat 0px 0px;  
8.   padding-left: 16px;  
9. }  

[javascript] view plaincopy

1.  <script type="text/javascript">  
2.  $(document).ready(function(){  
3.   
4. //自定义一个验证方法  
5. $.validator.addMethod(  
6. "formula", //验证方法名称  
7. function(value, element, param) {//验证规则  
8.     return value == eval(param);  
9. },   
10. '请正确输入数学公式计算后的结果'//验证提示信息  
11. );  
12.   
13. $("#commentForm").validate({  
14.     rules: {  
15.         username: {  
16.             required: true,  
17.             minlength: 2  
18.         },  
19.         email: {  
20.             required: true,  
21.             email: true  
22.         },  
23.         url:"url",  
24.         comment: "required",  
25.         valcode: {  
26.             formula: "7+9"    
27.         }  
28.     },  
29.       
30.     messages: {  
31.         username: {  
32.             required: '请输入姓名',  
33.             minlength: '请至少输入两个字符'  
34.         },  
35.         email: {  
36.             required: '请输入电子邮件',  
37.             email: '请检查电子邮件的格式'  
38.         },  
39.         url: '请检查网址的格式',  
40.         comment: '请输入您的评论'  
41.     },    
42.       
43.     errorElement: "em",             //用来创建错误提示信息标签  
44.     success: function(label) {          //验证成功后的执行的回调函数  
45.         //label指向上面那个错误提示信息标签em  
46.         label.text(" ")             //清空错误提示消息  
47.             .addClass("success");   //加上自定义的success类  
48.     }  
49.   
50.   
51.   });  
52.   
53.  });  
54.  </script>  

Form

简单地提交表单

[html] view plaincopy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html>  
3.   <head>  
4.   <title>demo1.html</title>  
5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
6.   <script src="../../scripts/jquery.js" type="text/javascript"></script>  
7.   <script src="lib/jquery.form.js" type="text/javascript"></script>  
8.    <script type="text/javascript">            
9.    $(document).ready(function() {    
10.            $('#myForm').ajaxForm(function() {     
11.                $('#output1').html("提交成功！欢迎下次再来！").show();      
12.            });     
13.    });     
14.    </script>   
15.   </head>  
16.     
17.   <body>  
18.     <h3> Demo 1 : form插件的使用--ajaxForm(). </h3>  
19.     <form id="myForm" action="demo.php" method="post">   
20.         名称： <input type="text" name="name" /> <br/>  
21.         地址： <input type="text" name="address" /><br/>   
22.         自我介绍： <textarea name="comment"></textarea> <br/>  
23.         <input type="submit" id="test" value="提交" /> <br/>  
24.         <div id="output1" style="display:none;"></div>  
25.     </form>  
26.   </body>  
27. </html>  

[html] view plaincopy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html>  
3. <head>  
4. <title></title>  
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
6. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
7. <script src="lib/jquery.form.js" type="text/javascript"></script>  
8.    <script type="text/javascript">            
9.    $(document).ready(function() {    
10.          $('#test').click(function(){  
11.               var queryString = $('#myForm').formSerialize();  
12.               alert(queryString);  
13.               // 组装的数据可以用于 $.get, $.post, $.ajax ...  
14.               $.post('demo.php', queryString ,function(data){  
15.                   $('#output1').html("提交成功！欢迎下次再来！").show();        
16.               });   
17.               return false;  
18.          })  
19.            
20.          //demo2  
21.          $('#test2').click(function(){  
22.               var queryString = $('#myForm2 *').fieldValue();   
23.               alert(queryString);  
24.               return false;  
25.          })  
26.            
27.          //重置表单  
28.          $('#test3').click(function(){  
29.              $('#myForm').resetForm();  
30.              $('#myForm2').resetForm();  
31.          })  
32.           //清除表单  
33.          $('#test4').click(function(){  
34.              $('#myForm').clearForm();  
35.              $('#myForm2').clearForm();  
36.          })  
37.    });     
38.    </script>   
39.   </head>  
40.     
41.   <body>  
42.     <h3> Demo 3 : form插件的使用--formSerialize()组装表单数据,用于jQuery中的.ajax(). </h3>  
43. <!-- demo1 -->  
44. <form id="myForm" action="demo.php" method="post">   
45.     名称： <input type="text" name="name" /> <br/>  
46.     地址： <input type="text" name="address" /><br/>   
47.     自我介绍： <textarea name="comment"></textarea> <br/>  
48.     <input type="submit" id="test" value="提交" /> <br/>  
49.     <div id="output1" style="display:none;"></div>  
50. </form>  
51.   
52. <br/><br/><br/>  
53.   
54. <!-- demo2 -->  
55. <form id="myForm2" action="demo.php" method="post">   
56.     名称： <input type="text" name="name2" class="special"/> <br/>  
57.     地址： <input type="text" name="address2" /><br/>   
58.     自我介绍： <textarea name="comment2" class="special"></textarea> <br/>  
59.     单选：男<input type="radio" name="a" value="男" checked/>   
60.        女<input type="radio" name="a" value="女"/><br/>  
61.     <input type="submit" id="test2" value="提交" /> <br/>  
62. </form>  
63.   
64. <br/><br/><br/>  
65. <input type="button" id="test3" value="重置所有表单" /> <br/>  
66. <input type="button" id="test4" value="清除所有表单" /> （提示：发现单选框以前选中的，也被清除了，跟重置有点区别！）<br/>  
67.   
68.   
69.   </body>  
70. </html>  

[javascript] view plaincopy

1.  // json  
2.         $(document).ready(function() {   
3.             $('#myForm').ajaxForm({   
4.                 // 声明 服务器返回数据的类型.  
5.                 dataType:  'json',   
6.                 success:   processJson   
7.             });   
8.         });  
9.           
10.         function processJson(data) {   
11.                 // 'data'是一个json对象，从服务器返回的.  
12.                 $('#jsonOut').html(data.name +  "   "+data.address + "  "+data.comment);   
13.         }  
14.   
15. // xml   
16.     $(document).ready(function() {   
17.         $('#xmlForm').ajaxForm({   
18.             // 声明 服务器返回数据的类型.  
19.             dataType:  'xml',   
20.             success:   processXml   
21.         });   
22.     });   
23.       
24.     function processXml(responseXML) {   
25.         // 'responseXML' 是一个XML的文档 ，从服务器返回的.  
26.         var name = $('name', responseXML).text();   
27.         var address = $('address', responseXML).text();   
28.         var comment = $('comment', responseXML).text();   
29.         $('#xmlOut').html(name +  "   "+address + "  "+comment);   
30.     }  
31.   
32. // html   
33.     $(document).ready(function() {   
34.         $('#htmlForm').ajaxForm({   
35.             // 用服务器返回的数据 更新 id为 htmlcssrain 的内容.  
36.             target: '#htmlOut',   
37.             success: function() {   
38.                 $('#htmlOut').fadeIn('slow');   
39.             }   
40.         });   
41.     });  

SimpleModal

[javascript] view plaincopy

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
5. <title>SimpleModal Basic Modal Dialog </title>  
6. <!-- Page styles -->  
7. <link type='text/css' href='css/demo.css' rel='stylesheet' />  
8. <!-- Contact Form CSS files -->  
9. <link type='text/css' href='css/basic.css' rel='stylesheet' />  
10. <link type='text/css' href='css/box.css' rel='stylesheet' />  
11. </head>  
12. <body>  
13. <div id='container'>  
14.   
15.     <div id='logo'>  
16.         <h1>Simple<span><a href="http://www.ericmmartin.com/projects/simplemodal-demos/">Modal</a></span></h1>  
17.         <span class='title'>一个简单的遮罩层，可以制作提示框，对话框，弹出层，弹出iframe等...</span>  
18.     </div>  
19.     <div id='content'>  
20.         <div id='basic-modal'>  
21.             <p>提示框-ok：<input type='button' name='basic' value='Demo' class='open-basic-dialog-ok'/> or <a href='#' class='open-basic-dialog-ok'>Demo</a></p>  
22.             <p>提示框-warn：<input type='button' name='basic' value='Demo' class='open-basic-dialog-warn'/> or <a href='#' class='open-basic-dialog-warn'>Demo</a></p>  
23.             <p>弹出iframe：<input type='button' name='basic' value='Demo' class='open-basic-ifr'/> or <a href='#' class='open-basic-ifr'>Demo</a></p>  
24.         </div>  
25.     </div>  
26.       
27.     <!-- 弹出内容 -->  
28.   
29.     <div id="basic-dialog-ok">  
30.         <!-- 普通弹出层 [[ -->    
31.         <div class="box-title show"><h2>提示</h2></div>    
32.         <div class="box-main">  
33.             <div class="tips">        
34.                 <span class="tips-ico">  
35.                     <span class="ico-ok"><!-- 图标class可以为： ico-ok , ico-error , ico-info , ico-question , ico-warn , ico-wait --></span>  
36.                 </span>        
37.                 <div class="tips-content">          
38.                     <div class="tips-title">申请成功，我们将短信通知您！</div>          
39.                     <div class="tips-line"></div>       
40.                 </div>      
41.             </div>  
42.             <div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>  
43.         </div>    
44.         <!-- 普通弹出层 ]] -->  
45.     </div>  
46.   
47.     <div id="basic-dialog-warn">  
48.         <!-- 普通弹出层 [[ -->    
49.         <div class="box-title show"><h2>提示</h2></div>    
50.         <div class="box-main">  
51.             <div class="tips">        
52.                 <span class="tips-ico">  
53.                     <span class="ico-warn"><!-- 图标 --></span>  
54.                 </span>        
55.                 <div class="tips-content">          
56.                     <div class="tips-title">系统繁忙，请稍候重试</div>          
57.                     <div class="tips-line"></div>       
58.                 </div>      
59.             </div>  
60.             <div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>  
61.         </div>    
62.         <!-- 普通弹出层 ]] -->  
63.     </div>  
64.   
65.     <div id="ifr-dialog" >  
66.         <!-- iframe弹出层 [[ -->    
67.         <iframe frameborder="0" scrolling="no" id="ifr-dialog-container" src="javascript:;" class="box-iframe"></iframe>  
68.         <!-- iframe弹出层 ]] -->  
69.     </div>  
70.   
71. </div>  
72. <!-- Load jQuery, SimpleModal and Basic JS files -->  
73. <script type="text/javascript" src="../../scripts/jquery.js" ></script>  
74. <script type='text/javascript' src='js/jquery.simplemodal.js'></script>  
75. <script  >  
76. jQuery(function ($) {  
77.     /* 提示框 */  
78.     $('.open-basic-dialog-ok').click(function (e) {  
79.         $('#basic-dialog-ok').modal();  
80.         return false;  
81.     });  
82.     $('.open-basic-dialog-warn').click(function (e) {  
83.         $('#basic-dialog-warn').modal();  
84.         return false;  
85.     });  
86.   
87.     $('.open-basic-ifr').click(function (e) {  
88.         showIframe("http://www.baidu.com","ifr-dialog-content");  
89.         return false;  
90.     });  
91.   
92. });  
93.   
94. /* eg:showIframe */  
95. function showIframe(src , id ){  
96.     $("#ifr-dialog-container").attr("src",src);  
97.     $('#ifr-dialog').modal({opacity:30,"overlayClose":true,"containerId":id });  
98. }  
99.   
100. </script>  
101. </body>  
102. </html>  

Cookie插件

[html] view plaincopy

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. <title></title>  
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
6. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
7. <script src="js/jquery.cookie.js" type="text/javascript"></script>  
8. <script type="text/javascript">  
9. $(function() {  
10.     var COOKIE_NAME = 'username';  
11.     if( $.cookie(COOKIE_NAME) ){  
12.         $("#username").val(  $.cookie(COOKIE_NAME) );  
13.     }  
14.     $("#check").click(function(){  
15.         if(this.checked){  
16.             $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });  
17.         }else{  
18.             $.cookie(COOKIE_NAME, null, { path: '/' });  
19.         }  
20.     });  
21. });  
22. </script>  
23. </head>  
24. <body>  
25.    用户名：<input type="text" name="username" id="username"/> <br/>  
26.    <input type="checkbox" name="check" id="check"/>记住用户名  
27. </body>  
28. </html>  

删除Cookie.

[javascript] view plaincopy

1. $.cookie('the_cookie',null);