JQuery表单插件Form

时间：2022-02-07 14:26:26

Form 插件简介

JQuery Form 插件是一个优秀的Ajax表单插件。它有两个核心方法 ajaxForm()和ajaxSubmit()，还包括一些方法： formToArray()、formSerialize()、fieldSerialize()、filedValue()、clearForm()、clearForm()、clearFields()和resetForm()等。

JQuery Form 表单插件的下载地址为：http://jquery.malsup.com/form/#download

一个例子

ajaxForm()方法

$("#myForm").ajaxForm(function(){
    $("#output1").html("提交成功!欢迎下次再来").show();
});

ajaxSubmit()方法

$("#myForm").submit(function(){
    $(this).ajaxSubmit(function(){
        $("#output1").html("提交成功!欢迎下次再来！").show();
    });
    return false;//阻止表单默认提交
});

特点：通过调用ajaxSubmit()方法来响应 用户的提交表单操作，从而使表单的提交方式由传统的提交方式转变为Ajax提交方式 。
通过Form插件的这两个核心方法都 可以在不修改表单的HTML代码结构的情况下，轻易地将表单的提交方式升级为Ajax提交方式。

参数

ajaxForm()方法和ajaxSubmit()方法都能接受0个或者1个参数。当为单个参数时，该参数既可以是一个回调函数，也可以是一个options对象。
首先定义一个对象options，然后在对象里设置参数

var options = {
    target:'output1',//把服务器返回的内容放入id为output1的元素中
     beforeSubmit:showRequest//提交前的回调函数
     success：showResponse//提交后的回调函数
     url:url //默认是form的action，如果申明，则会覆盖
     type：type //默认是form的method('get' or 'post')，如果申明,则会覆盖
     dataType:null //'xml','script',or'json' （接受服务端返回的类型）
     clearForm:true//成功提交后，清除所有 表单元素的值
     resetForm:true//成功提交后，重置所有表单元素的值
     timeout:3000//限制请求的时间，当请求大于3秒后，跳出请求
}

定义玩options对象后，就可以把options对象传递给ajaxForm()方法

$("#myForm").ajaxForm(options);

或者传递给ajaxSubmit()方法,jQuery代码如下：

$("#myForm").submit(function(){
    $(this).ajaxSubmit(options);
    return false;
});

两个回调函数，beforeSubmit ：showRequest和success：showResponse
提交前的回调函数的代码如下：

function showRequest(formData,jqForm,options){
var queryString=$.param(formData);
return true;
}

这个回调函数有3个参数。

第一个参数是formdata数组对象，在这里是有$.param()方法把它转化为字符串：

    name=1&address=2；

第二个参数jqForm是一个jQuery对象，它封装了表单的元素。把它转化为DOM对象即可访问jqForm的DOM元素。

    var formElement =jqForm[0];
    var address = formElement.address.value;

第三个options就是options对象。前面已经声明了options对象里的一些属性，其他没有声明的，则会使用默认的属性。

在这个回调函数中，只要不返回false，表单都将被允许提交；如果返回fasle，则会阻止表单提交。可以利用这个特性，在表单 提交之前验证数据，如果不符合验证规则，则阻止表单提交。

success 提交后的回调函数

function showResponse(responseText,statusText,xhr,$form){
    alert('状态'+statusText+'\n 返回的内容是：\n'+responseText);
}

success 有4个responseText，statusText，xhr和$form。其中responseText 和statusText2个比较常用。
statusText只是一个返回状态，例如success、error等。
responseText携带着服务器返回的数据内容。responseText会根据设置的options对象中的dataType属性来返回相应的内容。
1、对于缺省的HTML返回，回调函数的第一个参数是XMLHttpRequest对象的responText属性
2、当dataType属性被设置为xml时，回调函数的第1个参数是XMLHttpRequest对象的responseXML属性。

$("#xmlForm").ajaxForm({
    dataType:'xml'，
    success:processXml
});
function processxml(responseXML){
    var name=$('name'，responseXML).text();
    var address=$('address',responseXML).text();
    $('#xmlOut').html(name+"　＂＋address); }

3、当dataType属性被设置为json时，回调函数的第1个参数是从服务器返回的json数据对象。例如声明服务器返回的数据的类型为json,然后以json方式解析数据，代码如下

$('#myForm').ajaxForm({
    dataType:'json',
    success:processJson
});
function processJson(data){
    $('#jsonOut').html(data.name+" "+data.address);
}

表单提交之前验证表单

大多数情况下，需要在表单提交前对表单元素的值进行一次验证，如果不符合验证规则，则阻止表单提交。beforeSubmit会在表单提交前被调用。如果beforeSubmit返回false，则会阻止表单提交,利用这个特性，就可以完成表单验证表单元素的任务。
首先，定义一个validate回调函数

beforeSubmit:valite

然后编写validate函数,它有3个参数：

function validate(formData,jqForm,options){
    /* 在这里需要对表单元素进行验证，如果不符合规则， 将返回 falsel来阻止表单提交，直至符合规则为止 */
    var queryString =$.param(formData);
    return true;
}

获取表单元素的值，对表单元素进行验证。Form插件获取表单数据的方式有多种

  • 方式1 ：利用参数formData
    function validate(formData,jqForm,options){
        for(var i=0;i<formData.length;i++)
        {
            if(!formData[i].value){
                alert('用户名,地址和自我介绍都不能为空!');
                return false;
        } 
        }
        var queryString =$.param(formData);
        return true;
    }
  • 方式2：利用参数jqForm 
 function validate(formData,jqForm,options) {
    var form =jqForm[0];
    if(!form.name.value||form.address.value){
        alert('用户名和地址不能为空,自我介绍可以为空！');
        return false;
    }
    var queryString =$.param(formData);
    return true;        
  }
  • 方法3：利用fieldValue()方法
function validate(formData ,jqForm,options) {
    var usernameValue = $('input[name=name]').fieldValue();
    var addressValue=$("input[name=address]").fieldValue();
    if(!usernameValue[0]||!addressValue[0])
    {
        alert('用户名和地址不能为空,自我介绍可以为空！');
        return false;
    }
    var queryString =$.param(formData);//组装数据
    return true;
}
标签：

相关文章