web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）

Java帮帮

发布于 2018-03-16 09:00:25

6.9K00

代码可运行

文章被收录于专栏：Java帮帮-微信公众号-技术文章全总结Java帮帮-微信公众号-技术文章全总结

运行总次数：0

代码可运行

插件也称扩展，是一种遵循一定规范的应用程序接口编写出来的程序。

1.jQuery表单验证插件－Validation：最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件－Validation，其拥有以下优点：内置验证规则：拥有必填、数字、email、URL和信用卡号等19类内置验证规则。自定义验证规则：可以很方便地自定义验证规则简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能实时验证：可以通过keyup和blur事件触发验证，而不仅仅在表单提交的时候验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Validation</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.messages_cn.js"></script>
    <style type="text/css">
    *{
        font-family: Verdana;
        font-size: 96%;
    }
    label{
        width: 10em;
        float: left;
    }
    label.error{
        float: none;
        color: red;
        padding-left: .5em;
        vertical-align: top;
    }
    p{
        clear: both;
    }
    .submit{
        margin-left: 12em;
    }
    em{
        font-weight: bold;
        padding-right: 1em;
        vertical-align: top;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#commentForm").validate();
    });
    </script>
</head>
<body>
    <form class="cmxform" id="commentForm" method="get" action="#">
        <fieldset>
            <legend>一个简单的验证带验证提示的评论例子</legend>
            <p>
                <label for="cusername">姓名</label><em>*</em>
                <input id="cusername" name="username" size="25" class="required" minlength="2" />
            </p>
            <p>
                <label for="cemail">电子邮件</label><em>*</em>
                <input id="cemail" name="email" size="25" class="required email" />
            </p>
            <p>
                <label for="curl">网址</label><em>*</em>
                <input id="curl" name="url" size="25" class="url" value="" />
            </p>
            <p>
                <label for="ccomment">你的评论</label><em>*</em>
                <textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="提交" />
            </p>
        </fieldset>     
    </form>
</body>
</html>

首先引入：

<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>

确定哪个表要被验证 $(“#commentForm”).validate();

针对不同字段，进行验证规则编码 class=”required” 为必须填写 minlength=”2” 为最小长度为2 class=”required email” 必须填写，内容必须是email格式 class=”url” 为url格式验证

使提示是中文，导入：

<script type="text/javascript" src="../js/jquery.validate.messages_cn.js"></script>

2.jQuery表单插件——Form： jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易的，无侵入的升级HTML表单以支持Ajax。jQuery Form有两个核心方法－ajaxForm()和ajaxSubmit,他们集合了从控制表单formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()、resetForm()等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>插件</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../js/jquery.form.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        //绑定id为myForm的表单并提供一个简单的回调函数
        $("#myForm").ajaxForm(function(){
            $("#output1").html("提交成功！欢迎下次再来！").show();
        });
    });
    </script>
</head>
<body>
    <form id="myForm" action="demo.php" method="post">
        名称：<input type="text" name="name" /><br>
        地址：<input type="text" name="address" /><br>
        自我介绍：<textarea name="comment"></textarea><br>
        <input type="submit" id="test" value="提交" /><br>
        <div id="output1" style="display:none;"></div>
    </form>
</body>
</html>

当表单被提交时，“姓名”、“地址”、“自我介绍”字段的值会以无刷新的方式提交到文件demo.PHP中。如果服务器返回一个成功的状态，那么用户就会看到“提交成功！欢迎下次再来”的提示

核心方法 ajaxForm()和ajaxSubmit()

通过核心方法ajaxForm()，能很容易地将表单升级为Ajax提交方式

$("#myForm").ajaxForm(function(){
    $("#output1").html("提交成功！欢迎下次再来！").show();
});
Form插件还有一个核心方法就是ajaxSubmit()，也能完成用同样的功能
$("#myForm").submit(function(){
    $(this).ajaxSubmit(function(){
        $("#output1").html("提交成功！欢迎下次再来！").show();
    });
    return false;//阻止表单默认提交
});

ajaxForm()和ajaxSubmit()的参数 ajaxForm()和ajaxSubmit()都能接受0个或者1个参数。当为单个的参数时，该参数既可以是一个回调函数，也可以是一个option对象。上面例子的参数就是回调函数。接下来介绍options对象，通过给ajaxForm()方法和ajaxSubmit()方法传递options对象，使得他们对表单拥有更多的控制权。首先定义一个对象options，然后在对象里设置参数

var options={
    target="#output1"//把服务器返回的内容放入id为output1的元素中
    ,beforeSubmit:showRequest//提交前的回调函数
    ,success:showResponse//提交后的回调函数
    ,url:url//默认是form的action，如果申明，则被覆盖
    ,type:type//默认是form的method ，如果申明，则被覆盖
    ,dedaType:null//“xml”、“script”、“json”等数据类型
    ,clearForm:true//成功提交后，清除所有表单元素的值
    ,resetForm:true//成功提交后，重置所有表单元素的值
    ,timeout:3000//限制请求时间，当大于3秒后，跳出请求
};

定义options对象之后，就可以把这个对象传递给ajaxForm方法：

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

或者传递给ajaxSubmit方法：

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

在options对象里，指定两个回调函数，即beforeSubmit:showRequest和success:showResponse,他们分别会在表单提交前和表单提交后被调用。

beforeSubmit－提交前的回调函数

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

这个回调函数有三个参数，第一个参数formData是数组对象。在这里，使用$.param()方法把它转化成字符串，得到以下这种格式：name1&address=2 需要注意的是，当表单提交时，Form插件会以Ajax方式自动提交这些数据第二个参数jqForm是一个DOM元素，可以把jqForm转换成DOM对象。 var formElement=jqForm[0]; var address=formElement.address.valse; 第三个参数options就是options对象。这个回调函数中只要不返回false，表单豆浆杯允许提交；如果返回false，则会阻止表单提交。

success－提交后的回调函数

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

这个回调函数有四个参数responseText,statusText,xhr,$form。其中responseText,statusText两个参数比较常用。 statusText只是返回一个状态，例如success、error等。 responseText携带着服务器返回的数据内容。responseText会根据设置的options对象中的dataType属性来返回相应数据格式的内容，具体情况如下。（1）对于缺省的HTML返回，回调函数的第一个参数是XMLHttpRequest对象的responseText属性。（2）当dataType属性被设置为xml时，回调函数的第一个参数是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时，回调函数的第一个参数是从服务器返回的json数据对象

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