【开发】Form Validate 表单验证 扩展应用
目录：
★、文本输入框（easyui-textbox）
★、数字框（easyui-numberbox）
★、时间（easyui-datebox）
★、文本域（easyui-textbox easyui-validatebox）
★、下拉框（easyui-combobox）
特别说明：
验证机制的关闭和启用。可以采用 data-options="novalidate:true" 先关闭元素的验证机制，再在表单提交之际开启验证。这样可以避免用户在第一次看到表单时就全显示红色提示的情形。
示例代码如下：
1、HTML声明：
|
<input class="easyui-combobox" name="Operator" required="true" missingmessage="请选择一项" data-options="novalidate:true, valueField: |
|
或者 <th> <label>字节数：</label> </th> <td> </td> |
2、JS验证：（灰色部分可以去除）
|
// "分配任务"保存 $btnPreAssignSave_GeneralTasks.click(function () { $('.validatebox-text').validatebox('enableValidation').validatebox('validate'); var validate = $maintainForm.form('enableValidation').form('validate'); if (!validate) { return false; } |
注意，在验证阶段要先“开启验证”（enableValidation），再“执行验证”（validate）。
参考示例：
http://www.jeasyui.net/plugins/167.html
http://www.jeasyui.net/demo/419.html
★、文本输入框（easyui-textbox）
|
<input class="easyui-textbox" type="text" name="BookName" validtype="length[ 0, 150 ]"/> |
一般只需限定输入字符的长度即可
★、数字框（easyui-numberbox）
包括整数、小数，以及数字大小范畴的限定。
|
<tr> <th> <label>起始页码：</label> </th> <td> <input class="easyui-numberbox" name="BeginPageNum" min="0"max="10000000" precision="0" required="true" missingmessage="请填写 起始页码(0--10000000)" /> </td> <th> <label>结束页码：</label> </th> <td> <input class="easyui-numberbox" name="EndPageNum" min="0"max="10000000" precision="0" required="true" missingmessage="请填写 结束页码(0--10000000)" /> </td> </tr> |
可以限定数字的大小范围，precision 属性用来限定小数点位数，required确保必填。
自定义验证：在实际业务中，起始页码和结束页码之间可能有这样一个规则“确保结束页码大于（>）起始页码”，这时只需调用BiggnerPageNumThanTarget 自定义扩展，传入所在表单的 id 和相比较元素的 name，以及为第 3 个参数撰写合适的验证消息即可：
|
<tr> <th> <label>起始页码：</label> </th> <td> <input class="easyui-numberbox" name="BeginPageNum" min="0" max="99000000" precision="0" /> </td> <th> <label>结束页码：</label> </th> <td> <input class="easyui-numberbox" name="EndPageNum" min="0" max="99000000" precision="0" validtype="BiggnerPageNumThanTarget['preAssignForm','BeginPageNum', '请确保 结束页码 大于 起始页码']" /> </td> </tr> |
以上针对“结束页码”调用了 BiggnerPageNumThanTarget 这一自定义扩展，当用户输入结束页码的数值较小时，将提示用户“请确保 结束页码 大于 起始页码”。
★、时间（easyui-datebox）
验证重点：
1、在页面的脚本中加入验证扩展 SmallerDateThanTarget 和
B
iggnerDateThanTarget
2、在时间控件中加入 validtype 属性
3、数组型参数，第一个参数是表单 id，第二个参数是用来比较的目标控件的 name，务必注意。
（只要是通过表单 id 和其元素 name 就可以定位一个元素的情形，就不要再为单独元素定义 id ，保持表单的简洁，即显式呈现的东西一定要存在确切意义。）
|
validtype="SmallerDateThanTarget['preAssignForm','EndDate']" |
详细阐述：
主要是对时间范围的验证。
可以使用扩展函数来限定开始时间和结束时间之间的范围。
往往 起始时间要偏小，而且是小于 结束时间，所以起始时间调用 SmallerDateThanTarget方法；
与此同时，结束时间势必就要大一些，而且是大于 起始时间，所以结束时间调用
B
iggnerDateThanTarget 方法。
|
<tr> <th> <label>开始时间：</label> </th> <td> <input class="easyui-datebox" name="BeginDate" editable="false" required="true" missingmessage="请填写时间" /> </td> <th> <label>结束时间：</label> </th> <td> <input class="easyui-datebox" name="EndDate" editable="false" required="true" missingmessage="请填写时间" validtype="BiggnerDateThanTarget['preAssignForm','BeginDate','请确保 结束时间 大于 开始时间']" /> </td> </tr> |
|
$.extend($.fn.validatebox.defaults.rules, { BiggnerDateThanTarget: { validator: function(currentElementValue, param) { if(!$.isArray(param)) { window.alert("调用验证器时所传参数必须是数组格式：validtype=\"DateboxCheck['preAssignForm','BeginDate', '提示信息']\" "); return false; } var scopeElementID = param[0]; var targetElementName = param[1]; var targetElement = $("#" + scopeElementID).find(":input[name='" + targetElementName + "']").val(); return currentElementValue >= targetElement; }, message: '{2}' } }); |
|
$.extend($.fn.validatebox.defaults.rules, { SmallerDateThanTarget: { validator: function(currentElementValue, param) { if(!$.isArray(param)) { window.alert("调用验证器时所传参数必须是数组格式：validtype=\"DateboxCheck['preAssignForm','BeginDate', '提示信息']\" "); return false; } var scopeElementID = param[0]; var targetElementName = param[1]; var targetElement = $("#" + scopeElementID).find(":input[name='" + targetElementName + "']").val(); return currentElementValue <= targetElement; }, message: '{2}' } }); |
★、文本域（easyui-textbox easyui-validatebox）
验证重点：
1、注明 validtype="length[0, 400]" 即可。
详细阐述：
文本域不需要使用 <textarea />来表达，在 easyUI 层面上其定义仍然是 textbox，只是 multiline:true 罢了。
同时指定两个类就可以：easyui-textbox 和 easyui-validatebox
|
<tr> <th> <label>备注：</label> </th> <td colspan="3"> <input class="easyui-textbox easyui-validatebox" validtype="length[0, 400]" data-options="multiline:true" style="width: 520px; height: 60px;" name="Notes" /> </td> </tr> |
★、下拉框（easyui-combobox）
验证重点：
1、在页面的脚本中加入验证扩展 SelectionRequired 。
2、在下拉框元素中加入 validtype 属性，数组参数为其自身 id 和 验证消息 。
|
validtype="SelectionRequired['ddlOperatorPreAssign', '请选择一项']" |
详细阐述：
下拉框有时总会包括一个默认项，有时则没有。
它也支持 必填 验证，往往还需要在数据加载成功时默认选中第一项。
比如在初始化时，可以很容易地取得数据，判断起来也方便：
|
<tr> <th> <label>录入员：</label> </th> <td colspan="3"> <input class="easyui-combobox" name="Operator" id="ddlOperatorPreAssign" editable="false" validtype="SelectionRequired['ddlOperatorPreAssign', '请选择一项']" data-options="novalidate:true, valueField:'Name', textField:'FullName', url:'/PMIS/PMIS_EnteringTasks_Assignment/GetUserInCurrentDept', onLoadSuccess: function(data){ if (data) { $(this).combobox('setValue',data[0].Name); } } "> </td> </tr> |
|
$.extend($.fn.validatebox.defaults.rules, { // 下拉框验证 SelectionRequired: { validator: function(currentElementText, param) { // 对于下拉框，验证组件只能默认获取其文本值，需要自己重新提取其 Value。 if(!$.isArray(param)) { window.alert("调用验证器时所传参数必须是数组格式：validtype=\"SelectionRequired['ddlOperatorPreAssign', '提示信息']\" "); return false; } var targetElement = $("#" + param[0]); var targetElementValue = targetElement.combobox('getValue'); console.group("开始验证下拉框"); console.info("该验证是确保下拉框的选项值(Value)不是 null 对象、不是 \"0\"、也不是 \"\" "); console.info("下拉框元素 id = " + param[0]); console.info("当前选中项 value = " + targetElementValue); console.info("当前选中项 value 的类型是 " + typeof targetElementValue); console.info("当前选中项 text = " + currentElementText); console.info("当前选中项 text 的类型是 " + typeof currentElementText); if(targetElementValue != null && targetElementValue != "0" && targetElementValue != "") { console.info("验证成功"); console.groupEnd(); return true; } console.warn("验证失败"); console.groupEnd(); }, message: '{1}' } }); |
针对下拉框值得注意的一点，不要使用表单的 clear() 方法，这样会使得下拉框的值成本空白，应使用表单的 reset() 方法。
