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

站长资源 2024/11/30 佚名

2 0 1

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="/UploadFiles/2021-04-02/jquery-latest.min.js">

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

slidesjs轮播,validation验证

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“jQuery插件学习教程之SlidesJs轮播+Validation验证”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月30日

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

Extjs 点击复选框在表格中增加相关信息行

JavaScript中的事件委托及好处

评论“jQuery插件学习教程之SlidesJs轮播+Validation验证”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

Extjs 点击复选框在表格中增加相关信息行

JavaScript中的事件委托及好处

评论“jQuery插件学习教程之SlidesJs轮播+Validation验证”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存