`

easy ui 验证框 01

 
阅读更多

使用过程中的一积累,备查。

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);

分享到:
评论

相关推荐

    Easy UI前端框架

    在实际开发中,Easy UI可以帮助开发者快速实现数据绑定、验证、排序、分页等功能,同时提供了丰富的主题风格,使得UI设计更加灵活。此外,Easy UI还支持响应式布局,适应不同设备的显示需求,对于移动设备的兼容性较...

    jquery easy ui 离线API文档

    《jQuery Easy UI 离线API文档详解及CSS设计技巧》 jQuery Easy UI 是一个基于jQuery的前端开发框架,它提供了丰富的UI组件,使得开发者能够快速构建出美观且功能强大的Web应用。离线API文档是开发者在无网络环境下...

    jquery easy ui edatagrid 动态编辑表格 例子

    在本文中,我们将深入探讨jQuery Easy UI中的`edatagrid`组件,以及如何实现动态编辑表格,特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具,它扩展了基本的`datagrid`功能,提供了更丰富的...

    easy ui 源代码

    在"Easy UI"的源代码中,我们可以深入理解其设计理念和实现方式。源码分析有助于开发者提升前端技能,学习如何组织和优化代码,以及如何创建可复用和可维护的组件。源码通常包含以下几个部分: 1. **CSS样式**:...

    jquery easy-ui

    - **表单(Form)**: 支持各种输入类型,如文本框、下拉框、复选框等,并且提供了验证功能,确保用户输入的数据符合预期格式。 - **表格(Grid)**: 可以展示大量数据,支持排序、分页、过滤、编辑等功能。同时,...

    【JQuery Easy UI】后台管理系统的简单布局

    Easy UI 提供的 `form` 组件与 `validatebox` 验证插件结合,可以实现对表单字段的实时验证,提高数据的准确性和完整性。 7. **其他组件**:除上述组件外,Easy UI 还包括树形视图(tree)、下拉选择框(combobox)...

    jquery easy ui 中文帮助

    3. **Form(表单)**: 提供了丰富的表单控件,如输入框、下拉框、复选框等,可以方便地进行数据验证和提交。 4. **Tree(树形结构)**: 显示层次结构的数据,支持展开/折叠、节点操作等功能,常用于目录结构的展示...

    Easy UI form表单中的输入验证框和常用控件

    Easy UI form表单中的输入验证框和常用控件。如:validatebox增加对time、date、datetime的验证。两次输入密码一致的验证、自定义下拉框等

    非常好用的Easy-UI前段框架

    3. **表单(Form)**: 包括各种输入控件,如文本框、下拉框、复选框、单选按钮等,支持数据验证和提交。 4. **对话框(Dialog)**: 可用于显示弹出窗口,常用于提示信息、确认操作或展示详细内容。 5. **菜单(Menu...

    jq easy ui帮助文档

    9. **实战应用**:通过实例学习如何将Easy UI应用到实际项目中,如构建一个包含搜索、分页和排序功能的数据展示页面,或者创建一个带有下拉菜单和表单验证的复杂表单。 10. **错误处理和调试**:掌握如何排查和解决...

    jquery easy ui 增改删 表格

    **jQuery Easy UI 知识点详解** jQuery Easy UI 是一个基于 jQuery 的前端框架,它提供了一系列的组件,如对话框、表格、下拉菜单等,用于简化网页开发,特别是对于后台管理界面的构建。在“jQuery Easy UI 增改删 ...

    最新jquery-easy-ui

    EasyUI 提供了自动绑定数据到表单控件的能力,如文本框、下拉框、复选框等,并支持表单验证。 #### 2.6 树形结构(Tree) 树形组件用于显示层次结构的数据,可以进行展开、折叠、选择和拖放操作,适用于目录结构或...

    自己原创的easy ui扁平化的版本

    "自己原创的easy ui扁平化的版本"这个标题表明这是一个由个人开发者原创的项目,它基于Easy UI框架,并且做了扁平化设计的改进。Easy UI是一个基于JavaScript和jQuery的组件库,它提供了丰富的用户界面元素,帮助...

    Jquery Easy UI 1.2.6 示例代码

    **jQuery Easy UI 1.2.6 示例代码详解** jQuery Easy UI 是一款基于 jQuery 的前端框架,它提供了丰富的组件和简单易用的API,帮助开发者快速构建用户界面。在版本 1.2.6 中,这个框架包含了多个功能强大的控件,如...

    关于jquery easy ui方面的实例

    jQuery Easy UI 是一个基于 jQuery 的前端开发框架,它提供了一系列的组件和插件,使得开发者可以轻松构建用户界面。这个框架极大地简化了HTML、CSS和JavaScript的交互,从而提高了开发效率。下面,我们将深入探讨...

    jquery-easy-ui demo

    标题“jquery-easy-ui demo”表明我们将探讨这个框架的一些实际应用和示例,而“很好用的”描述则暗示了其易用性和实用性。 一、jQuery EasyUI 概述 jQuery EasyUI 是基于 jQuery 的轻量级框架,它集成了大量的 UI ...

    asp.net 与QUERY EASY UI结合

    7. **安全性和性能优化**:在ASP.NET中,可以通过身份验证和授权机制保护Web应用。同时,使用缓存和分页策略可以减少数据库压力,提高性能。QueryEasy UI也有内置的分页功能,可以有效控制返回给客户端的数据量。 8...

    jquery api 、 jquery easy ui

    2. **表单组件**: 包括`form`(表单)、`textbox`(文本框)、`combobox`(下拉框)、`datetimebox`(日期时间框)等,方便用户输入和验证数据。 3. **数据展示组件**: 如`datagrid`(数据网格)、`treegrid`(树形...

    JQuery Easy UI学习交流文档

    **jQuery Easy UI学习交流文档** jQuery Easy UI 是一个基于 jQuery 的前端框架,它提供了一系列的组件,用于快速构建用户界面。这个文档集主要是为了帮助开发者更深入地理解和使用这一强大的工具,通过它,你可以...

Global site tag (gtag.js) - Google Analytics