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

前端之家收集整理的这篇文章主要介绍了jQuery插件学习教程之SlidesJs轮播+Validation验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

SlidesJs(轮播支持触屏)——官网(

http://slidesjs.com

1.简介

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

2.代码

API简介

1.设置轮播的宽高(默认值都为 auto)

2.设置从那张开始(默认值为 1)

3.设置上下切换按钮

可以自定样式:

$("#slides").slidesjs({ navigation: { active: true,  //显示或隐藏前一张后一张切换按钮;默认值为true,effect: "slide"  //设置切换的方式,slide:平滑,fade:渐显;默认值slide } });

4.设置分页切换

可以自定样式:

  
  •   
  •   
  • $("#slides").slidesjs({ pagination: { active: true,  //显示或隐藏 分页;默认值true effect: "slide"  //这里可以设置切换方式,跟上下页切换一样,但是跟上下页不冲突;默认值slide } });

    5.自动播放

    可以自定样式:

    6.效果配置

    7.回调函数

    幻灯片载入完成时 },start: function(number) { // 切换开始时 },complete: function(number) { // 切换结束时 } } });

    validation(表单验证)——官网(

    http://jqueryvalidation.org

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

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

    示例:

    用户名

    API

    1.1方法

    方法 $('#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.numberOfInvalids() – 返回错误的字段数

    1.3静态方法

    添加自定义验证方法 //返回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",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个是必填项

    4.validate()方法的配置项

    debug — 开启关闭debug模式,阻止提交

    submitHandler — 通过验证后运行的函数,可以加上表单的提交方法

    invalidHandler — 验证没通过,提交时触发的方法

    自定义事件对象 //validator:当前验证的实例 } });

    ignore — 对某些元素不进行验证

    rules — 定义校验规则,有个隐藏的参数 depends:在满足什么条件下才验证次规则

    required",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 — 定义提示信息

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

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

    onsubmit —是否在提交时验证

    onfocusout —是否在获取焦点时验证

    onkeyup — 是否在敲击键盘时验证

    onclick — 是否在鼠标点击数验证

    focusInvlid — 提交表单,未通过验证的表单是否获得焦点(默认第一个)

    focusCleanup — 提交表单,未通过验证的表单是否移除错误信息

    errorClass — 指定错误提示的class类名

    validClass — 指定验证通过的class类名

    errorElement — 使用什么标记错误标签

    错误信息

    wrapper — 使用什么标签把上面的errorElement 包起来

    errorLableContainer — 把错误信息统一放在一个容器里面

    errorContainer — 显示或隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏

    showErrors — 可以显示总的多少个未通过验证

    errorPlacement:function(error,element) — 自定义错误信息的位置,error:错误信息、element:验证的元素

    success — 要验证的元素通过验证后的回调

    highlight — 可以为未通过的元素加效果

    unhighlight — 可以为通过的元素加效果

    以上所述是小编给大家介绍的jQuery插件学习教程之SlidesJs轮播+Validation验证。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    猜你在找的jQuery相关文章