web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)

web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)

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

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


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Validationtitle>
    <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()等。


<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);
}

你可能感兴趣的:(web前端,JavaScript,jQuery,锋利的jQuery)