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 相关文章推荐
获取表单控件原始(初始)值的方法
Aug 21 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
深入学习JavaScript 高阶函数
Jun 11 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
CI框架中zip类应用示例
2014/06/17 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
python实现桌面壁纸切换功能
2019/01/21 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
教师节促销活动方案
2014/02/14 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
设计师求职信模板
2014/05/06 职场文书
说明书范文
2014/05/07 职场文书
法律系毕业生求职信
2014/05/28 职场文书
党在我心中演讲稿
2014/09/02 职场文书
先进个人推荐材料
2014/12/29 职场文书
高校教师个人总结
2015/02/10 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
总结高并发下Nginx性能如何优化
2021/11/01 Servers