jquery validate学习心得

据说，javascript最初的由来就是为了解决表单的验证问题，当然现在的js已经能够用来做各种各样炫酷的效果，不过表单验证一直以来都是js很重要的一个用途（在博客园第一篇博客，不知道说些什么开头~~）。

最近刚刚接触到了一个简答易用的表单验证插件jquery validation，下面来分享下这几天收集到的一些资料与学习心得。

一个优秀的表单验证插件：

     作为受众多web开发者追捧的validation，它理应拥有如下各种优点:

1.内置验证规则：拥有必填，url，数字，email等19类验证规则；

2.可方便的自定义验证规则；

3.有默认的验证信息提示，并可通过自定义提示信息覆盖默认信息；

4.实时验证：可通过keyup或blur事件触发验证，而非仅在表单提交时

默认校验规则：

$(".selector").validate
({
debug:true
})

$.validator.setDefaults({
debug:true
})

$(".selector").validate({
submitHandler:function(form) {
$(form).ajaxSubmit();
}
})

$("#myform").validate({
ignore:".ignore"
})

$(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
}
})

$(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"Name不能为空",
email:{
required:"E-mail不能为空",
email:"E-mail地址不正确"
}
}
})

$("#myform").validate({
groups:{
username:"fname
lname"
},
errorPlacement:function(error,element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname")
error.insertAfter("#lastname");
else
error.insertAfter(element);
},
   debug:true
})

$(".selector").validate({
onsubmit:false
})

$(".selector").validate({
onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({
errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() {
alert("Submitted!")
}
})

$(".selector").validate({
showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
this.defaultShowErrors();
}
})

$("#myform").validate({
rrorPlacement:function(error,element) {
error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})

$("#myform").validate({
success:"valid",
        submitHandler:function() {
alert("Submitted!")
}
})

首先第一步，地球人都知道——要导入相应的js库；

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>另外，一般我们还会引入另一个js文件，validate_expand.js，具体看下列源代码截图：

注：使用之前有必要检查下正则表达式，如手机号验证的表达式为：mobile = /(^(13|14|15|18)\d{9}$)/;   这显然是不全面的，现在已经有170号段的了，
所以要改成/(^(13|14|15|17|18)\d{9}$)/，否则可能会出现错误。

然后就可以开始正式引用了，如下所示

 $().ready(function() {
  $("#signupForm").validate({  //验证必须是针对form，否则无效；
   onfocusout:function(element) { $(element).valid();},/验证触发方式
             onkeyup:function(element){
                 $(element).valid();
             },
       //验证规则
         rules: {
     email: {
     required: true,
     email: true
    },
    password: {
     required: true,
     minlength: 6
    },
    confirm_password: {
     required: true,
     minlength: 6,
     equalTo: "#password"
    }
   },
       //提示信息
         messages: {
    email: {
     required: "请输入Email地址",
     email: "请输入正确的email地址"
    },
    password: {
     required: "请输入密码",
     minlength: jQuery.format("密码不能小于{0}个字 符")
    },
    confirm_password: {
     required: "请输入确认密码",
     minlength: "确认密码不能小于5个字符",
     equalTo: "两次输入密码不一致不一致"
    }
   }，
   errorPlacement: function(error, element) {
  //内容
   }，
   success:function(label){
   //内容
  }
     });
 });

可以看出，我们通过validate可以方便的进行验证，如添加自定义验证及提示信息等。

另外，我们可以将错误提示信息显示在其他位置，如在方法内部”error.appendTo(element.parent())“,或者在成功时调用一些方法。

好了，暂时就总结这么多吧，以后有新的心得会及时分享上来，如有什么错误也请大家不要留情 ，狠狠拍吧