编程 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 相关文章推荐

javascript实现的动态文字变换

Jul 28 Javascript

Google Map Api和GOOGLE Search Api整合实现代码

Jul 18 Javascript

jquery.pagination.js 无刷新分页实现步骤分享

May 23 Javascript

jQuery拖拽div实现思路

Feb 19 Javascript

页面装载js及性能分析方法介绍

Mar 21 Javascript

Bootstrap分页插件之Bootstrap Paginator实例详解

Oct 15 Javascript

jquery 追加元素append、prepend、before、after用法与区别分析

Dec 02 Javascript

Angular2入门--架构总览

Mar 29 Javascript

JS实现侧边栏鼠标经过弹出框+缓冲效果

Mar 29 Javascript

Angular.JS利用ng-disabled属性和ng-model实现禁用button效果

Apr 05 Javascript

layui之table checkbox初始化时选中对应选项的方法

Sep 02 Javascript

JavaScript数组几个常用方法总结

Nov 11 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