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);
相关推荐
### easyui验证框使用方法详解 #### 一、概述 EasyUI是一款基于jQuery的用户界面插件集合,它简化了Web应用开发中的交互组件创建过程。其中,验证框(ValidateBox)是EasyUI中用于输入验证的一个强大工具,能够帮助...
常用的easyUI表单验证类型
通过修改`$.fn.validatebox.defaults`对象,可以统一设定所有验证框的行为。 六、应用场景 EasyUI验证扩展在实际项目中有着广泛的应用,如电子商务网站的商品数量验证、注册表单的身份证号码验证、财务管理系统的...
本文将深入探讨基于jQuery EasyUI 1.4.5的单选框和多选框组件的使用方法、功能特性以及如何结合实际项目进行应用。 一、jQuery EasyUI 1.4.5简介 EasyUI是一套基于jQuery的UI框架,它包含了多个可复用的UI组件,如...
例如,数据网格可以实现数据的增删改查功能,表单则用于收集和验证用户输入,对话框用于展示弹窗提示或进行独立操作,菜单和树形控件则用于导航和展示层级关系。 在“custom”目录中,可能包含了用户自定义的样式和...
在描述中提到的“easyUI框架下载”,暗示我们将讨论如何获取和使用 EasyUI。 首先,你需要从官方网站或者其他可靠的资源下载 EasyUI 压缩包。文件名为“EasyUI”,通常包含以下几个核心部分: 1. **CSS 文件**:...
### 自定义jQuery EasyUI验证规则详解 在进行前端表单验证时,为了提供更好的用户体验以及增强数据的有效性和安全性,我们通常会使用各种前端框架提供的工具。jQuery EasyUI 是一个基于 jQuery 的用户界面插件集合...
validatebox验证框的使用通常包括以下几个步骤: 1. **引入依赖**:首先,你需要在HTML文件中引入jQuery、EasyUI和validatebox的相关CSS和JS文件。这些文件可以从EasyUI的官方下载包中获取。 ```html ...
这个Demo可能演示了如何使用`<form>`标签结合`easyui-form`类,以及各种输入控件(如`<input>`, `<select>`, `<textarea>`等)来创建表单,并配置验证规则。 4. 对话框(Dialog)和窗口(Window):EasyUI提供了...
4. **表单(Form)**:提供了多种输入控件,如文本框、下拉列表、复选框等,以及验证功能,便于用户输入和提交数据。 5. **菜单(Menu)**:用于构建多级菜单,可以动态加载数据,适用于创建导航菜单和上下文菜单。...
- **验证框(ValidateBox)**:自动验证输入字段的合法性。 - **日期输入框(DateBox)**:提供日历选择器,方便选择日期。 - **日历(Calendar)**:独立的日历组件,用户可以直接在日历上选择日期。 5. **窗口组件**...
通过链接标签`<link>`和脚本标签`<script>`,确保页面能正确识别并使用EasyUI的样式和功能。 2. **基本组件使用**:EasyUI提供了多种组件,例如: - **对话框(Dialog)**:用于显示弹出式窗口,可设置大小、位置...
在"EasyUi前端框架"中,我们将探讨其核心特性、主要控件的使用,以及如何与后台进行有效的结合。 一、EasyUi的核心特性 1. **组件丰富**:EasyUi提供了大量的可复用组件,如表格、下拉框、树形结构、日期选择器、...
三、使用 jQuery EasyUI 开发步骤: 1. 引入 jQuery 和 jQuery EasyUI 的库文件。 2. 创建 HTML 结构,使用 EasyUI 标签和类名定义组件。 3. 初始化组件,通过 JavaScript 调用相关方法设置组件属性和行为。 4. 配置...
EasyUI 并未提供直接取消验证的方法,但可以通过直接操作 DOM 来移除验证失败的样式。例如,通过调用 `$("#" + elemId).removeClass('validatebox-invalid')` 可以清除对应的验证失败标识。 除了这两个问题,我们还...
- 表单组件:表单(Form)、组合框(ComboBox)、组合树(ComboTree)、数字框(NumberBox)、验证框(ValidateBox)、日期输入框(DateBox)、日历(Calendar) - 窗口组件:窗口(Window)、对话框(Dialog)、...
- **Ajax**:EasyUI 使用 jQuery 的 Ajax 方法与服务器进行异步通信,获取或更新数据。 - **JSON**:通常,数据以 JSON 格式在前后端之间传输,EasyUI 可以方便地解析 JSON 数据并填充到组件中。 4. **EasyUI ...
对于初学者,掌握".NET + EasyUI 快速开发框架"的关键在于理解.NET的MVC架构和EasyUI的组件使用。首先,通过官方文档学习.NET的C#语法和ASP.NET MVC的基本概念。其次,深入研究EasyUI的API和示例,熟悉各个组件的...
jQuery EasyUI 是一个基于 jQuery 的轻量级框架,它提供了丰富的用户界面组件,使得开发者能够快速构建出美观且...通过学习和掌握其主要组件及其使用方法,你可以在项目开发中提高效率,为用户提供更加友好的交互体验。
`index.html`, `demo1.html`, `demo2.html`, `demo.html` 是示例页面,展示了EASYUI的使用方法和效果;`images` 文件夹存储了框架所用到的图片资源;`js` 文件夹包含了EASYUI的JavaScript库和相关脚本;`css` 文件夹...