插件是以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"));
}