码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-04-17 11:16:59      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

目录:

    ★、文本输入框(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-textboxeasyui-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() 方法。

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

标签:

原文地址:http://www.cnblogs.com/luoxiaonet/p/4434177.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!