Easyui validator.js 表单日期框校验问题黑科技处理方式

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域上的。

就像使用Jquery validation组件对easyui-datebox组件的时间进行验证遇到的问题 文中作者“Sam哥哥的博客”分析的，validator.js校验框架不会校验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,上图

问题解决，此时的心情，解放区的天是明亮的天，解放区的人民好喜欢！！！！！