jQuery常用插件(如何调用jQuery插件学习第一天)

       插件是以jQuery的核心代码为基础,编写出符合一定规范的应用程序,并将程序进行打包,调用时,仅需要包含该打包后的JS文件即可。如需要使用表单插件,按下列步骤就可实现插件的调用:

(1)在页面中导入包含表单插件的JS文件,并确定它定位与主jQuery库后,其代码如下:

<head>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="Jscript/jquery.form.js"></script>
</head>

(2)在JS文件或页面JS代码中,编写如下代码完成插件的调用:

$(function(){
    $("form").ajaxSubmit();
})

代码中.ajaxSubmit()就是调用插件中的方法,其作用就是获取表单中的字段值,向服务器发送请求。【最新插件可以从jQuery官方网站(http://plugins.jquery.com)获取】

jQuery常用插件

       与浏览器插件不同,jQuery插件凭借其极易加载,体积小,功能独立的特点深受广大web开发人员的喜爱。

(1)验证插件validate

       validate是一个十分优秀的表单验证插件之一,它广泛地使用在全球各个的项目中,并得到广大程序开发人员的认可,该插件有以下功能:

       1.自带验证规则:其中包含必填,数字,URL等众多验证规则。

       2.验证信息提示:可以使用默认的提示信息,也可以自定义提示信息,覆盖默认内容。

       3.多种事件触发:不仅在表单提交时触发验证,在“keyup”或“blur”事件也能触发。

       4.允许自定义验证规则:除使用自带的验证规则外,开发者还可以很方便地自定义验证规则。

validate的插件使用

(1)插件文件:

         Js-8-1/jquery.validate.js

         Js-8-1/jquery.validate.message_cn.js

(2)下载地址:

        http://plugins.jquery.com/project/validate

(3)功能描述:

        在页面中创建一个表单标记,ID号为“frmV”。在表单中设置两个文本框,一个用于输入“姓名”,另外一个用于输入“邮箱”。单击“提交”按钮提交表单数据时,通过validate插件,根据设置的验证规则检测表单中的各个字段元素。

(4)实现代码:

<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Jscript/jquery.validate.js"></script>

<style type="text/css">....省略部分代码</style>

<script type="text/javacript">
    $(function(){
        $("#frmV").validate(
            {
                /*自定义验证规则*/
                rules:{
                    username:{required:true,minlength:6},
                    email:{required:true,email:true}
                },
                /错误提示位置/
                errorPlacement:function(error,element){
                    error.appendTo(element.siblings("span"));
                }
            }
        );
    })
</script>

主体body的代码:

<form id="frmV" method="get" action="#">
    <div class="divFrame">
        <div class="divTitle">
            请输入下列资料
        </div>
        <div class="divContent">
            <div>
                用户名:<br />
                <input in="username" name="username" type="text" class="txt" />
                <font color="red">*</font><br />
                <span></span>
            </div>
            <div>
                邮箱:<br />
                <input id="email" name="email" type="text" class="txt" />
                <font color="red">*</font><br />
                <span></span>
            </div>
            <div class="divBtn">
                <input id="sbtUser" type="submit" value="提交" class="btn" />
            </div>
        </div>
    </div>
</form>

(5)代码分析

         由于validate验证插件默认的提示信息是英文版的,为了汉化验证提示信息,页面部分需要引用一个中文验证信息库,其代码如下:

<script type="text/javascript"
    src="Js-8-1/jquery.validate.messages_cn.js">
</script>

        导入该中文验证信息后,就可以将显示的验证信息汉化。

        验证插件validate导入完成后,如果要使表单在提交数据时触发验证,只需要加入如下代码:

$(function(){
    $("#frmV").validate(
     {
        ...//表单验证执行时的代码
     }
    );
})

       在这个例子中,由于进行的时简单的“用户名”与“邮箱”格式的验证,因此,只要在validate()方法中增加一个规则(rules)属性,用表单字段的“name”属性与规则进行关联,声明默认的验证规则,其实现的代码如下:

/*自定义验证规则*/
rules:{
    username:{required:true,minlength:6},
    email:{required:true,email:true}
}

       为了使验证后的提示信息显示在页面指定的位置中,在validate()方法中新增加一个提示信息位置属性。该属性执行一个回调函数,传递错误提示信息与执行验证字段两个参数,把提示信息的内容通过appendTo()方法增加到触发验证字段的“兄弟”元素<span>中,其实现的代码如下:

/*错误提示位置*/
errorPlacment:function(error,element){
    error.appendTo(element.siblings("span"));
}

猜你喜欢

转载自blog.csdn.net/weixin_42306620/article/details/81450330
今日推荐