首先引入檔案

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.metadata.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>

在JS裡配置檔案 名字針對標籤的屬性name

//配置校驗引數 
$().ready(function(){
$("#dbform").validate({
  rules:{
  f_52_insroot_2:"slywlx",
  f_52_insroot_4:"dateISO",
  f_52_insroot_5:"required",
  f_52_insroot_6:"required",
  f_52_insroot_7:"required",
  f_52_insroot_8:{required:true,checkcard:"f_52_insroot_6"},
  f_52_insroot_9:{required:true,checkcard:"f_52_insroot_7"},
  f_52_insroot_10:{required:true,isIdCardNo:"f_52_insroot_8"},
  f_52_insroot_11:{required:true,isIdCardNo:"f_52_insroot_9"},
  f_52_insroot_12:"required",
  f_52_insroot_13:"required",
  f_52_insroot_14:{required:true,dateISO:true,iscanmarry:"男"},
  f_52_insroot_15:{required:true,dateISO:true,iscanmarry:"女"},
  f_52_insroot_20:{junren:"f_52_insroot_8"},
  f_52_insroot_21:{junren:"f_52_insroot_9"},
  f_52_insroot_24:{required:true,jhlb:"f_52_insroot_25"},
  f_52_insroot_25:{required:true,jhlb:"f_52_insroot_24"},
  f_52_insroot_26:{required:true,jhlbyhyzk:"f_52_insroot_24"},
  f_52_insroot_27:{required:true,jhlbyhyzk:"f_52_insroot_25"},
 
  },
  messages:{
  f_52_insroot_4:"受理日期格式不正確",
  f_52_insroot_5:"請選擇是否為補辦婚姻",
  f_52_insroot_6:"請選擇男方人員類別",
  f_52_insroot_7:"請選擇女方人員類別",
  f_52_insroot_8:{required:"請選擇男方身份證類別",checkcard:"男方身份證類別選擇不正確"},
  f_52_insroot_9:{required:"請選擇女方身份證類別",checkcard:"女方身份證類別選擇不正確"},
  f_52_insroot_10:{required:"請輸入男方身份證件號碼",isIdCardNo:"男方身份證號碼不正確"},
  f_52_insroot_11:{required:"請輸入女方身份證件號碼",isIdCardNo:"女方身份證號碼不正確"},
  f_52_insroot_12:"請輸入男方姓名",
  f_52_insroot_13:"請輸入女方姓名",
  f_52_insroot_14:{required:"請輸入男方出生日期",dateISO:"男方出生日期格式不正確",iscanmarry:"男方未滿法定婚齡"},
  f_52_insroot_15:{required:"請輸入女方出生日期",dateISO:"女方出生日期格式不正確",iscanmarry:"女方未滿法定婚齡"},
  f_52_insroot_20:{junren:"男方職業選擇不正確"},
  f_52_insroot_21:{junren:"女方職業選擇不正確"},
  f_52_insroot_24:{required:"請選擇男方結婚類別"},
  f_52_insroot_25:{required:"請選擇女方結婚類別"},
  f_52_insroot_26:{required:"請選擇男方婚姻狀況",jhlbyhyzk:"男方結婚類別和婚姻狀況不一致"},
  f_52_insroot_27:{required:"請選擇女方婚姻狀況",jhlbyhyzk:"女方結婚類別和婚姻狀況不一致"},
  },
  errorContainer: $('div.container'), 

  });
 

  });    

自定義函式檢驗

//男女結婚類別校驗
   $.validator.addMethod("jhlb",function(value,element,param){        //value是輸入的值，param是配置檔案輸入的引數
      var index=document.getElementsByName(param)[0].selectedIndex;
        var jhlb=document.getElementsByName(param)[0].options[index].text;
          if (value == '初婚') {
         if (jhlb != '初婚' && jhlb != '再婚') {
           return false;
         }
       }      
       if (jhlb != '復婚' && value == '復婚') {
        return false;
       }      
       return true;
   },'雙方結婚類別矛盾');

分別在每個檢驗的輸入框後自動生成錯誤提示

頁面的顯示框 <div class="container" style="display: none">輸入有誤</div>