`

EasyUI 验证框使用方法

阅读更多

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

来自:http://blog.csdn.net/qwlovedzm/article/details/6676525

分享到:
评论

相关推荐

    easyui验证框使用方法

    ### easyui验证框使用方法详解 #### 一、概述 EasyUI是一款基于jQuery的用户界面插件集合,它简化了Web应用开发中的交互组件创建过程。其中,验证框(ValidateBox)是EasyUI中用于输入验证的一个强大工具,能够帮助...

    easyui常用验证框架

    常用的easyUI表单验证类型

    easyui验证扩展

    通过修改`$.fn.validatebox.defaults`对象,可以统一设定所有验证框的行为。 六、应用场景 EasyUI验证扩展在实际项目中有着广泛的应用,如电子商务网站的商品数量验证、注册表单的身份证号码验证、财务管理系统的...

    基于easyui 1.4.5的单选和多选框组件

    本文将深入探讨基于jQuery EasyUI 1.4.5的单选框和多选框组件的使用方法、功能特性以及如何结合实际项目进行应用。 一、jQuery EasyUI 1.4.5简介 EasyUI是一套基于jQuery的UI框架,它包含了多个可复用的UI组件,如...

    EasyUI后台管理框架

    例如,数据网格可以实现数据的增删改查功能,表单则用于收集和验证用户输入,对话框用于展示弹窗提示或进行独立操作,菜单和树形控件则用于导航和展示层级关系。 在“custom”目录中,可能包含了用户自定义的样式和...

    EasyUI前端框架下载

    在描述中提到的“easyUI框架下载”,暗示我们将讨论如何获取和使用 EasyUI。 首先,你需要从官方网站或者其他可靠的资源下载 EasyUI 压缩包。文件名为“EasyUI”,通常包含以下几个核心部分: 1. **CSS 文件**:...

    自定义jquery easyui 验证

    ### 自定义jQuery EasyUI验证规则详解 在进行前端表单验证时,为了提供更好的用户体验以及增强数据的有效性和安全性,我们通常会使用各种前端框架提供的工具。jQuery EasyUI 是一个基于 jQuery 的用户界面插件集合...

    jQuery+easyui validatebox 验证框

    validatebox验证框的使用通常包括以下几个步骤: 1. **引入依赖**:首先,你需要在HTML文件中引入jQuery、EasyUI和validatebox的相关CSS和JS文件。这些文件可以从EasyUI的官方下载包中获取。 ```html ...

    Jquery EasyUI 页面框架Demo

    这个Demo可能演示了如何使用`&lt;form&gt;`标签结合`easyui-form`类,以及各种输入控件(如`&lt;input&gt;`, `&lt;select&gt;`, `&lt;textarea&gt;`等)来创建表单,并配置验证规则。 4. 对话框(Dialog)和窗口(Window):EasyUI提供了...

    easyUI前端框架jar包

    4. **表单(Form)**:提供了多种输入控件,如文本框、下拉列表、复选框等,以及验证功能,便于用户输入和提交数据。 5. **菜单(Menu)**:用于构建多级菜单,可以动态加载数据,适用于创建导航菜单和上下文菜单。...

    jQueryEasyUI中文框架使用文档

    - **验证框(ValidateBox)**:自动验证输入字段的合法性。 - **日期输入框(DateBox)**:提供日历选择器,方便选择日期。 - **日历(Calendar)**:独立的日历组件,用户可以直接在日历上选择日期。 5. **窗口组件**...

    EasyUI前端框架

    通过链接标签`&lt;link&gt;`和脚本标签`&lt;script&gt;`,确保页面能正确识别并使用EasyUI的样式和功能。 2. **基本组件使用**:EasyUI提供了多种组件,例如: - **对话框(Dialog)**:用于显示弹出式窗口,可设置大小、位置...

    EasyUi前端框架

    在"EasyUi前端框架"中,我们将探讨其核心特性、主要控件的使用,以及如何与后台进行有效的结合。 一、EasyUi的核心特性 1. **组件丰富**:EasyUi提供了大量的可复用组件,如表格、下拉框、树形结构、日期选择器、...

    jquery-easyui 前端开发框架

    三、使用 jQuery EasyUI 开发步骤: 1. 引入 jQuery 和 jQuery EasyUI 的库文件。 2. 创建 HTML 结构,使用 EasyUI 标签和类名定义组件。 3. 初始化组件,通过 JavaScript 调用相关方法设置组件属性和行为。 4. 配置...

    EasyUi修改验证控件

    EasyUI 并未提供直接取消验证的方法,但可以通过直接操作 DOM 来移除验证失败的样式。例如,通过调用 `$("#" + elemId).removeClass('validatebox-invalid')` 可以清除对应的验证失败标识。 除了这两个问题,我们还...

    jQueryEasyUI框架使用文档.pdf

    - 表单组件:表单(Form)、组合框(ComboBox)、组合树(ComboTree)、数字框(NumberBox)、验证框(ValidateBox)、日期输入框(DateBox)、日历(Calendar) - 窗口组件:窗口(Window)、对话框(Dialog)、...

    easyui框架主要代码

    - **Ajax**:EasyUI 使用 jQuery 的 Ajax 方法与服务器进行异步通信,获取或更新数据。 - **JSON**:通常,数据以 JSON 格式在前后端之间传输,EasyUI 可以方便地解析 JSON 数据并填充到组件中。 4. **EasyUI ...

    .NET+EasyUI快速开发框架

    对于初学者,掌握".NET + EasyUI 快速开发框架"的关键在于理解.NET的MVC架构和EasyUI的组件使用。首先,通过官方文档学习.NET的C#语法和ASP.NET MVC的基本概念。其次,深入研究EasyUI的API和示例,熟悉各个组件的...

    Jquery easyUI插件以及使用方法

    jQuery EasyUI 是一个基于 jQuery 的轻量级框架,它提供了丰富的用户界面组件,使得开发者能够快速构建出美观且...通过学习和掌握其主要组件及其使用方法,你可以在项目开发中提高效率,为用户提供更加友好的交互体验。

    EASYUI 页面框架

    `index.html`, `demo1.html`, `demo2.html`, `demo.html` 是示例页面,展示了EASYUI的使用方法和效果;`images` 文件夹存储了框架所用到的图片资源;`js` 文件夹包含了EASYUI的JavaScript库和相关脚本;`css` 文件夹...

Global site tag (gtag.js) - Google Analytics