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