Jquery Validation表单验证插件的使用

一：首先是下载并引用：

<script type="text/javascript" src="assets/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="assets/js/messages_zh.min.js"></script>            //此为中文messages

二：html部分：

<form class="form-horizontal dingdan-form biaodan" action="">
                    
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">会员来源：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="" placeholder="渠道--西门吹雪" name="firstname">
                        </div>
                        <label for="" class="col-sm-2 control-label">会员来源：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="" placeholder="渠道--西门吹雪" name="lastname">
                        </div>
                    </div>
                    
                    <input type="submit" value="提交">
                </form>

备注：此处需要注意的是：validation是根据表单元素的name属性绑定的，所以一定要把name属性写上

三：js控制部分：

$().ready(function() {  
        $(".biaodan").validate({  
                rules: {  
           firstname: "required",  
           email: {  
            required: true,  
            email: true  
           },  
           password: {  
            required: true,  
            minlength: 5  
           },  
           confirm_password: {  
            required: true,  
            minlength: 5,  
            equalTo: "#password"  
           }  
        },  
                messages: {  
           firstname: "请输入姓名",  
           email: {  
            required: "请输入Email地址",  
            email: "请输入正确的email地址"  
           },  
           password: {  
            required: "请输入密码",  
            minlength: jQuery.format("密码不能小于{0}个字符")  
           },  
           confirm_password: {  
            required: "请输入确认密码",  
            minlength: "确认密码不能小于5个字符",  
            equalTo: "两次输入密码不一致不一致"  
           }  
        }  
            });  
        });  

备注：rules部分为参数配置部分；message部分为提示信息部分，两部分都是通过表单元素的name属性绑定的

四：避免重复提交的实现：原理是表单验证通过后给提交按钮disabled然后提交

 $(document).ready(function() { 
        $(".biaodan").validate({ 
        submitHandler: function(form) { 
        $(form).find(":submit").attr("disabled", true).attr("value", 
        "提交成功"); 
        form.submit(); 
        } 
        }) 
        }); 

五：更多扩展功能可到菜鸟教程查看：

http://www.runoob.com/jquery/jquery-plugin-validate.html