|
|
51CTO旗下网站
|
|
移动端

5种方法教你用jQuery重写表单验证

这里给大家介绍使用jQuery的load()方法、$.get()、$.post()、$.ajax()和表单插件(Form Plugin)5种方法分别重写“表单验证”的实例,并且进一步说明中文乱码的问题。

作者:qibaiyilang来源:百度空间|2010-05-27 09:11

前面我们曾介绍过使用jQuery技巧来提高代码质量,因为jQuery非常容易上手并使用简单。重写表单验证是程序员们经常做的事情,使用jQuery我们有五种方法可以选择,同时也能够解决乱码的问题。

首先,对编码知识进行简要的说明,请务必理解后再看下面的代码。发送中文字符请求时,如果使用get方式,运行正常;而使用post方法则会出现乱码。这是由于异步对象XMLHttpRequest在处理返回的responseText的时候,是按UTF-8编码进行解码的。

如果你原来的网页编码是gb2312的话,当然会发生编码的冲突了;如果你原来的网页编码是utf-8,那么就不会出现中文乱码的问题了。

出现了中文乱码该怎么办呢?通常的解决办法是用escape()对发送的数据进行编码,然后在返回的responseText上再用unescape()进行解码。然而在JavaScript编程中通常不推荐使用escape()和unescape(),而推荐使用encodeURI()和decodeURI()。请看下面的“表单验证实例”,或许对你学习编码知识有一定的帮助。

第一、jQuery的load(url,[data],[callback])方法

语法说明:url为异步请求的地址,data用来向服务器传送请求数据,为可选参数。一旦data参数启用,整个请求过程将以post的方式进行,否则默认为get方式。如果希望在get方式下也传递数据,可以在url地址后面用类似“dataname1=data1&dataName2=data2”的方法。

callback为Ajax加载成功后运行的回调函数。另外使用load()方法返回的数据,不再需要考虑是文本还是XML,jQuery都会自动进行处理。好了,下面马上使用load()方法实现“自动表单验证”实例。首先是,html框架,5个例子都是一样的,如下:

  1. <form>   
  2. 用户昵称:<input type="text" onblur="startCheck(this)" name="User" id="User"><span id="UserResult"></span><br />   
  3. 输入密码:<input type="password" name="passwd1"><br />   
  4. 确认密码:</td><td><input type="password" name="passwd2"><br />   
  5. <input type="submit" value="注册" class="button">   
  6. <input type="reset" value="重置" class="button">   
  7. </form>  

必要说明:

1、onblur="startCheck(this)" 这是JavaScript代码(简称js) ,意思是text文本框失去焦点时触发自定义函数startCheck(),this是指代text文本框的值。

2、<span id="UserResult"></span>用来存放异步对象返回的结果。

  1. jQuery代码如下:  
  2.  
  3. <script language="javascript" src="jquery.min.js"></script>   
  4. <script language="javascript">   
  5. function startCheck(oInput){   
  6.     //首先判断是否有输入,没有输入直接返回,并提示   
  7.     if(!oInput.value){   
  8.         oInput.focus(); //聚焦到用户名的输入框   
  9.         document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  10.         return;   
  11.     }   
  12.     oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格   
  13.     var sUrl = "action.asp?user=" + oInput;   
  14.     sUrl=encodeURI(sUrl); //使用encodeURI()编码,解决中文乱码问题   
  15.     $("#UserResult").load(sUrl,function(data){   
  16.         $("#UserResult").html(decodeURI(data)); //使用decodeURI()解码   
  17.         }   
  18.     );   
  19. }   
  20. </script>  

必要说明:

1、使用jQuery时,都必须加载jquery.min.js文件,可以到http://jquery.com/官网下载最新的版本。

2、判断是否有输入时,用的全是JavaScript语法。

3、对传递给“处理页”的参数进行encodeURI编码,以解决中文乱码问题。

4、load()中的function函数是为了对返回结果进行decodeURI解码,以解决中文乱码问题。

