jQuery插件学习教程之SlidesJs轮播+Validation验证
SlidesJs（轮播支持触屏）——官网（http://slidesjs.com）
1.简介
SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件。支持键盘，触摸，css3转换。
2.代码
<!doctypehtml>
<head>
<style>
/*Preventsslidesfromflashing*/
#slides{
display:none;
}
</style>
<scriptsrc="http://code.jquery.com/jquery-latest.min.js"></script>
<scriptsrc="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width:940,
height:528
});
});
</script>
</head>
<body>
<divid="slides">
<imgsrc="http://placehold.it/940x528">
<imgsrc="http://placehold.it/940x528">
<imgsrc="http://placehold.it/940x528">
<imgsrc="http://placehold.it/940x528">
<imgsrc="http://placehold.it/940x528">
</div>
</body>
API简介
1.设置轮播的宽高（默认值都为auto）
$("#slides").slidesjs({
width:700,
height:393
});
2.设置从那张开始（默认值为1）
$("#slides").slidesjs({
start:3//这里注意数值从1开始，不是0；默认值0
});
3.设置上下切换按钮
可以自定样式：
<aclass="slidesjs-previousslidesjs-navigation"href="#"title="Previous">Previous</a>
<aclass="slidesjs-nextslidesjs-navigation"href="#"title="Next">Next</a>
$("#slides").slidesjs({
navigation:{
active:true,//显示或隐藏前一张后一张切换按钮；默认值为true,
effect:"slide"//设置切换的方式，slide:平滑，fade:渐显；默认值slide
}
});
4.设置分页切换
可以自定样式：
<ulclass="slidesjs-pagination"><liclass="slidesjs-pagination-item"><ahref="#"data-slidesjs-item="0"class="active">1</a></li><liclass="slidesjs-pagination-item"><ahref="#"data-slidesjs-item="1">2</a></li><liclass="slidesjs-pagination-item"><ahref="#"data-slidesjs-item="2">3</a></li><liclass="slidesjs-pagination-item"><ahref="#"data-slidesjs-item="3">4</a></li></ul>
$("#slides").slidesjs({
pagination:{
active:true,//显示或隐藏分页；默认值true
effect:"slide"//这里可以设置切换方式，跟上下页切换一样，但是跟上下页不冲突；默认值slide
}
});
5.自动播放
可以自定样式：
<aclass="slidesjs-playslidesjs-navigationslidesjs-playing"href="#"title="Play"style="display:none;">Play</a>
<aclass="slidesjs-stopslidesjs-navigation"href="#"title="Stop"style="">Stop</a>
$("#slides").slidesjs({
play:{
active:true,//开始自动播放功能；默认值true
effect:"slide",//切换方式，跟上面两个切换方式不冲突；默认值slide
interval:5000,//在每一个幻灯片上花费的时间；默认值5000
auto:false,//开始自动播放；默认值false
swap:true,//显示或隐藏自动播放和停止按钮；默认值true
pauseOnHover:false,//鼠标移入是否暂停；默认值false
restartDelay:2500//重启延迟；默认值2500
}
});
6.效果配置
$("#slides").slidesjs({effect:{
slide:{
speed:200//切换花费的时间；默认值200
},
fade:{
speed:300,//切换花费的时间；默认值300
crossfade:true//交叉切换，设置为false,会看到背景色；默认值true
}
}
});
7.回调函数
$("#slides").slidesjs({
callback:{
loaded:function(number){
//幻灯片载入完成时
},
start:function(number){
//切换开始时
},
complete:function(number){
//切换结束时
}
}
});
validation（表单验证）——官网（http://jqueryvalidation.org）
以下是针对：jQueryValidationPlugin-v1.15.0-2/24/2016版本
注意：jqueryVaildationEngine跟以下讲的不是同一款插件
示例：
<formaction=""id="demo">
<labelfor="username">用户名</label><inputtype="text"name="username"id="username"><br/>
<labelfor="password">密码</label><inputtype="text"name="password"id="password"><br/>
<labelfor="password_confirm">确认密码</label><inputtype="text"name="password_confirm"><br/>
<labelfor="email">email</label><inputtype="text"name="email"><br/>
<inputtype="submit"value="提交">
</form>
<script>
$(function(){
$('#demo').validate({
rules:{//规则
username:{//这边的username，取得是form里面name的值
required:true,//必填项
minlength:2,//最小长度
remote:"http://taojiaqu.com"//url验证配对，只能返回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:{//错误显示，跟上面的一一对应，没有设置的话，会显示默认的
username:{
required:'请输入用户名',
minlength:'用户名最小为2',
remote:"该用户名被使用了"
},
password:{
required:'请输入密码',
minlength:'密码最小长度为5'
},
password_confirm:{
required:'请确认密码',
minlength:'密码最小长度为5',
equalTo:"两次密码不一致"
},
email:{
required:'请输入邮箱',
email:'您输入的邮箱不对',
remote:'该邮箱已被实用'
}
},
errorElement:"b",//设置错误标签b
errorPlacement:function(error,element){//错误操作，error错误信息，element错误input对象
element.after(error);
},
submitHandler:function(){//点击提交表单回调函数，如果还有验证不通过择提示错误信息，不执行该函数
},
success:function(label,element){//验证通过的函数//element：input对象//labal：提示信息的对象
},
highlight:function(element,errorClass,validClass){//上一个验证不通过的话，执行该函数//element：input对象//errorClass：错误class类名//validClass:确认class类名
},
unhighlight:function(element,errorClass,validClass){//上一个验证通过的话，执行该函数
}
})
})
</script>
API
1.1方法
validate()–Validates核心方法
$('#demo').validate({
rules:{
//。。。
},
messages:{
//。。。
}
})
valid()–验证表单是否通过，返回true或false
$('#taojiaqu').validate()
alert($('#taojiaqu').valid());
rules()–读取、添加和删除一个元素的规则
$("#myinput").rules();//返回一个规则对象$("#myinput").rules("add",{
required:true,
minlength:2,
messages:{
required:"Requiredinput",
minlength:jQuery.validator.format("Please,atleast{0}charactersarenecessary")
}
});
$("#myinput").rules("remove");//移除全部
$("#myinput").rules("remove","minmax");//移除minmax
1.2公共方法
Validator.form()–验证表单
Validator.element()–验证指定的input
validator.element("#myselect");
Validator.resetForm()–重置表单
Validator.showErrors()–显示错误信息
Validator.numberOfInvalids()–返回错误的字段数
1.3静态方法
jQuery.validator.addMethod(name,method[,message])–添加自定义验证方法
//返回true或falsejQuery.validator.addMethod("domain",function(value,element){
returnthis.optional(element)||/^http:\/\/taojiaqu.com/.test(value);
},"错误信息");
jQuery.validator.format(template,argument,argumentN…)–格式化字符串
varformat=jQuery.validator.format("{0}--{1}--{2}");
console.log(format("a","b","c"));//a--b--c
jQuery.validator.setDefaults()–修改默认设置
jQuery.validator.setDefaults({
debug:true//所有的都设置debug模式
});
jQuery.validator.addClassRules()–统一添加某个类的校验规则
//添加class为name的校验规则：必填，最小长度为2jQuery.validator.addClassRules("name",{
required:true,
minlength:2
});
2.选择器
:blank–选择value值为空的input
:filled–选择value有值的input
:unchecked–选择未被选中的checkbox
3.验证规则
required–必填，默认true
remote–远程请求验证，请求地址返回true或false
minlength–最小长度，中文字算1个字符
maxlength–最大长度
rangelength–给定长度范围，例：[2,5]
min–最小值，数值型
max–最大值
range–给定最大最小取值范围，例：[2,100]
step–设置步骤
email–必须是一个邮箱email格式
url–必须是一个地址url
date–必须输入正确格式的日期
dateISO–必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22只验证格式，不验证有效性
number–必须输入合法的数字(负数，小数)
digits–必须输入整数
equalTo：'#abc'–输入值必须和#abc相同
以下验证规则需加载——additional-methods.min.js
accept–验证上传的文件MINE类型，例：accept："image";多种类型逗号（，）隔开
creditcard–验证信用卡卡号
extension–验证上传的文件的后缀，例：extension："dll|exe";;多种类型逗号（|）隔开
phoneUS–验证是否为美国号码
require_from_group–设置类目中有N个是必填项
mobile_phone:{
require_from_group:[1,".phone-group"]//这边的1表示三项中只需要填写一项就可以，后面是class名
},
home_phone:{
require_from_group:[1,".phone-group"]
},
work_phone:{
require_from_group:[1,".phone-group"]
}
4.validate()方法的配置项
debug—开启关闭debug模式，阻止提交
$(".selector").validate({
debug:true
});
submitHandler—通过验证后运行的函数，可以加上表单的提交方法
$(".selector").validate({
submitHandler:function(form){
$(form).ajaxSubmit();
}
});
$(".selector").validate({
submitHandler:function(form){
form.submit();
}
});
invalidHandler—验证没通过，提交时触发的方法
$(".selector").validate({
invalidHandler:function(event,validator){
//event:自定义事件对象
//validator:当前验证的实例
}
});
ignore—对某些元素不进行验证
$("#myform").validate({
ignore:".ignore"
});
rules—定义校验规则，有个隐藏的参数depends:在满足什么条件下才验证次规则
$(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
}
});$(".selector").validate({
rules:{
name:｛depends：function(element){reruentrue;}//返回true的话才校验,name是否必填｝,
email:{
email:true,min:{param:15,//单独值的话用param代替depends：function(element){reruentrue;}}
}
}
});
messages—定义提示信息
$(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"请输入您的名字",
email:{
required:"请输入的的邮箱",
email:"请输入正确的邮箱地址"
}
}
});
groups—对一组元素的验证，用一个错误提示，用errorPlacement控制出错信息的位置
$("#myform").validate({
groups:{
username:"fnamelname"
},
errorPlacement:function(error,element){
if(element.attr("name")=="fname"||element.attr("name")=="lname"){
error.insertAfter("#lastname");
}else{
error.insertAfter(element);
}
}
});
onsubmit—是否在提交时验证
onfocusout—是否在获取焦点时验证
onkeyup—是否在敲击键盘时验证
onclick—是否在鼠标点击数验证
focusInvlid—提交表单，未通过验证的表单是否获得焦点（默认第一个）
focusCleanup—提交表单，未通过验证的表单是否移除错误信息
errorClass—指定错误提示的class类名
validClass—指定验证通过的class类名
errorElement—使用什么标记错误标签
$(".selector").validate({
errorElement:"em"
});
//<em>错误信息</em>
wrapper—使用什么标签把上面的errorElement包起来
errorLableContainer—把错误信息统一放在一个容器里面
errorContainer—显示或隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏
showErrors—可以显示总的多少个未通过验证
errorPlacement：function(error,element)—自定义错误信息的位置,error:错误信息、element：验证的元素
success—要验证的元素通过验证后的回调
highlight—可以为未通过的元素加效果
unhighlight—可以为通过的元素加效果
以上所述是小编给大家介绍的jQuery插件学习教程之SlidesJs轮播+Validation验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！