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
  });
});

转载于:https://my.oschina.net/u/864135/blog/545904