validate插件实现表单效验（二）

一款优秀的表单验证插件——validation插件

特点：

l  内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则

l  自定义验证规则：可以很方便的自定义验证规则

l  简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能

l  实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。

 

下载：

    http://bassistance.de/jquery-plugins/jquery-plugin-validation/

 

快速入门：

    第一步：引入jquery库和validation插件

 

 

案例：

<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>

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

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

<script>

   $(function(){

      $("#registForm").validate({

         rules:{

            user:{

                required:true,

                minlength:2

            },

            password:{

                required:true,

                digits:true,

                minlength:6

            },

            repassword:{

                required:true,

                digits:true,

                minlength:6,

                equalTo:"[name='password']"

            },

            email:{

                required:true,

                email:true

            },

            username:{

                required:true,

                minlength:2

            },

            sex:{

                required:true

            }

         },

         messages:{

            user:{

                required:"用户名不能为空!",

                minlength:"用户名不得少于2个字符!"

            },

            password:{

                required:"密码不能为空!",

                digits:"密码必须是数字!",

                minlength:"密码长度不得低于6位!"

            },

            repassword:{

                required:"确认密码不能为空!",

                digits:"密码必须是数字!",

                minlength:"密码长度不得低于6位!",

                equalTo:"两次密码不一致!"

            },

            email:{

                required:"邮箱不能为空!",

                email:"邮箱格式不正确!"

            },

            username:{

                required:"姓名不能为空!",

                minlength:"姓名不得少于2个字符!"

            },

            sex:{

                required:"性别必须勾选!"

            }

         },

         errorElement: "label", //用来创建错误提示信息标签

         success: function(label) { //验证成功后的执行的回调函数

            //label指向上面那个错误提示信息标签label

            label.text(" ") //清空错误提示消息

               .addClass("success"); //加上自定义的success类

         }

      });

   })

</script>