jQuery插件學(xué)習(xí)教程之SlidesJs輪播+Validation驗(yàn)證
SlidesJs（輪播支持觸屏）——官網(wǎng)（http://slidesjs.com）
1.簡(jiǎn)介
SlidesJs是基于Jquery(1.7.1+)的響應(yīng)幻燈片插件。支持鍵盤(pán)，觸摸，css3轉(zhuǎn)換。
2.代碼
<!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
</body>
API簡(jiǎn)介
1.設(shè)置輪播的寬高（默認(rèn)值都為 auto）
$("#slides").slidesjs({
width: 700,
height: 393
});
2.設(shè)置從那張開(kāi)始（默認(rèn)值為 1）
$("#slides").slidesjs({
start: 3 //這里注意數(shù)值從1開(kāi)始，不是0；默認(rèn)值0
});
3.設(shè)置上下切換按鈕
可以自定樣式：
<a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a>
<a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a>
$("#slides").slidesjs({
navigation: {
active: true, //顯示或隱藏前一張后一張切換按鈕；默認(rèn)值為true,
effect: "slide" //設(shè)置切換的方式，slide:平滑，fade:漸顯；默認(rèn)值slide
}
});
4.設(shè)置分頁(yè)切換
可以自定樣式：
<ul class="slidesjs-pagination"> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1">2</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2">3</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3">4</a></li></ul>
$("#slides").slidesjs({
pagination: {
active: true, //顯示或隱藏 分頁(yè)；默認(rèn)值true
effect: "slide" //這里可以設(shè)置切換方式，跟上下頁(yè)切換一樣，但是跟上下頁(yè)不沖突；默認(rèn)值slide
}
});
5.自動(dòng)播放
可以自定樣式：
<a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a>
<a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a>
$("#slides").slidesjs({
play: {
active: true, //開(kāi)始自動(dòng)播放功能；默認(rèn)值true
effect: "slide", //切換方式，跟上面兩個(gè)切換方式不沖突；默認(rèn)值slide
interval: 5000, //在每一個(gè)幻燈片上花費(fèi)的時(shí)間；默認(rèn)值5000
auto: false, //開(kāi)始自動(dòng)播放；默認(rèn)值false
swap: true, //顯示或隱藏 自動(dòng)播放和停止按鈕；默認(rèn)值true
pauseOnHover: false, //鼠標(biāo)移入是否暫停；默認(rèn)值false
restartDelay: 2500 //重啟延遲；默認(rèn)值2500
}
});
6.效果配置
$("#slides").slidesjs({ effect: {
slide: {
speed: 200 //切換花費(fèi)的時(shí)間；默認(rèn)值200
},
fade: {
speed: 300, //切換花費(fèi)的時(shí)間；默認(rèn)值300
crossfade: true //交叉切換，設(shè)置為false,會(huì)看到背景色；默認(rèn)值true
}
}
});
7.回調(diào)函數(shù)
$("#slides").slidesjs({
callback: {
loaded: function(number) {
// 幻燈片載入完成時(shí)
},
start: function(number) {
// 切換開(kāi)始時(shí)
},
complete: function(number) {
// 切換結(jié)束時(shí)
}
}
});
validation（表單驗(yàn)證）——官網(wǎng)（http://jqueryvalidation.org）
以下是針對(duì)：jQuery Validation Plugin - v1.15.0 - 2/24/2016 版本
注意：jquery Vaildation Engine 跟以下講的不是同一款插件
示例：
<form action="" id="demo">
<label for="username">用戶(hù)名</label><input type="text" name="username" id="username"><br/>
<label for="password">密碼</label><input type="text" name="password" id="password"><br/>
<label for="password_confirm">確認(rèn)密碼</label><input type="text" name="password_confirm"><br/>
<label for="email">email</label><input type="text" name="email"><br/>
<input type="submit" value="提交">
</form>
<script>
$(function(){
$('#demo').validate({
rules: { //規(guī)則
username: { //這邊的username，取得是form里面 name的值
required: true, //必填項(xiàng)
minlength: 2, //最小長(zhǎng)度
remote: "http://taojiaqu.com" //url驗(yàn)證配對(duì)，只能返回true或false
},
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true,
remote: "http://taojiaqu.com"
}
},
messages: { //錯(cuò)誤顯示，跟上面的一一對(duì)應(yīng)，沒(méi)有設(shè)置的話(huà)，會(huì)顯示默認(rèn)的
username: {
required: '請(qǐng)輸入用戶(hù)名',
minlength: '用戶(hù)名最小為2',
remote: "該用戶(hù)名被使用了"
},
password: {
required: '請(qǐng)輸入密碼',
minlength: '密碼最小長(zhǎng)度為5'
},
password_confirm: {
required: '請(qǐng)確認(rèn)密碼',
minlength: '密碼最小長(zhǎng)度為5',
equalTo: "兩次密碼不一致"
},
email: {
required: '請(qǐng)輸入郵箱',
email: '您輸入的郵箱不對(duì)',
remote: '該郵箱已被實(shí)用'
}
},
errorElement: "b", //設(shè)置錯(cuò)誤標(biāo)簽 b
errorPlacement: function(error, element) { //錯(cuò)誤操作，error錯(cuò)誤信息，element錯(cuò)誤input對(duì)象
element.after(error);
},
submitHandler: function() { //點(diǎn)擊提交表單回調(diào)函數(shù)，如果還有驗(yàn)證不通過(guò)擇提示錯(cuò)誤信息，不執(zhí)行該函數(shù)
},
success: function(label,element) { //驗(yàn)證通過(guò)的函數(shù) //element：input對(duì)象 //labal：提示信息的對(duì)象
},
highlight: function(element, errorClass, validClass) { //上一個(gè)驗(yàn)證不通過(guò)的話(huà)，執(zhí)行該函數(shù) //element：input對(duì)象 //errorClass：錯(cuò)誤class類(lèi)名 //validClass: 確認(rèn)class類(lèi)名
},
unhighlight:function(element, errorClass, validClass){ //上一個(gè)驗(yàn)證通過(guò)的話(huà)，執(zhí)行該函數(shù)
}
})
})
</script>
API
1.1方法
validate() – Validates 核心方法
$('#demo').validate({
rules: {
//。。。
},
messages: {
//。。。
}
})
valid() – 驗(yàn)證表單是否通過(guò)，返回true或false
$('#taojiaqu').validate()
alert($('#taojiaqu').valid());
rules() – 讀取、添加和刪除一個(gè)元素的規(guī)則
$( "#myinput" ).rules(); //返回一個(gè)規(guī)則對(duì)象$( "#myinput" ).rules( "add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
}
});
$( "#myinput" ).rules( "remove" );//移除全部
$( "#myinput" ).rules( "remove", "min max" );//移除min max
1.2公共方法
Validator.form() – 驗(yàn)證表單 Validator.element() – 驗(yàn)證指定的 input validator.element( "#myselect" ); Validator.resetForm() – 重置表單 Validator.showErrors() – 顯示錯(cuò)誤信息 Validator.numberOfInvalids() – 返回錯(cuò)誤的字段數(shù)
1.3靜態(tài)方法
jQuery.validator.addMethod( name, method [, message ] ) – 添加自定義驗(yàn)證方法
//返回true或falsejQuery.validator.addMethod("domain", function(value, element) {
return this.optional(element) || /^http:\/\/taojiaqu.com/.test(value);
}, "錯(cuò)誤信息");
jQuery.validator.format( template, argument, argumentN… ) – 格式化字符串
var format=jQuery.validator.format("{0}--{1}--{2}");
console.log(format("a","b","c")); //a--b--c
jQuery.validator.setDefaults() – 修改默認(rèn)設(shè)置
jQuery.validator.setDefaults({
debug: true //所有的都設(shè)置debug模式
});
jQuery.validator.addClassRules() – 統(tǒng)一添加某個(gè)類(lèi)的 校驗(yàn)規(guī)則
//添加class為name的校驗(yàn)規(guī)則：必填，最小長(zhǎng)度為2jQuery.validator.addClassRules("name", {
required: true,
minlength: 2
});
2.選擇器
:blank – 選擇value值為空的input
:filled – 選擇value有值的input
:unchecked – 選擇未被選中的 checkbox
3.驗(yàn)證規(guī)則
required – 必填，默認(rèn)true
remote – 遠(yuǎn)程請(qǐng)求驗(yàn)證，請(qǐng)求地址返回true或false
minlength – 最小長(zhǎng)度，中文字算1個(gè)字符
maxlength – 最大長(zhǎng)度
rangelength – 給定長(zhǎng)度范圍，例：[2,5]
min – 最小值，數(shù)值型
max – 最大值
range – 給定最大最小取值范圍，例：[2,100]
step – 設(shè)置步驟
email – 必須是一個(gè)郵箱email格式
url – 必須是一個(gè)地址url
date – 必須輸入正確格式的日期
dateISO – 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗(yàn)證格式，不驗(yàn)證有效性
number – 必須輸入合法的數(shù)字(負(fù)數(shù)，小數(shù))
digits – 必須輸入整數(shù)
equalTo：'#abc' – 輸入值必須和#abc相同
以下驗(yàn)證規(guī)則需加載——additional-methods.min.js
accept – 驗(yàn)證上傳的文件MINE類(lèi)型，例：accept："image" ;多種類(lèi)型逗號(hào)（，）隔開(kāi)
creditcard – 驗(yàn)證信用卡卡號(hào)
extension – 驗(yàn)證上傳的文件的后綴，例：extension："dll|exe" ;;多種類(lèi)型逗號(hào)（|）隔開(kāi)
phoneUS – 驗(yàn)證是否為美國(guó)號(hào)碼
require_from_group – 設(shè)置類(lèi)目中有N個(gè)是必填項(xiàng)
mobile_phone: {
require_from_group: [1, ".phone-group"] //這邊的1表示 三項(xiàng)中只需要填寫(xiě)一項(xiàng)就可以，后面是class名
},
home_phone: {
require_from_group: [1, ".phone-group"]
},
work_phone: {
require_from_group: [1, ".phone-group"]
}
4.validate()方法的配置項(xiàng)
debug — 開(kāi)啟關(guān)閉debug模式，阻止提交
$(".selector").validate({
debug: true
});
submitHandler — 通過(guò)驗(yàn)證后運(yùn)行的函數(shù)，可以加上表單的提交方法
$(".selector").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});
$(".selector").validate({
submitHandler: function(form) {
form.submit();
}
});
invalidHandler — 驗(yàn)證沒(méi)通過(guò)，提交時(shí)觸發(fā)的方法
$(".selector").validate({
invalidHandler: function(event, validator) {
//event :自定義事件對(duì)象
//validator:當(dāng)前驗(yàn)證的實(shí)例
}
});
ignore — 對(duì)某些元素不進(jìn)行驗(yàn)證
$("#myform").validate({
ignore: ".ignore"
});
rules — 定義校驗(yàn)規(guī)則，有個(gè)隱藏的參數(shù) depends:在滿(mǎn)足什么條件下才驗(yàn)證次規(guī)則
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
}
}); $(".selector").validate({
rules: {
name: ｛ depends：function(element){reruen true;} //返回true的話(huà)才校驗(yàn),name是否必填 ?。?
email: {
email: true, min:{ param:15, //單獨(dú)值的話(huà) 用param 代替 depends：function(element){reruen true;} }
}
}
});
messages — 定義提示信息
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "請(qǐng)輸入您的名字",
email: {
required: "請(qǐng)輸入的的郵箱",
email: "請(qǐng)輸入正確的郵箱地址"
}
}
});
groups — 對(duì)一組元素的驗(yàn)證，用一個(gè)錯(cuò)誤提示，用errorPlacement 控制出錯(cuò)信息的位置
$("#myform").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
error.insertAfter("#lastname");
} else {
error.insertAfter(element);
}
}
});
onsubmit —是否在提交時(shí)驗(yàn)證
onfocusout —是否在獲取焦點(diǎn)時(shí)驗(yàn)證
onkeyup — 是否在敲擊鍵盤(pán)時(shí)驗(yàn)證
onclick — 是否在鼠標(biāo)點(diǎn)擊數(shù)驗(yàn)證
focusInvlid — 提交表單，未通過(guò)驗(yàn)證的表單是否獲得焦點(diǎn)（默認(rèn)第一個(gè)）
focusCleanup — 提交表單，未通過(guò)驗(yàn)證的表單是否移除錯(cuò)誤信息
errorClass — 指定錯(cuò)誤提示的class類(lèi)名
validClass — 指定驗(yàn)證通過(guò)的class類(lèi)名
errorElement — 使用什么標(biāo)記錯(cuò)誤標(biāo)簽
$(".selector").validate({
errorElement: "em"
});
//<em>錯(cuò)誤信息</em>
wrapper — 使用什么標(biāo)簽把上面的errorElement 包起來(lái)
errorLableContainer — 把錯(cuò)誤信息統(tǒng)一放在一個(gè)容器里面
errorContainer — 顯示或隱藏驗(yàn)證信息，可以自動(dòng)實(shí)現(xiàn)有錯(cuò)誤信息出現(xiàn)時(shí)把容器屬性變?yōu)轱@示，無(wú)錯(cuò)誤時(shí)隱藏
showErrors — 可以顯示總的多少個(gè)未通過(guò)驗(yàn)證
errorPlacement：function(error,element) — 自定義錯(cuò)誤信息的位置,error:錯(cuò)誤信息、element：驗(yàn)證的元素
success — 要驗(yàn)證的元素通過(guò)驗(yàn)證后的回調(diào)
highlight — 可以為未通過(guò)的元素加效果
unhighlight — 可以為通過(guò)的元素加效果
以上所述是小編給大家介紹的jQuery插件學(xué)習(xí)教程之SlidesJs輪播+Validation驗(yàn)證，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 深入解析js輪播插件核心代碼的實(shí)現(xiàn)過(guò)程
- 原生JS輪播圖插件
- 非常優(yōu)秀的JS圖片輪播插件Swiper的用法
- 基于cssSlidy.js插件實(shí)現(xiàn)響應(yīng)式手機(jī)圖片輪播效果
- Bootstrap 最常用的JS插件系列總結(jié)（圖片輪播、標(biāo)簽切換等）
- Bootstrap輪播插件中圖片變形的終極解決方案 使用jqthumb.js
- jQuery實(shí)現(xiàn)圖片輪播效果代碼(基于jquery.pack.js插件)
- BootStrap的JS插件之輪播效果案例詳解
- 原生JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播插件
- js輪播圖的插件化封裝詳解
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)懸停3d菜單展開(kāi)動(dòng)畫(huà)效果
本文主要介紹了jQuery鼠標(biāo)懸停3d菜單展開(kāi)動(dòng)畫(huà)效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
jQuery不使用插件及swf實(shí)現(xiàn)無(wú)刷新文件上傳
這篇文章主要介紹了jQuery不使用插件及swf實(shí)現(xiàn)無(wú)刷新文件上傳,需要的朋友可以參考下2014-12-12
當(dāng)有大量的內(nèi)容或者圖片需要在你的網(wǎng)站或者BLOG上展示的時(shí)候，以幻燈片滑動(dòng)的方式是一個(gè)不錯(cuò)的選擇，這種效果常用于公司網(wǎng)站或者個(gè)人BLOG。2010-10-10
jQuery實(shí)現(xiàn)判斷上傳圖片類(lèi)型和大小的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷上傳圖片類(lèi)型和大小的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)上傳圖片屬性獲取、判定相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
因?yàn)槲业牧粞园迨堑剐?，默認(rèn)又只會(huì)展開(kāi)最新的5條留言，對(duì)于較舊留言甚至是沙發(fā)的同學(xué)，很容易被忽略掉。2009-06-06
jquery實(shí)現(xiàn)控制表格行高亮實(shí)例
jquery實(shí)現(xiàn)控制表格行高亮實(shí)例，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了jQuery支持添加事件的日歷特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了JQuery查找DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery選擇器實(shí)現(xiàn)DOM元素結(jié)點(diǎn)與屬性結(jié)點(diǎn)的查找技巧,需要的朋友可以參考下2015-06-06
jQuery實(shí)現(xiàn)從身份證號(hào)中獲取出生日期和性別的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)從身份證號(hào)中獲取出生日期和性別的方法,結(jié)合實(shí)例形式分析了jQuery數(shù)學(xué)運(yùn)算與字符串操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
JQuery.ajax傳遞中文參數(shù)的解決方法 推薦
許多人在使用JQuery.ajax方法時(shí)肯定會(huì)遇到一個(gè)問(wèn)題。在編碼不是UTF-8的時(shí)候，當(dāng)傳遞的參數(shù)里有中文的時(shí)候，服務(wù)端Request的時(shí)候都會(huì)出現(xiàn)亂碼。2011-03-03