Day05jQuery相關插件(日期，放大鏡，表單驗證)

1.日期插件

1)引入datepicker插件相關的js文件和css文件
直接將文件夾引入,導入WdatePicker.js即可
2)在input增加class=’Wdate’,綁定單擊事件，函數名WdatePicker()
3)可控參數:
{
dateFmt 日期顯示格式,
readOnly 是否只讀, input輸入框是否可改
isShowWeek 是否顯示一列今年的第幾周，週數
}
將json對象傳入WdatePicker參數

<script type="text/javascript" src="WdatePicker.js所在文件路徑">
//dateFmt默認yyyy-MM-dd,readOnly默認false ,isShowWeek默認false

生日<input class="Wdate" id="dt" type="text" onclick="WdatePicker()"/>

//傳入json對象
生日:<input style='width:200px' class="Wdate" id="dt" type="text" onclick="WdatePicker({dateFmt:'yyyy年MM月dd日 HH:mm:ss',readOnly:true,isShowWeek:true})"/>

必須將文件夾引入，因爲內部有css，背景顏色等等

2.放大鏡插件

1)引入放大鏡插件的js和css文件

<link rel="stylesheet" href="jquery.jqzoom.css" type='type/css'>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.jqzoom-core.js"></script>

2)將小圖片放在大圖片的超鏈接中

<a id='bg' href="image/big.jpg" >
        <img alt="" src="image/small.jpg" />
</a>

3)通過jquery代碼添加放大鏡效果

$(function(){
            //文檔加載完畢之後，添加放大鏡效果
            $('#bg').jqzoom({

            });

})

4)可選參數
{
zoomWidth:200,//放大後的寬度
zoomHeight:400//放大後的高度
}

$(function(){
            //文檔加載完畢之後，添加放大鏡效果
            $('#bg').jqzoom({
                zoomWidth:200,
                zoomHeight:200
            });

})

3.表單驗證插件

1.引入相關的js文件

<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="message_zh_CN.js"></script>

2.對form添加validate方法

$('#form').validate({
    rules:{
        name屬性值:{規則}
    },
    messages:{
        驗證失敗後顯示的文字(那個屬性:驗證屬性出現問題後顯示的文字)
    }   
})

rules(設置驗證規則)
messages(設置驗證失敗後的文字)，可以不設置，使用默認的文字

 rules(設置驗證規則)：(請參照message_zh_CN.js中內容)
{
    required:true,  //必填
    minlength:數字,      //字符的最小長度
    email:true ,    //郵箱格式
    rangelength:[1,2],//字符串的長度是1到2之間的
    equalTo:'#若與A元素相同，則寫A的id值'
 },
 messages(設置驗證失敗後的文字):{
    username:{required:'用戶名不能爲空',minlength:'用戶名長度不能少於6位'},
    pwd:{required:'密碼不能爲空'},
    repwd:{required:'確認密碼不能爲空',equalTo:'兩次密碼不一致'}
 }

以下爲實例

$(function(){
            $('#fm1').validate({
                rules:{         //定義驗證規則
                    username:{required:true,minlength:6},
                    pwd:{required:true},
                    repwd:{required:true,equalTo:'#pwd1'},//repwd與pwd必須一致,所以用equalTo方法且取pwd的id
                    email:{required:true,email:true}
                },
                messages:{
                    username:{required:'用戶名不能爲空',minlength:'用戶名長度不能少於6位'},
                    pwd:{required:'密碼不能爲空'},
                    repwd:{required:'確認密碼不能爲空',equalTo:'兩次密碼不一致'}
                }
            });
        })