编程 Javascript

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

Posted in Javascript onJuly 12, 2016

SlidesJs（轮播支持触屏）——官网（http://slidesjs.com）

1.简介

SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件。支持键盘，触摸，css3转换。

2.代码

<!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="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.设置上下切换按钮

可以自定样式：

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

4.设置分页切换

可以自定样式：

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

5.自动播放

可以自定样式：

<a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a>
<a class="slidesjs-stop slidesjs-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）

以下是针对：jQuery Validation Plugin - v1.15.0 - 2/24/2016 版本

注意：jquery Vaildation Engine 跟以下讲的不是同一款插件

示例：

<form action="" id="demo">
<label for="username">用户名</label><input type="text" name="username" id="username"><br/>
<label for="password">密码</label><input type="text" name="password" id="password"><br/>
<label for="password_confirm">确认密码</label><input type="text" name="password_confirm"><br/>
<label for="email">email</label><input type="text" name="email"><br/>
<input type="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: "Required input",
minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
}
}); 
$( "#myinput" ).rules( "remove" );//移除全部
$( "#myinput" ).rules( "remove", "min max" );//移除min max

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) {
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
});

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){reruen true;} //返回true的话才校验,name是否必填
｝,
email: {
email: true,

min:{


param:15,
//单独值的话 用param 代替


depends：function(element){reruen true;}

}
}
}
});

messages — 定义提示信息

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

groups — 对一组元素的验证，用一个错误提示，用errorPlacement 控制出错信息的位置

$("#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);
}
}
});

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验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

羯瑞。♑

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS中style属性

Oct 11 Javascript

网页自动刷新，不产生嗒嗒声的一个解决方法

Mar 27 Javascript

js函数使用技巧之 setTimeout(function(){},0)

Feb 09 Javascript

分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug

Jan 10 Javascript

javascript匀速动画和缓冲动画详解

Oct 20 Javascript

JS制作适用于手机和电脑的通知信息效果

Oct 28 Javascript

JavaScript实现数组降维详解

Jan 05 Javascript

详解 vue.js用法和特性

Oct 15 Javascript

vue展示dicom文件医疗系统的实现代码

Aug 27 Javascript

使用JavaScript计算前一天和后一天的思路详解

Dec 20 Javascript

使用eslint和githooks统一前端风格的技巧

Jul 29 Javascript

原生js+canvas实现验证码

Nov 29 Javascript

JavaScript中的事件委托及好处

Jul 12 #Javascript

原生js实现class的添加和删除简单代码

Jul 12 #Javascript

JavaScript动态添加事件之事件委托

Jul 12 #Javascript

html+js实现简单的计算器代码(加减乘除)

Jul 12 #Javascript

Javascript iframe交互并兼容各种浏览器的解决方法

Jul 12 #Javascript

javascript加减乘除的简单实例

Jul 12 #Javascript

浅谈javascript中的加减时间

Jul 12 #Javascript