【开发】Form Validate 表单验证 扩展应用

时间：2021-08-03 01:31:36

目录：

★、文本输入框（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>
<input
    type="text"
    name="BytesNum"
    class="easyui-numberbox"
    novalidate="true"
    min="0" max="99000000" precision="0" required="true" missingmessage="请填写 字节数，确保是有效的正整数" />

</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"
required="true" missingmessage="请填写 起始页码，确保是有效的正整数"

min="0" max="99000000" precision="0" />

</td>

<th>

<label>结束页码：</label>

</th>

<td>

<input class="easyui-numberbox" name="EndPageNum"
required="true" missingmessage="请填写 结束页码，确保是有效的正整数"

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() 方法。

相关文章