<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表單校驗(yàn)驗(yàn)證</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個(gè)字符">
    </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)閉鍵盤輸入時(shí)的實(shí)時(shí)校驗(yàn)*/
  onkeyup: null,
  /*添加校驗(yàn)成功后的執(zhí)行函數(shù)--修改提示內(nèi)容，并為正確提示信息添加新的樣式(默認(rèn)是valid)*/
  success: function(label){
    /*label的默認(rèn)正確樣式為valid，需要通過validClass來重置，否則這里添加的其他樣式不能被清除*/
    label.text('').addClass('valid');
  },
  /*重寫校驗(yàn)元素獲得焦點(diǎn)后的執(zhí)行函數(shù)--增加[1.光標(biāo)移入元素時(shí)的幫助提示,2.校驗(yàn)元素的高亮顯示]兩個(gè)功能點(diǎn)*/
  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.校驗(yàn)元素的高亮顯示*/
    $(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 ) );
    }
  },
  /*重寫校驗(yàn)元素焦點(diǎn)離開時(shí)的執(zhí)行函數(shù)--移除[1.添加的幫助提示,2.校驗(yàn)元素的高亮顯示]*/
  onfocusout: function( element ) {
    /*1.幫助提示信息移除*/
    $(element).parent().children(".tip").remove();
    /*2.校驗(yàn)元素高亮樣式移除*/
    $(element).removeClass('highlight');
    /*3.替換下面注釋的原始代碼，任何時(shí)候光標(biāo)離開元素都觸發(fā)校驗(yàn)功能*/
    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個(gè)字符",
        maxlength: "密碼長度不能超過16個(gè)字符"
      },
      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;
}

/*******************************插件字段校驗(yàn)*****************************************/
$.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位"
);