5、对$.trim()、$("#UserResult")、html等jQuery语法不理解的,可以参考jQuery中文手册。本站提供下载。

  1. action.asp处理页代码如下:  
  2.  
  3. <%   
  4. if(Request("user")="eko") then   
  5. Response.Write "Sorry, " & Request("user") & " already exists."   
  6. else   
  7. Response.Write Request("user")&" is ok."   
  8. end if   
  9. %> 

必要说明:

1、action.asp处理页的编码是GB2312,如果把"Sorry..already exists..is ik"等英文改为中文,请看下面的说明。

2、使用post方法会出现乱码,这是由于异步对象XMLHttpRequest在处理返回的responseText的时候,是按UTF-8编码进行解码的。

3、所以post方式的话,必须把action.asp页另存为时,第三项的编码由 ANST 改为 UTF-8 (请务必记住!!)。

第二、使用$.get(url,[data],[callback])和$.post(url,[data],[callback])方法

语法说明:尽管load()方法可以实现get和post两种方式,但很多时候开发者还是希望能够指定发送方式,并且处理服务器返回的值。jQuery提供了$.get()和$.post()两种方法,分别针对这两种请求方式。

其中,url为请求地址,data为请求数据的列表,是可选参数,callback为请求成功后的回调函数,该函数接受两个参数,第一个参数为服务器返回的数据,第二个参数为服务器的状态,是可选参数。$.post()中的type为请求数据的类型,可以是html、xml、json等。 “可自动校验表单实例”的jQuery代码如下,html如上所述。

  1. <script language="javascript" src="jquery.min.js"></script>   
  2. <script language="javascript">   
  3. function createQueryString(){   
  4.     var username=$("#User").val();   
  5.     //组合成对象的形式   
  6.     var queryString={user:username};   
  7.     return queryString;   
  8.     }   
  9. function startCheck(oInput){   
  10.     //首先判断是否有输入,没有输入直接返回,并提示   
  11.     if(!oInput.value){   
  12.         oInput.focus(); //聚焦到用户名的输入框   
  13.         document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  14.         return;   
  15.     }   
  16.     oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格   
  17.     $.get("action.asp",createQueryString(),   
  18.         function(data){   
  19.             $("#UserResult").html(data);   
  20.     });   
  21. }   
  22. </script> 

必要说明:

1、对$.trim()、$("#UserResult")、html、val()等jQuery语法不理解的,可以参考jQuery中文手册。本站提供下载。

2、自定义函数createQueryString(),是对传入“处理页”的参数,进行处理。一种常规的方法。

3、因为是以get方式处理,说明这里不需要进行编码和解码。下面以post方式处理,则需要编码和解码了,代码如下

  1. function createQueryString(){   
  2.     //使用encodeURI()编码解决中文乱码问题   
  3.     var username=encodeURI($("#User").val());   
  4.     //组合成对象的形式   
  5.     var queryString={user:username};   
  6.     return queryString;   
  7.     }   
  8. function startCheck(oInput){   
  9.     //首先判断是否有输入,没有输入直接返回,并提示   
  10.     if(!oInput.value){   
  11.         oInput.focus(); //聚焦到用户名的输入框   
  12.         document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  13.         return;   
  14.     }   
  15.     oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格   
  16.     $.post("action.asp",createQueryString(),   
  17.         function(data){   
  18.             $("#UserResult").html(decodeURI(data));   
  19.     });   
  20. }   
  21. </script> 

第三、使用$.ajax()方法

语法说明:尽管load()、$.get()和$.post()非常方便实用,但却不能控制错误和很多交互的细节,可以说这3种方法对Ajax的可控性较差。jQuery提供了一个强大的函数$.ajax(options)来设置Ajax访问服务器的各个细节,它的语法十分简单,就是设置Ajax的各个选项,然后指定相应的值。“可自动校验表单”实例代码如下:

  1. <script language="javascript" src="jquery.min.js"></script>   
  2. <script language="javascript">   
  3. function createQueryString(){   
  4.     //使用encodeURI()编码解决中文乱码问题   
  5.     var username=encodeURI($("#User").val());   
  6.     //组合成对象的形式   
  7.     var queryString={user:username};   
  8.     return queryString;   
  9. }   
  10. function startCheck(oInput){   
  11.     //首先判断是否有输入,没有输入直接返回,并提示   
  12.     if(!oInput.value){   
  13.     oInput.focus(); //聚焦到用户名的输入框   
  14.     document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  15.     return;   
  16.     }   
  17.     oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格   
  18.     $.ajax({   
  19.         type: "GET",   
  20.         url: "action.asp",   
  21.         data: createQueryString(),   
  22.         success: function(data){   
  23.             $("#UserResult").html(decodeURI(data));   
  24.         }   
  25.     });   
  26. }   
  27. </script> 

