jQuery Validate表單驗證插件實現(xiàn)代碼

<script src="jquery.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="lib/jquery.validate.extend.js"></script>

<form action="#" method="post" id="regForm">
 <fieldset>
  <legend>jquery-validate表單校驗驗證</legend>
  <div class="item">
   <label for="username" class="item-label">用戶名:</label>
   <input type="text" id="username" name="username" class="item-text" placeholder="設(shè)置用戶名"
   autocomplete="off" tip="請輸入用戶名">
  </div>
  <div class="item">
   <label for="password" class="item-label">密碼:</label>
   <input type="password" id="password" name="password" class="item-text" placeholder="設(shè)置密碼"
   tip="長度為6-16個字符">
  </div>
  <div class="item">
   <label for="password" class="item-label">確認(rèn)密碼:</label>
   <input type="password" name="repassword" class="item-text" placeholder="設(shè)置確認(rèn)密碼">
  </div>
  <div class="item">
   <label for="amt" class="item-label">金額:</label>
   <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金額"
   tip="交易金額必須大于0，且最多有兩位小數(shù)">
  </div>
  <div class="item">
   <input type="submit" value="提交" class="item-submit">
  </div>
 </fieldset>
</form>

/*******************************插件新功能-設(shè)置插件validator的默認(rèn)參數(shù)*****************************************/
$.validator.setDefaults({
 /*關(guān)閉鍵盤輸入時的實時校驗*/
 onkeyup: null,
 /*添加校驗成功后的執(zhí)行函數(shù)--修改提示內(nèi)容，并為正確提示信息添加新的樣式(默認(rèn)是valid)*/
 success: function(label){
  /*label的默認(rèn)正確樣式為valid，需要通過validClass來重置，否則這里添加的其他樣式不能被清除*/
  label.text('').addClass('valid');
 },
 /*重寫校驗元素獲得焦點后的執(zhí)行函數(shù)--增加[1.光標(biāo)移入元素時的幫助提示,2.校驗元素的高亮顯示]兩個功能點*/
 onfocusin: function( element ) {
  this.lastActive = element;
  
  /*1.幫助提示功能*/
  this.addWrapper(this.errorsFor(element)).hide();
  var tip = $(element).attr('tip');
  if(tip && $(element).parent().children(".tip").length === 0){
   $(element).parent().append("<label class='tip'>" + tip + "</label>");
  }
  
  /*2.校驗元素的高亮顯示*/
  $(element).addClass('highlight');

  // Hide error label and remove error class on focus if enabled
  if ( this.settings.focusCleanup ) {
   if ( this.settings.unhighlight ) {
    this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
   }
   this.hideThese( this.errorsFor( element ) );
  }
 },
 /*重寫校驗元素焦點離開時的執(zhí)行函數(shù)--移除[1.添加的幫助提示,2.校驗元素的高亮顯示]*/
 onfocusout: function( element ) {
  /*1.幫助提示信息移除*/
  $(element).parent().children(".tip").remove();

  /*2.校驗元素高亮樣式移除*/
  $(element).removeClass('highlight');
  
  /*3.替換下面注釋的原始代碼，任何時候光標(biāo)離開元素都觸發(fā)校驗功能*/
  this.element( element );
  
  /*if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
   this.element( element );
  }*/
 }
});

<script>
$(document).ready(function(){
 $("#regForm").validate({
  rules: {
   username:{
    required: true,
    minlength: 2
   },
   password:{
    required: true,
    minlength: 6,
    maxlength: 16
   },
   repassword:{
    required: true,
    equalTo: "#password"
   },
   amt: {
    required: true,
    amtCheck: true
   }
  },
  messages:{
   username:{
    required: "用戶名不能為空",
    minlength: "用戶名的最小長度為2"
   },
   password:{
    required: "密碼不能為空",
    minlength: "密碼長度不能少于6個字符",
    maxlength: "密碼長度不能超過16個字符"
   },
   repassword:{
    required: "確認(rèn)密碼不能為空",
    equalTo: "確認(rèn)密碼和密碼不一致"
   },
   amt: {
    required: "金額不能為空"
   }
  }
 });
});
</script>

body{
 font-family: Microsoft Yahei;
 font-size: 15px;
}
fieldset{ width: 680px; }
legend{ margin-left: 8px; }
.item{
 height: 56px;
 line-height: 36px;
 margin: 10px;
}
.item .item-label{
 float: left;
 width: 80px;
 text-align: right;
}
.item-text{
 float: left;
 width: 244px;
 height: 16px;
 padding: 9px 25px 9px 5px;
 margin-left: 10px;
 border: 1px solid #ccc;
 overflow: hidden;
}
.item-select{
 float: left;
 height: 34px;
 border: 1px solid #ccc;
 margin-left: 10px;
 font-size: 14px;
 padding: 6px 0px;
}
.item-submit{
 margin-left: 88px;
}
input.error{
 border: 1px solid #E6594E;
}
input.highlight{
 border: 1px solid #7abd54;
}
label.error,label.tip{
 float: left;
 height: 32px;
 line-height: 32px;
 font-size: 14px;
 text-align: left;
 margin-left: 5px;
 padding-left: 20px;
 color: red;
 background: url('error.png') no-repeat left center;
}
label.tip{
 color: #aaa;
 background: url('tip.png') no-repeat left center;
}
label.valid{
 background: url('valid.png') no-repeat left center;
 width: 32px;
}

/*******************************插件字段校驗*****************************************/
$.validator.addMethod(
 "amtCheck",
 function(value, element){
  /*var dotPos = value.indexOf('.');
  return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/
  
  return value && /^\d*\.?\d{0,2}$/.test(value);
 },
 "金額必須大于0且小數(shù)位數(shù)不超過2位"
);