jquery validate自定義驗證

首先導包：

<script src="${pageContext.request.contextPath}/resources/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/resources/js/messages_zh.js" type="text/javascript"></script>

 <form class="am-form" id="mechantForm" class="doc-vld-msg">
                            <div class="am-form-group">
                                <label for="doc-ipt-name-1" class="labelname">廠商名稱：</label>
                                <input type="text" id="merchantName" name="merchantName" minlength="3" placeholder="輸入廠商名稱" required/>
                            </div>
                            <div class="am-form-group">
                                <label for="doc-ipt-name-1" class="labelname">姓名：</label>
                                <input type="text" name="name" id="name" placeholder="請輸入姓名">
                            </div>
                            <div class="am-form-group">
                                <label for="doc-ipt-phone-1" class="labelname">電話：</label>
                                <input type="text" name="telphone" id="telphone" placeholder="請輸入電話">
                            </div>
                            <div class="am-form-group">
                                <label for="doc-ipt-phone-1" class="labelname">公司地址：</label>
                                <input type="text" name="address" id="address" placeholder="請輸入公司地址">
                            </div>
                            <div style="margin-left:15%;margin-top:27px;">
                                <button style="margin-right:20px;" type="button" data-am-modal-close  class="mybtn">關閉</button>
                                <button type="submit"  class="mybtn"  id='saveBtn'>確定</button>
                            </div>
</form>

js中添加 手機自定義驗證

jQuery.validator.addMethod("isMobile", function(value, element) {
    var length = value.length;
    var mobile = /^1[34578]\d{9}$/;/*/^1(3|4|5|7|8)\d{9}$/*/
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "請正確填寫您的手機號碼");



$("#saveBtn").click(function() {
    
          $("#mechantForm").validate({
              submitHandler: function(form){  
                  $.ajax({
                        cache : true,
                        type : "POST",
                        url : "merchant",
                        data : $('#mechantForm').serialize(),
                        async : false,
                        error : function(data) {
                            layer.alert('系統錯誤', {icon: 0});
                        },
                        success : function(data) {
                            layer.alert('保存成功', {icon: 1});
                            $('#mechantForm')[0].reset();
                        }
                    });
                     },
                rules: {
                    merchantName: {
                        required: true,
                         minlength: 3
                    },
                    name:{
                        required: true,
                         minlength: 2
                    },
                    telphone:{
                        required: true,
                        minlength: 11,
                        maxlength:11,
                        digits:true,
                        number:true,
                        isMobile : true
                    },
                    address:{
                        required: true,
                        maxlength:50
                    }
                },
                messages: {
                    merchantName: {
                        required: "不能爲空",
                         minlength: "不能少於3個字符"
                    },
                    name:{
                        required: "不能爲空",
                         minlength: "不能少於2個字符"
                    },
                    telphone:{
                        required: "不能爲空",
                        minlength: "必須11位數字",
                        maxlength:"必須11位數字",
                        digits:"必須是數字"    ,
                        number:"請輸入有效數字",
                        isMobile : "手機號格式錯誤"
                    },
                    address:{
                        required:'不能爲空',
                        maxlength:"不能多於50個字符"
                    }
                }
            });
});

本文轉自博客園
@ Java野生程序猿