zoukankan      html  css  js  c++  java

  • jquery插件讲解：轮播（SlidesJs）+验证（Validation）

    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({
         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({
     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或false
    jQuery.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的校验规则：必填，最小长度为2
    jQuery.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方法 , 具体带的参数上面的示例都有注释。
  • 相关阅读:
    ExtJs自学教程(1)：从一切API开始
    集成框架 javaweb开发平台ssmy_m(生成代码) java struts2 mybatis spring maven jquery
    hdu2203 KMP水的问题
    Hibernate制图（两）——许多-于─关系映射
    FPGA 异步时钟处理方
    在Magento产品页面的使用jqZoom
    struts2基本介绍
    让你提前知道软件开发(45)：第一印象的代码
    struts2 模型分配问题和延迟加载问题
    性能优化（一个）Hibernate 使用缓存（一个、两、查询）提高系统性能
  • 原文地址：https://www.cnblogs.com/chenrf/p/5654093.html
Copyright © 2011-2022 走看看