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

Javascript 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
JavaScript+HTML实现学生信息管理系统
Apr 20 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
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
CSS常用网站布局实例
2008/04/03 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
js date 格式化
2017/02/15 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python pymongo模块用法示例
2018/03/31 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
python中import与from方法总结(推荐)
2019/03/21 Python
python实现多线程端口扫描
2019/08/31 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
python自动化办公操作PPT的实现
2021/02/05 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
管理心得体会
2013/12/28 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL