jquery插件講解：輪播（SlidesJs）+驗證（Validation）

本文轉載自查看原文 2016-07-12 10:12 3577

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或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方法 , 具體帶的參數上面的示例都有注釋。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 表單驗證插件----jquery validation jQuery表單驗證插件 --jQuery Validation Plugin jQuery插件——Validation Plugin表單驗證 jQuery學習之路（8）- 表單驗證插件-Validation jQuery插件之validation插件 jQuery插件之validation插件給jquery-validation插件添加控件的驗證回調方法 jquery-validation.js驗證插件使用詳解 Validation-jQuery表單驗證插件使用方法 SlidesJS - 老牌的響應式 jQuery 幻燈片插件