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