必要说明:

1、代码基本同上,只是$.ajax(options)稍有不同,对于其参数不理解可以参考jQuery中文手册。

2、给个建议,无论是get方式还是post方式,都习惯进行编码,以防出现中文乱码的问题。

3、再强调一下,无论使用哪种程序,如果遇到问题了,都可以参考相关的手册说明,这是建站所必需的。

上面的实例使用了jQuery的load()方法、$.get()、$.post()、$.ajax()的4种方法,都要考虑中文乱码的问题,下面推荐一个方法,进一步简化jQuery代码,呵呵。

第四、表单插件

表单插件(Form Plugin)是一款功能非常强大的插件,在jQuery官方网站上目前为4星级推荐,下载后为jquery.form.js文件。该插件提供获取表单数据、重置表单项目、使用Ajax提交数据等一系列功能,深受开发人员的喜爱。使用表单插件,再次重写“表单校验实例”,完整代码如下:

  1. <form id="myform" action="action.asp">   
  2. 用户昵称:<input type="text" onblur="startCheck(this)" name="User" id="User"><input type="button" value="检 查" class="button"><span id="UserResult"></span><br />   
  3. 输入密码:<input type="password" name="passwd1"><br />   
  4. 确认密码:</td><td><input type="password" name="passwd2"><br /><br />   
  5. <input type="submit" value="注册" class="button"><input type="reset" value="重置" class="button">   
  6. </form> 

HTML框架加了一个“检查”的按钮(使用手动校验的方法),jQuery如下:

  1. <script language="javascript" src="jquery.min.js"></script>   
  2. <script language="javascript" src="jquery.form.js"></script>   
  3. <script language="javascript">   
  4. function startCheck(oInput){   
  5.     //首先判断是否有输入,没有输入直接返回,并提示   
  6.     if(!oInput.value){   
  7.         oInput.focus(); //聚焦到用户名的输入框   
  8.         document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  9.         return;   
  10.     }   
  11. }   
  12. $(function(){   
  13.     $("input[type=button]").click(function(){   
  14.         var options={   
  15.             target: "#UserResult"   
  16.         };   
  17.         //表单的Ajax化   
  18.         $("#myform").ajaxSubmit(options);   
  19.     });   
  20. });   
  21. </script> 

必要说明:
 
1、使用表单插件,必须加载jquery.form.js文件。
 
2、按Ajax方式提交数据,可以使用表单插件的ajaxSubmit(options)来按照Ajax的方式直接提交表单或者使用ajaxform(options)方法,通常在页面加载完成时执行,用来将表单统一Ajax化,并且提交表单依然使用传统的submit按钮,只不过进行的是Ajax提交。其中参数options与$.ajax(options)的参数基本相同。

文章转自qibaiyilang的博客,

原文地址:http://hi.baidu.com/qibaiyilang/blog/item/8a65ef54e69b0858574e0058.html

【编辑推荐】

  1. 你应该学习jQuery的七大理由
  2. 了解jQuery技巧来提高你的代码质量
  3. jQuery 1.4十大新特性解读及代码示例
  4. 10个自由丰富的jQuery或JavaScript编辑器
  5. 大致说明JQuery源码研究说明
【责任编辑:王晓东 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

游戏关卡设计

《半条命》作者倾心写就 暴雪总裁等业内专家强力推荐 盛大公司专业团队翻译 一起来创造引人入胜的游戏体验吧! 任何精彩游戏的核心部分...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