jQValidator.js使用說明

標籤：登入   car   更改   exclude   justify   back   table   sheet   styles   

簡介：該外掛程式是基於bootstrapvalidator.js進行修改編寫的，寫法類似，可相容ie7+以上

 

一、 使用方法1. 引用jQuery.js  /  jQValidator.js  /  jQValidator. css

<link href="css/jQValidator.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jQValidator.min.js"></script>

 

2. 編寫HTML

<form class="global-form-box">

　　<div class="form-group">

　　　　<label class="control-label" for="tel"><i class="must">*</i>電話：</label>

　　　　<div class="form-group-cell">

　　　　　　<div class="frm-ctrl-box">

　　　　　　　　<input type="text" class="form-control" name="tel" id="tel"/>

　　　　　　　　<a class="frm-ctrl-clear"></a>

　　　　　　</div>

　　　　</div>

　　</div>

</form>

(1) 表單控制項整體結構及class如上所示，如果不需要表單控制項內容的刪除按鈕，可以去掉 “  frm-ctrl-box “ 和 ” frm-ctrl-clear ” 這兩個結構，只需在 “ form-group-cell ” 裡保留<input/>結構即可；

(2) class = “ form-group-cell ” 可以更改為 “ form-group-bd ” ，只限這兩種。

 

3. 編寫css樣式

可以根據設計稿的情況，在jQValidator.css直接修改相關樣式或在自己的樣式表中書寫新的樣式覆蓋。

 

 

4. 調取外掛程式

<script type="text/javascript">

$(".global-form-box").jQValidator();

</script>

 

二、 參數說明（具體可參考bootstrapValidator的參數設定）

參數	預設值	說明
autoFocus	true	表單的第一個無效欄位是否自動聚焦
clearButton	null	輸入框清除按鈕的class名稱，如果不需要清楚按鈕則可不設定
elementClass	‘bv-form‘	表單的class
feedbackIcons	{...}	驗證表徵圖class名稱，可自訂樣式 valid: ‘glyphicon glyphicon-ok‘, invalid: ‘glyphicon glyphicon-remove‘, validating: ‘glyphicon glyphicon-refresh‘
excluded	[‘:disabled‘, ‘:hidden‘, ‘:not(:visible)‘]	指定不驗證的情況
fields	null	{}, 表單控制項驗證規則組
group	‘.form-group‘	表單控制項的容器class
live	‘enabled‘	生效規則： enabled 欄位值有變化就觸發驗證； disabled, submitted  當點擊提交時驗證並展示錯誤資訊
message	‘This value is not valid‘	預設提示資訊
submitButtons	‘[type="submit"]‘	表單提交按鈕
threshold	null	Number類型，為每個欄位設定統一的開始驗證情況，當輸入字元大於等於設定的數值後才即時觸發驗證
submitHandler	Null	表單提交函數 submitHandler: function(validator, form, submitButton) {} // validator 表單驗證執行個體對象 // form  jq對象，指定表單對象 // submitButton  jq對象，指定表單提交對象

 三、 驗證規則

1. notEmpty：控制項不可為空，必填項；

　　notEmpty: {

　　　　message: ‘請輸入您的帳號’

　　} 

2. stringLength：該控制項字元個數， min為最小字元數，max為最大字元數；

　　stringLength: {

　　　　min: 4,

　　　　max: 8,

　　　　message: ‘字元長度需要在6-12字元間’

　　}

3. identical：該控制項必須與某控制項的值相同

　　identical: {

     　　   field: ‘password‘,

        　　message: ‘兩次密碼不一致‘

　　}

4. different: 該控制項必須與某控制項的值不同

　　different: {  

    　　   field: ‘account‘,//需要進行比較的input name值

      　　 message: ‘不能和帳號相同‘

  　　 }

5. phone：電話驗證規則，‘MB‘—行動電話，‘LD‘—有線電話固定電話

　　phone: {

    　　   message: ‘請輸入正確的電話號碼‘,

       　　phoneType: ‘LD‘  

　　}

6. idCard：身份證驗證規則，15或18位驗證

　　idCard: {

   　　    message: ‘請輸入正確的社會安全號碼碼‘

   　}

7. emailAddress：郵箱驗證規則

　　emailAddress: {

    　　   message: ‘請輸入正確的郵箱地址‘

    　}

8.  regexp：自訂驗證的Regex

　　regexp: {

　　　　regexp: /^1[34578]\d{9}$/,

　　　　message: ‘請填寫正確的聯絡電話‘

　　}

9. remote：ajax驗證。server result:{"valid",true or false} 向服務發送當前input name值，獲得一個json資料。例表示正確：{"valid",true}

　　remote: {

       　　url: ‘exist2.do‘,//驗證地址

         　  message: ‘使用者已存在‘,//提示訊息

              delay :  2000,//每輸入一個字元，就發ajax請求，伺服器壓力還是太大，設定2秒發送一次ajax（預設輸入一個字元，提交一次，伺服器壓力太大）

              type: ‘POST‘//請求方式

              /**自訂提交資料，預設值提交當前input value

              *  data: function(validator) {

             　　 return {

         　　　 　　password: $(‘[name="passwordNameAttributeInYourForm"]‘).val(),

                  　　  whatever: $(‘[name="whateverNameAttributeInYourForm"]‘).val();

   　　　}

         　*/

　　}

 

 

四、 驗證事件

1. 自訂表格單提交按鈕

<form class="form-login-box">

　　<div class="frm-btn-group">

　　　　<a href="javascript:void(0)" class="btn btn-org btn-login-submit">登入</a>

　　</div>

</form>

 

<script type="text/javascript">

$(‘.btn-login-submit‘).click(function(){

　　/// 點擊提交按鈕進行校正

 　  $(‘.form-login-box‘).data(‘jQValidator‘).validate();  

　　/// bool, 所有欄位驗證是否正確

　　var isValid = $(‘.form-login-box‘).data(‘jQValidator‘).isValid();

　　if(isValid){

   　　　////// 如果正確，執行的函數

　　}

 });

</script>

 

 

jQValidator.js使用說明