专栏首页Java帮帮-微信公众号-技术文章全总结web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)

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

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

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

本文分享自微信公众号 - Java帮帮(javahelp)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-12-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 与Ajax同样重要的jQuery(2)

    练习9: ² 点击button 打印radio checkbox select 中选中项的值 <script type="text/javascript" sr...

    Java帮帮
  • JavaWeb12-JSP, EL表达式,JSTL标签

    JSP & EL & JSTL 一.JSP 1. jsp回顾 jsp作用 jsp全称java server pages(java服务器页面),本质是一个serv...

    Java帮帮
  • 干货 | 全球100款大数据工具汇总(收藏备用)

    是第一家针对的数据集成工具市场的ETL(数据的提取Extract、传输Transform、载入Load)开源软件供应商。Talend的下载量已超过200万人次,...

    Java帮帮
  • 又到公司年会时,给公司写的年会抽奖程序!

    用户5997198
  • webpack实战——样式文件分离

    在之前篇章里面主要是对js的打包应用和处理,而打包方面另外一个重要工作就是样式处理。

    流眸
  • 正则表达式同时验证手机和座机号码

    JS同时验证固话和手机号正则表达式,验证规则: 1:当input框没有填写号码的时候,input为空,可通过验证 2:当手机号码填写正确的时候,可通过验证 ...

    祈澈菇凉
  • mydate97时间控件的使用

    mydate97官网: http://www.my97.net/dp/index.asp   1:用法如下所示,首先下载一个这个东西:     链接:http:...

    别先生
  • 『工具』修复windows下各种.dll缺失或者其他组件

    2016-03-0413:45:50 发表评论 417℃热度 DirectX修复工具(DirectX Repair)是一款系统级工具软件,简便易用。本程序为绿...

    timhbw
  • 如何提问问题?

    我的回答是:记录下问题,记录下问题产生的原因,百度或者google找到解决方案,进行试验,发现不行,重新百度或者谷歌找到解决方案,发现还不行,继续查找问题,排除...

    致码DevOps
  • UI5 Source code map机制的细节介绍

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog....

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券