1. 程式人生 > >jquery validate單獨校驗某一欄位

jquery validate單獨校驗某一欄位

前提:下載外掛<script src="/jflow/resource/js/bootstrap/plugins/validate/jquery.validate.min.js"></script>

1、html程式碼:

<ul id="f_tabsFour" class="nav nav-tabs hide_query">
       <li class="active"><a id="queryInfo" href="#tab-5-1"><i class="fa fa-user"></i>查詢資訊</a></li>
       <li><a href="#tab-5-2" data-toggle="tab"><i class="fa fa-briefcase"></i>SQL指令碼</a></li>
</ul>

2、在<script>中編寫校驗規則

//查詢定義校驗
        function validQueryForm(){
            var e = "<i class='fa fa-times-circle'></i>";
            return $("#form_query").validate({
                rules: {
                    queryNo: {
                        required: !0
                    },
                    showEachPage: {
                        required: !0,
                        digits: true
                    }
                },
                 messages : {
                     queryNo : {
                         required : e + "查詢編號不能為空"
                     },
                     showEachPage:{
                         required : e + "每頁顯示不能為空",
                         digits: e + "必須是整數",
                     }
                 }
            });
        };
        $(validQueryForm());

3、點選事件中的程式碼:#tab-5-1是<a>標籤的href

var _one = $("#form_query").validate().element($("#showEachPage"));//校驗每頁顯示,showEachPage是欄位
            var _two = $("#form_query").validate().element($("#queryNo"));//校驗查詢編號
            if(!_one || !_two){
                $("#f_tabsFour li:first").addClass("active").siblings().removeClass("active");//li標籤切換
                $("#tab-5-1

").addClass("active").siblings().removeClass("active");//標籤下的內容切換
                return false;
            }