1、前言
最近專案中使用Easyui validator.js,在做表單校驗時碰到日期框、下拉框會不校驗，自動忽略過去不校驗。給過上網查資源、和朋友討論，最後使用輕量的黑科技處理方式，輕鬆、快捷、有效的處理了。

2、問題重現
問題程式碼：

<label for="openingDate" class="col-sm-2 control-label">
    <a class="require">
        <i class="icon-Asterisk"></i>
    </a>
    啟用日期
</label>
<div
 
 class="col-sm-4">
    <input type="text" class="form-control" id="openingDate" name="openingDate"  placeholder="請選擇啟用日期">
</div>

validator =  $("#deviceForm").validate({
    //校驗規則
    rules: {
        assetsCode: "required",
        name: "required",
        openingDate: "required",
        ownerUnit: "required"
 

    },
    //提示訊息
    messages: {
        assetsCode: "請輸入資產編號",
        name: "請輸入型別名稱",
        openingDate: "請選擇啟用日期",
        ownerUnit: "請選擇所屬單位"
   },
   submitHandler:function(form){
       //校驗完成後提交表單
       var formData = getFormData("deviceForm");               
       $.post("/dev/saveDevice.do"
 
,formData,function(json){

       },"JSON");
    }
});

上面的程式碼就會出現最開始說的日期框、下拉框不校驗的問題。上網查了一下，說是使用谷歌瀏覽器的“審查元素”功能來檢視原始碼，發現輸入的值其實是儲存在一個hidden域上的。

問題的根源找到了，我們離勝利又近了一步。加油！

3、黑科技登場了

<label for="openingDate" class="col-sm-2 control-label">
    <a class="require">
        <i class="icon-Asterisk"></i>
    </a>
    啟用日期
</label>
<div id="openingDate_div" class="col-sm-4">
    <input type="text" class="form-control" id="openingDate" name="openingDate"  placeholder="請選擇啟用日期">
</div>

注：上面的程式碼為在input外面的div添加了id=”openingDate_div”，新增這個id,是為了讓提示資訊顯示在div的旁邊，如果沒有這個div id,提示資訊會顯示在form頭部。

然後

validator =  $("#deviceForm").validate({
    //校驗規則
    rules: {
        assetsCode: "required",
        name: "required",
        //openingDate: "required",
        ownerUnit: "required"
    },
    //提示訊息
    messages: {
        assetsCode: "請輸入資產編號",
        name: "請輸入型別名稱",
        //openingDate: "請選擇啟用日期",
        ownerUnit: "請選擇所屬單位"
   },
   submitHandler:function(form){
       //獲取校驗表單結果
       var result = checkForm();
       //校驗通過
       if(result){
           //校驗能過後提交表單
           var formData = getFormData("deviceForm");               
       $.post("/dev/saveDevice.do",formData,function(json){

       },"JSON");
       }   
  }
});

checkForm函式：

//此校驗函式用於校驗hidden域
function checkForm(){
    //獲取啟用日期的值
    var openingDate = $("#openingDate").datebox("getValue");
    //如果值為空
    if (openingDate == '') {
            //顯示校驗資訊
            inputTips('請選擇啟用日期', 'openingDate_div');
            return false;
    }

    return true;
}

inputTips函式：

//顯示校驗資訊
function inputTips(content, elemId, isMsg) {
    if (isMsg) {
        layer.msg(content, {icon: 0, id: Math.random()});
    } else {
        var objTemp = $('#' + elemId);
        layer.tips(content, '#' + elemId, {
            tips: [2, '#30404f'],
            time: 2000
        });
    }
}

ok,上圖

問題解決，此時的心情，解放區的天是明亮的天，解放區的人民好喜歡！！！！！