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:'两次密码不一致'}
                }
            });
        })