EasyUI 验证框使用方法:
//***************************
missingMessage:未填写时显示的信息
validType:验证类型见下示例
invalidMessage:无效的数据类型时显示的信息
required="true" 必填项
class="easyui-validatebox" 文本验证
class="easyui-numberbox" 数字验证
*****************************//
0、调用数据验证方法
return $("#form1").form('validate');
示例:
<asp:Button ID="btn_Save" runat="server" Text="保存" OnClick ="btn_Save_Click" OnClientClick="return $("#form1").form('validate');" />
1、验证是否必填
class="easyui-validatebox" missingMessage="xxx必须填写"
2、验证字符串长度
class="easyui-validatebox" missingMessage="xxx必须填写少于10个字符" validType="length[0,2]" invalidMessage="不能超过2个字符!"
示例:
<input class="easyui-validatebox" required="true" missingMessage="姓名必须填写" size="10" type="text" name="ARealName"></input>
3、验证数字必须是5.5-20之间 precision="2"表示是2为小数
class="easyui-numberbox" min="5.5" max="20" precision="2" required="true" missingMessage="必须填写5.5~10之间的数字"
4、验证必须是日期yyyy-MM-dd(只能选择不可编辑)
<script>
$.fn.datebox.defaults.formatter = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
};
$.fn.datebox.defaults.parser = function (s) {
if (s) {
var a = s.split('-');
var d = new Date(parseInt(a[0]), parseInt(a[1]) - 1, parseInt(a[2]));
return d;
} else {
return new Date();
}
};
</script>
class="easyui-datebox" required="true" missingMessage="日期必须填写" editable="false"
//如果需要填写其他格式的类型请自行修改formatter函数
5、验证必须是邮件
class="easyui-validatebox" missingMessage="邮件必须填写" validType="email" invalidMessage="请填写正确的邮件格式"
6、页面时间段判断 name为s1的时间必须大于name为s2的时间 s3必须大于s2
<script>
$.extend($.fn.validatebox.defaults.rules,{
TimeCheck:{
validator:function(value,param){
var s = $("input[name="+param[0]+"]").val();
//因为日期是统一格式的所以可以直接比较字符串 否则需要Date.parse(_date)转换
return value>=s;
},
message:'非法数据'
}
});
</script>
<input name="s1" class="easyui-datebox" required="true" missingMessage="日期必须填写" editable="false"></input>
<input name="s2" class="easyui-datebox" required="true" validType="TimeCheck['s1']" invalidMessage="s1必须大于s2" editable="false"></input>
<input name="s3" class="easyui-datebox" required="true" validType="TimeCheck['s2']" editable="false"></input>
7、询问对话框提交:
function Confirmbtn(msg, control) {
$.messager.confirm('确认', msg, function (r) {
if (r) {
__doPostBack("ctl00$ContentPH_Main$Button1", "");
//alert('aa');
}
});
return false;
}
OnClientClick="return Confirmbtn('确认吗?', this);
分享到:
相关推荐
jQuery EasyUI 的核心在于其组件系统,这些组件包括但不限于数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、面板(panel)、进度条(progressbar)、...
在这个"ssm+jqueryeasyui案例"中,我们可以学习如何将这三者结合,构建出功能完善的Web应用。首先,我们需要在项目中引入SSM框架的相关依赖,包括Spring的核心库、SpringMVC的Servlet容器配置以及MyBatis的数据库...
通过自定义 jQuery EasyUI 的验证规则,我们可以根据实际需求创建更加灵活和高效的前端表单验证机制。以上介绍的验证规则涵盖了常见的表单验证场景,如中文验证、邮政编码验证、手机号码验证等。开发者可以根据自己...
- **Form**:表单组件,可以方便地创建和验证表单数据。 - **Tree**:树形结构组件,适用于展示层次关系的数据。 - **Combobox**:下拉选择框,结合输入框和下拉列表,提供搜索和选择功能。 - **Menu**:菜单...
这些规则不仅提高了表单验证的灵活性和可维护性,还大大简化了开发者的编码工作。掌握这些正则表达式的应用,能够帮助我们更高效地完成前端数据验证任务。在实际项目中,根据具体的业务需求灵活运用这些规则,可以使...
5. **表单(Form)**:提供各种表单元素和验证机制,便于用户输入和数据提交。 6. **按钮(Button)**:创建具有不同功能的按钮,如普通按钮、链接按钮、复选按钮等。 7. **面板(Panel)**:封装内容的容器,可以...
`.form()`方法用于处理表单提交和验证,使得数据管理和验证更加简便。 6. **布局(Layout)**:EasyUI 的布局组件可以帮助你创建响应式的页面结构,包括顶部、底部、左侧和右侧的面板,以及可伸缩的中心区域。 7. **...
2. **表单组件**:包括`form`(表单)、`textbox`(文本框)、`passwordbox`(密码框)、`datetimebox`(日期时间框)等,为表单数据的输入和验证提供了便利。 3. **数据展示组件**:`datagrid`(数据网格)和`...
4. **表单(Form)**: 提供各种表单元素,如输入框、下拉框、复选框等,支持数据验证。 5. **菜单(Menu)**: 创建下拉菜单或级联菜单,用于导航或操作。 6. **按钮(Button)**: 包括普通按钮、链接按钮、复选按钮...
jQuery EasyUI 提供了一系列表单组件,如复选框(checkbox)、单选按钮(radio)、日期选择器(datebox)等,方便创建和验证表单。 ### 3. 主题系统 jQuery EasyUI 支持多主题,开发者可以通过修改或自定义 CSS ...
《jQuery EasyUI 1.7.0:打造高效前端界面的利器》 jQuery EasyUI 是一个基于 jQuery 的轻量级框架,它为开发者提供了一系列组件,使得构建交互式、响应式的Web应用程序变得更加简单。在1.7.0版本中,这个强大的...
EasyUI 提供了验证和提交表单的 API。 4. **菜单(Menu)**:Menu 可以创建多级下拉菜单,常用于网站导航或操作选项展示。 5. **树形结构(Tree)**:Tree 显示层次化的数据,支持节点的展开、折叠、选择等操作。 ...
在本文中,我们将深入探讨jQueryEasyUI的核心概念、主要组件以及与Java的集成方式。 一、jQueryEasyUI的核心概念 1. **组件化**:jQueryEasyUI将常见的用户界面元素如表格、对话框、菜单、按钮等封装为独立的组件...
jQuery EasyUI是一款基于jQuery库的前端开发框架,它极大地简化了HTML用户界面的构建,提供了丰富的组件和功能,包括表格、对话框、菜单、表单验证等。这个框架的官方API中文版是开发者的重要参考资料,它详细解释了...
**jQuery EasyUI 1.4.3:一个奇葩案例代码详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的组件,如表格、下拉框、对话框、菜单等,帮助开发者快速构建用户界面。这个“jQuery EasyUI 1.4.3...
- **表单元素**(Form Elements):如输入框、下拉框、复选框和单选按钮,它们可以与EasyUI的其他组件集成,实现数据验证和提交。 - **表格(Table)**:支持分页、排序、过滤和编辑功能,可直接绑定到数据源。 - **...
这个框架包含了许多预先封装好的 UI 控件,如对话框、表格、菜单、表单验证等,使得开发者能够快速构建功能丰富的交互式 Web 应用程序。在"jQueryEasyUI-1.3.6(含API文档)"这个压缩包中,有两个主要文件:`jEasyUI...
6. **事件处理**:EasyUI组件有丰富的事件系统,可以通过监听和响应组件的特定事件来实现交互逻辑,例如点击按钮触发某个函数或表单提交时验证数据。 7. **组件组合**:EasyUI的强大之处在于组件之间的可组合性,...
3. 表单(Form)和验证(Validation):EasyUI的表单组件可以帮助我们快速构建交互式表单,同时支持字段验证。这个Demo可能演示了如何使用`<form>`标签结合`easyui-form`类,以及各种输入控件(如`<input>`, `...
- **表单(Form)**:提供了各种表单元素,支持验证和数据提交。 3. **主题**:jQuery EasyUI支持多种预设主题,可以快速改变应用的视觉风格,同时也允许自定义CSS来调整样式。 4. **数据绑定**:EasyUI通过`...