jquery插件讲解:轮播(SlidesJs)+验证(Validation)

转自:http://www.cnblogs.com/chenrf/p/5654093.html#undefined

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 — 可以为通过的元素加效果

后面举例的方法,都是function方法 , 具体带的参数上面的示例都有注释。

时间: 2024-11-07 01:46:58

jquery插件讲解:轮播(SlidesJs)+验证(Validation)的相关文章

写jquery插件【轮播图】历程

轮播图插件的任务已经接近尾声,在书写轮播图期间确实有一些小的感触的.感兴趣的可以访问我的轮播图的线上地址:轮播图 首先,轮播图插件其实并不是我第一次写,之前也写过,不过那时候是按照别人的思路写下来的,算起来大概有一年了,这次又一次开始轮播图是因为拜读了<单页面Web应用 JavaScript从前端到后端>的这本书的1-4章,我开始跃跃欲试的想把它用到自己的代码中,书本中前四章的思想是将js模块化,我就跟着作者的代码思路以及代码习惯先尝试着做了个轮播图,发现作者的模块化思想非常好,时间长了,养成

jQuery补充,基于jQuery的bxslider轮播器插件

基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=n

PgwSlideshow-基于Jquery的图片轮播插件

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: 体验度很好的响应式设计 支持桌面及移动设备 身形矫健,压缩后的文件只有不到4KB 你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlideshow核

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &

jQuery幻灯相册轮播源代码

体验效果:http://hovertree.com/texiao/jquery/ HTML文件代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery幻灯相册轮播效果- 何问起</title> <meta cha

jQuery简单的轮播特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Bootstrap的js插件之轮播(carousel)

轮播请查看以下示例,基本已经涵盖最常用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>js插件_轮播</titl

jQuery个性化图片轮播效果

购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:   最外层容器区域,如上图红色线框矩形   选项卡区域 两个事件:    鼠标悬浮或鼠标划入mouseover    鼠标离开mouseleave /**大屏广告滚动样式**/ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

基于Jquery实现的轮播图

前阵子我用js写了一个轮播图,现在的话换成jQuery来实现,先看看效果图 首先是html结构,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery版图片轮播</title> <link rel="stylesheet" href="css/index.css" /> &l

[Jquery]焦点图轮播效果

$(function(){    var $next=$(".right");    var $prev=$(".left");    var $list_num=$(".list-num a");    var $banner=$(".banner");    var $list_banner=$(".list-banner");    var index=1;    var timer;    var