一.JQuery之jQuery Validate(表單驗證)外掛程式
1.引用jQuery和jQuery Validate到頁面
2.基本文法設定:
使用validate()來寫驗證規則
rules 設定驗證規則
驗證規則中的一些規則設定：
required:true, //必填
remote: { //遠程校正
url:”remote.php”,
type:”post”
},
minlength:5, //最小長度
maxlength:18 , //最大長度
rangelength:[5,18] , //長度範圍
min:2, //最小值
max:10, //最大值
rang:[2,10] , //值範圍
email:true, //郵箱格式
url:true, //url格式
date:true, //日期格式
dateISO:true, //ISO日期格式
number:true, //數字
digits:true, //整數
equalTo:”#pwd” //與另一元素值相等
messages 設定提示資訊
$('#form1').validate({
//設定驗證規則
rules:{
username: {
required: true,
minlength: 2,
maxlength: 15
}
},
//設定提示資訊
messages:{
username:{
required:"必須填寫使用者名稱" ,
minlength:"使用者名稱長度小於2位",
maxlength:"使用者名稱長度大於15位"
}
}
})
3.自訂規則:
使用這個方法來自訂規則
jQuery.validator.addMethod()
// 郵遞區號驗證
jQuery.validator.addMethod("postCode", function(value, element) {
var codeReg= /^[0-9]{6}$/;
return this.optional(element) || (codeReg.test(value));
}, "請正確填寫您的郵遞區號");
// 手機號碼驗證
jQuery.validator.addMethod("mobile", function(value, element) {
var mobileReg = /^1[34578][0-9]{9}$/;
return this.optional(element) || (mobileReg.test(value));
}, "請正確填寫您的手機號碼");
例：//自訂
//手機 添加設定規則mobile
jQuery.validator.addMethod("mobile",function(value,element){
var mobileReg = /^1[34578][0-9]{9}$/;
return this.optional(element) || (mobileReg.test(value));
})
4.自訂提示樣式
使用errerElement來定義標籤
使用success來定義的樣式和顯示內容
errorElement: "label",
success: function(label) {
label.addClass("ok").html('驗證成功');
},
validClass: "ok"
例：
//驗證通過
errorElement: "span",
success: function(label) {
label.addClass("ok").html('驗證通過');
},
validClass: "ok"
5.普通按鈕提交和超連結非同步提交方式
使用jquery.validate外掛程式預設提交是普通按鈕提交方式，如果使用超連結提交方式
不用通過validate()方法表單驗證也能提交到後台
所以如果碰到超連結提交方式的話我們要對超連結進行處理
當點擊超連結的時候用jQuery方式提交
例：
//當點擊超串連的時候讓他提交
$('.submit').click(function(){
//同步提交會自動觸發validate()方法來驗證是否通過
$('#form1').submit();
});
使用這種方式提交會自動觸發表單驗證，預設提交方式也會自動觸發
如果採用非同步方式提交，他是不會自動觸發表單驗證的
所以我們在提交的時候要手動對錶單驗證進行判斷
首先:給validate()方法聲明一個變數名 (這是一個對象)
然後:使用對象中的form()方法拿到他 傳回值是bool值
普通按鈕使用非同步提交方式
首先:阻止他的預設提交
然後:使用.post或者.get非同步提交方式進行提交
例：
serialize()方法把表單中的值進行序列化提交
$('#form1').submit(function(){
//使用非同步提交他不會自動觸發validate()方法
//所以需要我們是否form()方法自動判斷表單是否通過
if(myValidate.form()){
//使用post方法進行非同步提交
$.post("test.php",$("#form1").serialize(),function(res){
alert(res);
},'json')
}
return false;
});
二.jQuery之jQuery form外掛程式(AJAX表單提交)
為瞭解決AJAX無法非同步提交檔案域的問題
1.1.引用jQuery和jQuery form外掛程式到頁面
2.使用ajaxSubmit()方法
ajaxSubmit()
先阻止預設提交然後使用這個方法來進行提交然後對幕後處理好的資料進行展示
例：
$("#form1").submit(function(){
$(this).ajaxSubmit(function(res){
alert(res);
})
return false;
})
三.jQuery之layer外掛程式(彈窗)
1.引用jQuery和layer外掛程式到頁面
2.這個外掛程式的網站:http://layer.layui.com
3.外掛程式中的一些方法：
//提示框
layer.alert('內容')
//提示層
layer.msg('玩命提示中');
//tips層
layer.tips('Hi，我是tips', '吸附元素選取器，如#id';
)
例：
$("button:first").on("click",function(){
layer.alert("我是提示框");
});
$("button:first").next().on("click",function(){
layer.msg("玩命提示中");
});
$("button:eq(2)").on("click",function(){
//tips: 是它的配置項
layer.tips("我是tips提示層","#div",{
tips:[2,"blue"]
})
});
//頁面層
layer.open()
例：
$("button:eq(3)").on("click",function(){
layer.open({
type:1,
//遮罩層
shadeClose: true,
//遮罩透明度
shade: 0.8,
//不顯示標題
title:"使用者登入",
//加上邊框
skin:"layui-layer-rim",
//寬高
area:['420px','240px'],
//要在彈出層中寫什麼內容
content:"html內容",
//關閉的時候讓他觸發一些事情
cancel:function(index){
layer.close(index);
layer.msg("拜拜",{time:5000,icon:6})
}
})
})
四.jQuery之jQuery lazyload (消極式載入)
1.引用jquery和jquery.lazyload.js到頁面
2.為圖片加入樣式lazy 圖片路徑引用方法用data-original
例:<img src="imgs/loading.gif" alt="" class="lazy" data-original="imgs/4m.jpg"/>
3.js初始化lazyload並設定圖片顯示方式
例:
$(function(){
$("img.lazy").lazyload(function(){
effect:"fadeIn";
})
})
五.jQuery之kindEditor(富文字編輯器)
下載地址:http://kindeditor.net/demo.php
1.引用jquery和kindEditor外掛程式
2.然後調用外掛程式
例：
<script>
$(function(){
KindEditor.ready(function(K){
K.create("#detail",{
allowFileManager:true
})
})
})
</script>
六.myFocus輪播圖神器外掛程式
下載地址:http://demo.jb51.net/js/myfocus/demo.html
1.引入myFocus外掛程式
2.調用外掛程式
<script>
myFocus.set({
id:'myFocus',//焦點圖盒子ID
pattern:'mF_ladyQ',//風格應用的名稱
time:3,//切換時間間隔(秒)
trigger:'mouseover',//觸發切換模式:'click'(點擊)/'mouseover'(懸停)
width:560,//設定圖片地區寬度(像素)
height:300,//設定圖片地區高度(像素)
txtHeight:'default'//文字層高度設定(像素),'default'為預設高度，0為隱藏
});
</script>
七.DatePicker（時間日期選擇外掛程式）
下載地址:http://www.my97.net/dp/demo/index.htm
八.三級聯動外掛程式
日期三級聯動
1.引用外掛程式
<script src="../jQuery_plug-in/js_times/YMDClass.js"></script>
2.調用外掛程式
<script>
//new YMDselect('year','month','day');
new YMDselect('year','month','day',1988,8,8);
</script>
省市縣三級聯動
1.引用外掛程式
<script src="../jQuery_plug-in/qqJsAddress/geo.js"></script>
2.調用外掛程式
<script>
setup();
preselect('河南省');
</script>
