使用Jquery Validate時校驗失敗，但提交成功的問題

　　在之前的項目中，我要對html頁面進行校驗，就從網上查到有個很方便的工具--Jquery Vaildate,自身帶有校驗提示，也可以自己進行設置。

下面是我寫的代碼，由於項目中有關於手機號碼的校驗，所以需要額外的進行添加。

　　接下來我對其中幾個比較重要的地方做一下解釋：

1.rules:是校驗規則，可以自己進行設置，如果沒有則自動默認為Jquery Validate默認提供的規則。

2.message:是提示信息，如果用戶輸入與規則不符，則會進行提示，提示信息可以自己設置也可以使用Jquery Validate默認提供的警示信息。

3.SubmitHandler:這是我的問題所在，因為Jquery Vaildate 默認的是from表單信息提交，而我在html里面使用的是onclick事件，進行ajax跨域提交，所以沒有進行提交校驗。

   　　　　　　這里我請教經理做的模擬表單提交，具體看代碼。

4.required：是非空提示，默認為true，需要在<input> 里面進行添加。

5.tips: 提示信息出現的位置是默認跟在文本框后面的，

6.提示信息的顏色可以在js自行進行設定

7.更加具體的應用可以參考網址：http://www.cnblogs.com/weiqt/articles/2013800.html

// 手機號碼驗證
        jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "請正確填寫您的手機號碼");
        $().ready(function() {
            $("#change").validate({
                debug : false,
                success : function(label) {
                    //label.text('').addClass('valid');
                    label.removeClass('label');
                    label.addClass('glyphicon  glyphicon-ok').css('color', '#666').text('');

                },
                onfocusout : function(element) {
                    this.element(element);
                },
                rules : {
                    email : {
                        required : true,
                        email : true
                    },
                    cellphone : {
                        required : true,
                        minlength : 11,
                        // 自定義方法：校驗手機號在數據庫中是否存在
                        // checkPhoneExist : true,
                        isMobile : true
                    },
                    change_count : {
                        required : true,
                        digits : true
                    },
                    pcountry_tabs:{
                        required : true
                    },
                    change_type : {
                        required : true
                    }
                    
                },
                submitHandler : function(form) {

                    if($('#pcountry_tabs').val()=="點擊選擇要查詢的國家地區組織                                                                         ▼"){
                        alert("請選擇國家");
                        return false;
                    }else if($('#change_type').val()=="0"){
                        alert("請選擇變更類型");
                        return false;
                    }        
                    $.ajax({
                        url : app_url + '/api/savechange',
                        dataType : 'jsonp',
                        data : {
                            "change_type" : $('#change_type').val(),
                            "change_country" : $('#pcountry_tabs').val(),
                            "change_count" : $('#change_count').val(),
                            "email" : $('#email').val(),
                            "cellphone" : $('#cellphone').val()
                        },
                        jsonp : 'callback',
                        success : function(result) {
                            alert(result.state);

                        }
                    });
                },
                messages : {
                    email : {
                        required : "請輸入您的郵箱",
                        email : "請輸入正確的郵箱"
                    },
                    cellphone : {
                        required : "請輸入手機號",
                        minlength : "手機號不正確",
                        isMobile : "手機號不正確"
                    },
                    change_count : {
                        required : "請輸入件數",
                        digits : "請輸入數字"
                    },
                    pcountry_tabs:{
                        required : "請選擇國家"
                    },
                    change_type : {
                        required : "請選擇變更類型"
                    }
                }
            });
        });
        function doSubmit() {
            $("#change").submit();
        }

2016-07-2913:40:50

 

---恢復內容結束---