jquery.validate.js 表單驗證

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

表單驗證第一步（添加表單驗證）：

 $(document).ready(function(){
  $("#form").validate({});
 });

表單驗證第二步（form表單裏面的dom元素添加class 或屬性 提交時被驗證）：

<input id="username" name="username" type="text" value="" class="required">
 <input id="username" name="username" type="text" value="" maxlength="50">

   驗證錯誤是的提示信息：

<input id="username" name="username" title="用戶名必填，最大長度50" type="text" value="" class="required" maxlength="50"> >

---

表單驗證的時候有時候會有特殊需求，如錯誤提示的展示方式：固定位置，彈出框，自定義位置

$(document).ready(function(){
  $("#form").validate({
  errorPlacement：callback
  });
 }); 
  function callback(error, element)  {

    error.appendTo(element.parent());//固定位置
  }
  
  function callback(error, element)  {

    tipsFloor(element,2,"red","用戶名必填，最大長度50")//自定義 可彈出框
      }

表單驗證添加自定義方法

$.validator.addMethod(
"rulename",
function(value,element,params){
   if(params[0] > 50) {
    return false;
  }
},
"用戶名必填，最大長度50"
)

使用自定義方法

  $(document).ready(function(){
       $("#form").validate({
          rules:{
             DOMname:{
                 rulename:function() {
                     return $("#domid").val()
                 }
             }          
           }
       });
   });

表單驗證經過時調用處理過程

$(document).ready(function(){
  $("#form").validate({
   submitHandler: function(form) { 
    form.submit(); 
  }
  errorPlacement：callback
  });
});  

$(document).ready(function(){
  $("#form").validate({
   submitHandler: function(form) { 
      form_sava()//ajax請求提交表單 
      return false;
   }
  errorPlacement：callback
  });
});