jQuery插件学习教程之SlidesJs轮播+Validation验证

$("#slides").slidesjs({
width: 700,
height: 393
}); 

$("#slides").slidesjs({
start: 3 //这里注意数值从1开始，不是0；默认值0
});

Previous
Next 
$("#slides").slidesjs({
navigation: {
active: true,　　//显示或隐藏前一张后一张切换按钮；默认值为true,
effect: "slide"　　//设置切换的方式，slide:平滑，fade:渐显；默认值slide
}
}); 

　　
1
　　
2
　　
3
　　
4
 
$("#slides").slidesjs({
pagination: {
active: true,　　//显示或隐藏 分页；默认值true
effect: "slide"　　//这里可以设置切换方式，跟上下页切换一样，但是跟上下页不冲突；默认值slide
}
}); 

Play
Stop 
$("#slides").slidesjs({
play: {
active: true,　　　　//开始自动播放功能；默认值true
effect: "slide",　　//切换方式，跟上面两个切换方式不冲突；默认值slide
interval: 5000,　　　//在每一个幻灯片上花费的时间；默认值5000
auto: false,　　　　　//开始自动播放；默认值false
swap: true,　　　　　　//显示或隐藏 自动播放和停止按钮；默认值true
pauseOnHover: false,　　//鼠标移入是否暂停；默认值false
restartDelay: 2500　　//重启延迟；默认值2500
}
}); 

$("#slides").slidesjs({　　effect: {
slide: {
speed: 200　　//切换花费的时间；默认值200
},
fade: {
speed: 300,　　//切换花费的时间；默认值300
crossfade: true　　//交叉切换，设置为false,会看到背景色；默认值true
}
}
}); 

$("#slides").slidesjs({
callback: {
loaded: function(number) {
// 幻灯片载入完成时
},
start: function(number) {
// 切换开始时
},
complete: function(number) {
// 切换结束时
}
}
});

用户名

密码

确认密码

email



 

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: "Required input",
minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
}
}); 
$( "#myinput" ).rules( "remove" );//移除全部
$( "#myinput" ).rules( "remove", "min max" );//移除min max

Validator.form() – 验证表单
Validator.element() – 验证指定的 input
validator.element( "#myselect" ); 
Validator.resetForm() – 重置表单
Validator.showErrors() – 显示错误信息
Validator.numberOfInvalids() – 返回错误的字段数

jQuery.validator.addMethod( name, method [, message ] ) – 添加自定义验证方法
//返回true或falsejQuery.validator.addMethod("domain", function(value, element) {
return this.optional(element) || /^http:\/\/taojiaqu.com/.test(value);
}, "错误信息"); 
jQuery.validator.format( template, argument, argumentN… ) – 格式化字符串
var format=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
}); 

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"]
}

$(".selector").validate({
debug: true
}); 

$(".selector").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});
$(".selector").validate({
submitHandler: function(form) {
form.submit();
}
});

$(".selector").validate({
invalidHandler: function(event, validator) {
//event :自定义事件对象
//validator:当前验证的实例
}
});

$("#myform").validate({
ignore: ".ignore"
}); 

$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
}
}); $(".selector").validate({
rules: {
name: ｛　　　　depends：function(element){reruen true;} //返回true的话才校验,name是否必填　　｝,
email: {
email: true,　　　　min:{　　　　　　param:15,　　//单独值的话 用param 代替　　　　　　depends：function(element){reruen true;}　　　　}
}
}
}); 

$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "请输入您的名字",
email: {
required: "请输入的的邮箱",
email: "请输入正确的邮箱地址"
}
}
}); 

$("#myform").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
error.insertAfter("#lastname");
} else {
error.insertAfter(element);
}
}
}); 

$(".selector").validate({
errorElement: "em"
});
//错误信息