前台验证框架 jqueryvalidation

官网： http://jqueryvalidation.org

需引入两个js文件：

<script type="text/javascript" src="${util.path}/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="${util.path}/js/validate/jquery.validate.js"></script>

 

1.ajax调用后台的验证:

<script type="text/javascript">

$("#myform").validate({

rules: {

phone: {

required: true,

minlength: 2,

remote: "${util.path}/user/validatePhone.do"

}

},

messages: {

phone: {

required: "Enter a username",

minlength: "Enter at least {0} characters",

remote: "ajax验证不通过"

}

}

});

</script>

 

2.自定义的验证：

$.validator.addMethod("phoneValidate", function(value) {

 

return value == "18902467883";

}, '输入的号码必须为18902467883');

 

$("#myform").validate({

rules: {

phone: "phoneValidate"

}

});

其中：myform 为form的id, phone为要验证元素的id.

3.失焦点时的验证：

  var validator = $("#form1").validate({
   onfocusout: function(element) { $(element).valid();},
   rules : {
    test1 : {
     required : true
    },
    test2 : {
     required : true
    }
   }
  });
  
  $(function() {
   $("#submitForm").click(function() {
    validator.form();
    $.post("/test", $("#form1").serialize(), function(date) {
     alert("success");
    });
   });
  });