`
star65225692
  • 浏览: 272157 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类

ExtJS加入自定义验证JS函数

阅读更多

有些复杂的验证我们是需要我们写脚本验证的。那么怎么做到通用呢?比如下面的情况:

image

左侧S、M、L、XL总数不能超过2件,右侧不能超过6件。首先可以定义以下验证JS,来验证数量是否超过最大值。

function valSumMax(ids, maxValue, msg) {
    if (ids != null && ids.length > 0) {
        var _temp = 0;
        for (var i = 0; i < ids.length; i++) {
            var value = Ext.getCmp(ids[i]).getValue();
            if (!isNaN(value)) {
                _temp += value;
                if (_temp > maxValue) {
                    var message = { 'IsVal': false, 'Message': msg != "" ? msg : ("超过最大值" + maxValue + "。") };
                    return message;
                }
            }
        }
    }
    var message = { 'IsVal': true, 'Message': '' };
    return message;
}

为了做到通用,于是又定义以下JS函数

function CustomValidator() {
    var msg = valSumMax(ids1, 2, "美容顾问服装最多只能填2件。请修改总数。");
    if (!msg.IsVal)
        return msg;2011大智慧下载
    msg = valSumMax(ids2, 6, "美容师服装最多只能填6件。请修改总数。");
    return msg;
}
function ValCustomValidator(isVal, valid) {
    if (typeof (valid) != 'undefined' && (!valid))
        return valid;
    if (typeof (isVal) == 'undefined' || isVal == null || isVal) {
        var msg = CustomValidator();
        if (!msg.IsVal) {
            Ext.MessageBox.show({
                title: '错误',
                msg: msg.Message,
                buttons: Ext.MessageBox.OK,
                icon: Ext.MessageBox.ERROR
            });
            return false;
        } else {
            return true;胸围怎么算
        }
    } else {
        return CustomValidator();
    }
}

最后,要写监听的验证Handler了。可以这么写:

_fp.Listeners.ClientValidation.Handler =
               @"
                            var isCheckd=valid;var msgs;var msg='';
                            if(typeof(ValCustomValidator)=='function')
                            {
                                msgs=ValCustomValidator(false,valid);
                                if(typeof(msgs.IsVal)!='undefined')
                                {
                                    isCheckd=msgs.IsVal;
                                    if(msgs.Message!='')
                                    msg='<span style=\'color:red;\'>'+msgs.Message+'</span>';
                                }
                                else
                                    isCheckd=msgs;
                            }
                         #{btnSave}.setDisabled(!isCheckd);
                         #{tbSave}.setDisabled(!isCheckd);
                         #{btnSumbit1}.setDisabled(!isCheckd);
                         #{btnSumbit2}.setDisabled(!isCheckd);
                         var valCs=isCheckd ? 'valaccept' : 'valexclamation';
                         if (msg=='') 
                            msg=isCheckd ? '<span style=\'color:green;\'>验证通过,可以提交数据</span>' : '<span style=\'color:red;\'>输入有误,请检查标红的输入项。</span>';
                         this.getBottomToolbar().setStatus({text :msg, iconCls: valCs});showMsg('温馨提示',msg,valCs);
                        ";

分享到:
评论

相关推荐

    extjs表单验证特殊字符

    在自定义验证函数中,可以利用JavaScript的正则表达式来匹配和排除特殊字符。上述示例中,`^[a-zA-Z0-9_]*$`是一个正则表达式,它表示字符串只能由字母、数字和下划线组成,不能有其他字符。 4. **全局验证(Ext....

    Extjs验证表单 Extjs验证表单

    本文将深入探讨Extjs中的表单验证机制,包括错误信息提示方式、内置验证属性、Vtype验证以及自定义验证方法。 #### 二、Extjs 错误信息提示方式 在进行任何形式的验证之前,首先需要配置错误信息的提示方式。Extjs...

    Extjs页面验证(修订版)

    - 自定义验证:如果内置规则无法满足需求,开发者可以通过编写自定义验证函数来实现特定的验证逻辑。 - 验证提示:错误消息可以通过`msgTarget`配置项设置显示方式,如在字段旁边显示或全局提示。 2. **前台与...

    Extjs表单常见验证小结

    // 使用自定义验证 { fieldLabel: "密码", id: "pass1" }, { fieldLabel: "确认密码", id: "pass2", vtype: "password", vtypeText: "两次密码不一致!", confirmTo: "pass1" // 指定要比较的另一个组件的ID ...

    Jquery、YUI、ExtJs 三大javascript框架表单验证带提示功能的demo

    另外,还可以通过`field.validator`定义自定义验证函数。ExtJS的错误提示系统允许开发者通过`msgTarget`配置项指定错误消息的显示位置,如显示在字段下方或旁边。`Ext.form.Labelable`类提供了`markInvalid`和`...

    Extjs页面验证

    为了实现更复杂的验证逻辑,可以创建自定义的验证器函数。这些函数接收字段值作为参数,返回一个错误消息或`false`表示验证通过。例如: ```javascript { xtype: 'textfield', fieldLabel: '用户名', name: '...

    ExtJS grid过滤操作

    - **自定义过滤器**:通过扩展内置过滤器或创建全新的过滤器类,实现自定义的过滤逻辑。 5. **监听过滤事件** - **filterchange**:当过滤器状态改变时触发,可用于监听并响应过滤操作,如更新UI或执行其他业务...

    EXTJS3.0多文件上传组件

    EXTJS3.0中的`UploadPanel.js`文件是EXTJS的自定义组件,用于构建一个上传面板。这个面板通常包含文件选择器、上传按钮、上传进度指示器等元素。UploadPanel.js会封装SWFUpload的功能,并与EXTJS的组件系统集成,...

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    ExtJS 实用教程

    了解JavaScript的基本语法、变量、函数、事件处理和DOM操作是学习ExtJS的前提。 1. **组件系统**:ExtJS的核心是其组件模型,所有UI元素都作为组件存在。组件可以是简单的按钮,也可以是复杂的表格或面板。组件具有...

    extjs3.3 中文文档

    6. **表单组件**:表单是Web应用中的重要部分,ExtJS提供了丰富的表单组件,如文本框、下拉框、复选框、单选按钮等,还支持自定义验证和远程提交。 7. **拖放功能**:ExtJS支持拖放操作,可以轻松实现元素之间的...

    基于EXTJS 的在线EXCEL编辑器

    EXTJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件化的用户界面元素和丰富的交互功能。基于EXTJS 的在线EXCEL编辑器,是利用EXTJS的强大功能来实现对Excel文件的在线创建、...

    EXTJS-upload.rar_extjs

    EXTJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,特别是Web应用的用户界面。它提供了丰富的组件库,包括表格、窗体、菜单、工具栏等,以及强大的数据绑定和远程数据通信机制。"EXTJS upload"指的是...

    ExtJS弹出密码输入框的js文件

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序。它提供了一系列丰富的组件,包括窗口、表格、菜单、按钮等,使得开发者可以构建功能复杂的Web应用。在本案例中,我们关注的是`Ext.MessageBox`,这...

    ExtJS时间控件、IP输入控件【控件】

    3. **JavaScript(JS)**:作为ExtJS的基础,JavaScript是实现这些控件交互的核心语言。开发者使用JavaScript编写事件处理函数,监听用户的操作,如点击按钮或输入文字,然后更新UI状态,执行相应的逻辑,如验证IP...

    EXTJS记事本 当CompositeField遇上RowEditor

    EXTJS是一种基于JavaScript的富客户端应用框架,常用于构建企业级Web应用。在这个场景中,开发者面临的问题是如何在EXTJS的RowEditor中处理由多个Combobox(下拉框)组成的CompositeField,以便实现级联筛选功能。...

    EXTJS AJAX方式发送数据给后台服务器.rar

    EXTJS允许自定义请求头,这在处理身份验证、API权限等问题时非常有用。例如,添加`Content-Type`和`Authorization`头: ```javascript headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer...

    extjs3.0开发包含示例api

    1. **JavaScript库**:EXTJS的核心库文件,包含所有组件、函数和类定义。 2. **CSS样式**:用于控制EXTJS组件的外观和布局,开发者可以自定义样式以满足项目需求。 3. **图片资源**:EXTJS的图标和其他图形资源,...

    extjs4中文视频下载地址

    - **概述**:ExtJS 是一款基于 JavaScript 的开源前端框架,用于构建复杂的 Web 应用程序。ExtJS 4.0 版本在原有基础上进行了大量的改进和优化,提供了更加丰富的组件库和更强大的功能支持。本课程将介绍 ExtJS 4.0 ...

Global site tag (gtag.js) - Google Analytics