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

前面我们曾介绍过使用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、onblur="startCheck(this)" 这是JavaScript代码(简称js) ，意思是text文本框失去焦点时触发自定义函数startCheck(),this是指代text文本框的值。

2、用来存放异步对象返回的结果。

 
 
 

  
  
  
jQuery代码如下：  
  
  
  
 
  
  
  
   
  
  
  
   
  
  
  
function startCheck(oInput){   
  
  
  
    //首先判断是否有输入，没有输入直接返回，并提示   
  
  
  
    if(!oInput.value){   
  
  
  
        oInput.focus(); //聚焦到用户名的输入框   
  
  
  
        document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  
  
  
        return;   
  
  
  
    }   
  
  
  
    oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格   
  
  
  
    var sUrl = "action.asp?user=" + oInput;   
  
  
  
    sUrl=encodeURI(sUrl); //使用encodeURI()编码，解决中文乱码问题   
  
  
  
    $("#UserResult").load(sUrl,function(data){   
  
  
  
        $("#UserResult").html(decodeURI(data)); //使用decodeURI()解码   
  
  
  
        }   
  
  
  
    );   
  
  
  
}   
  
  
  
  
 
 
 

必要说明：

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

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

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

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

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

 
 
 

  
  
  
action.asp处理页代码如下：  
  
  
  
 
  
  
  
<%   
  
  
  
if(Request("user")="eko") then   
  
  
  
Response.Write "Sorry, " & Request("user") & " already exists."   
  
  
  
else   
  
  
  
Response.Write Request("user")&" is ok."   
  
  
  
end if   
  
  
  
%> 
 
 
 

必要说明：

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

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

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

#p#

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

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

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

 
 
 

  
  
  
   
  
  
  
   
  
  
  
function createQueryString(){   
  
  
  
    var username=$("#User").val();   
  
  
  
    //组合成对象的形式   
  
  
  
    var queryString={user:username};   
  
  
  
    return queryString;   
  
  
  
    }   
  
  
  
function startCheck(oInput){   
  
  
  
    //首先判断是否有输入，没有输入直接返回，并提示   
  
  
  
    if(!oInput.value){   
  
  
  
        oInput.focus(); //聚焦到用户名的输入框   
  
  
  
        document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  
  
  
        return;   
  
  
  
    }   
  
  
  
    oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格   
  
  
  
    $.get("action.asp",createQueryString(),   
  
  
  
        function(data){   
  
  
  
            $("#UserResult").html(data);   
  
  
  
    });   
  
  
  
}   
  
  
  
 
 
 
 

必要说明：

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

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

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

 
 
 

  
  
  
function createQueryString(){   
  
  
  
    //使用encodeURI()编码解决中文乱码问题   
  
  
  
    var username=encodeURI($("#User").val());   
  
  
  
    //组合成对象的形式   
  
  
  
    var queryString={user:username};   
  
  
  
    return queryString;   
  
  
  
    }   
  
  
  
function startCheck(oInput){   
  
  
  
    //首先判断是否有输入，没有输入直接返回，并提示   
  
  
  
    if(!oInput.value){   
  
  
  
        oInput.focus(); //聚焦到用户名的输入框   
  
  
  
        document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  
  
  
        return;   
  
  
  
    }   
  
  
  
    oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格   
  
  
  
    $.post("action.asp",createQueryString(),   
  
  
  
        function(data){   
  
  
  
            $("#UserResult").html(decodeURI(data));   
  
  
  
    });   
  
  
  
}   
  
  
  
 
 
 
 

#p#

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

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

 
 
 

  
  
  
   
  
  
  
   
  
  
  
function createQueryString(){   
  
  
  
    //使用encodeURI()编码解决中文乱码问题   
  
  
  
    var username=encodeURI($("#User").val());   
  
  
  
    //组合成对象的形式   
  
  
  
    var queryString={user:username};   
  
  
  
    return queryString;   
  
  
  
}   
  
  
  
function startCheck(oInput){   
  
  
  
    //首先判断是否有输入，没有输入直接返回，并提示   
  
  
  
    if(!oInput.value){   
  
  
  
    oInput.focus(); //聚焦到用户名的输入框   
  
  
  
    document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  
  
  
    return;   
  
  
  
    }   
  
  
  
    oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格   
  
  
  
    $.ajax({   
  
  
  
        type: "GET",   
  
  
  
        url: "action.asp",   
  
  
  
        data: createQueryString(),   
  
  
  
        success: function(data){   
  
  
  
            $("#UserResult").html(decodeURI(data));   
  
  
  
        }   
  
  
  
    });   
  
  
  
}   
  
  
  
 
 
 
 

必要说明：

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

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

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

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

#p#

第四、表单插件

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

 
 
 

  
  
  
   
  
  
  
用户昵称:   
  
  
  
输入密码:   
  
  
  
确认密码:   
  
  
  
   
  
  
  
 
 
 
 

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

 
 
 

  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
function startCheck(oInput){   
  
  
  
    //首先判断是否有输入，没有输入直接返回，并提示   
  
  
  
    if(!oInput.value){   
  
  
  
        oInput.focus(); //聚焦到用户名的输入框   
  
  
  
        document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
  
  
  
        return;   
  
  
  
    }   
  
  
  
}   
  
  
  
$(function(){   
  
  
  
    $("input[type=button]").click(function(){   
  
  
  
        var options={   
  
  
  
            target: "#UserResult"   
  
  
  
        };   
  
  
  
        //表单的Ajax化   
  
  
  
        $("#myform").ajaxSubmit(options);   
  
  
  
    });   
  
  
  
});   
  
  
  
 
 
 
 

必要说明：
 
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

文章名称：5种方法教你用jQuery重写表单验证
本文路径：http://www.hantingmc.com/qtweb/news9/9259.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联