首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ExtJS 4 - 如果自定义验证失败,如何将表单字段标记为无效并在其周围显示红色边框(由ExtJS默认完成)?

关于这个问题,我们可以使用ExtJS 4的表单验证功能来实现。具体步骤如下:

  1. 首先,在表单字段的配置中,需要设置validator属性,该属性是一个函数,用于自定义验证逻辑。在该函数中,如果验证失败,需要返回一个错误消息字符串。例如:
代码语言:javascript
复制
{
    xtype: 'textfield',
    name: 'username',
    fieldLabel: '用户名',
    validator: function(value) {
        if (value.length < 3) {
            return '用户名长度必须大于等于3';
        }
        return true;
    }
}
  1. 当表单提交时,ExtJS会自动触发验证函数,并将验证结果显示在表单字段周围的红色边框中。如果验证失败,表单字段将被标记为无效。
  2. 如果需要手动触发验证,可以使用表单的isValid()方法。例如:
代码语言:javascript
复制
var form = Ext.getCmp('myForm');
if (form.isValid()) {
    // 表单验证通过,可以提交表单
} else {
    // 表单验证失败,显示错误消息
    form.getFields().each(function(field) {
        if (!field.isValid()) {
            field.markInvalid(field.getErrors().join('; '));
        }
    });
}
  1. 如果需要自定义错误消息的显示方式,可以使用Ext.form.field.Base类的markInvalid()方法。例如,可以将错误消息显示在表单字段下方,而不是周围的红色边框中。

综上所述,使用ExtJS 4的表单验证功能,可以轻松实现自定义验证失败时,将表单字段标记为无效并在其周围显示红色边框的效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ExtJs二(实现登录)

一般的登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证码的图片、登录和重置按钮。因而需要用到的ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...:#DFE9F6", 代码中,第一句表示不要边框,如果喜欢带有边框的表单,可以把这项去掉或者修改为true。...第二句表示将表单面板向内压缩5像素,这样表单内的组件就不会和窗口的内边框粘在一起,这个可根据个人喜好设置。第三句的作用就是让表单面板的背景颜色和窗口融合在一起,而不是默认的白色,这还是个人喜好问题。...: "Vcode", minLength: 6, maxLength: 6 } } 9.现在要考虑怎么显示验证码图片,如果直接在表单内加入Image控件,会很难控制图片的位置,因为最好的方式是先套一个容器...先来完成简单onReset方法,基本功能就是重置表单,并将焦点移动到第一个文本字段,也就是用户名那里,还要刷新验证码,代码如下: onReset: function () { var

2.1K10

ExtJs二(实现登录)

一般的登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证码的图片、登录和重置按钮。因而需要用到的ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...:#DFE9F6", 代码中,第一句表示不要边框,如果喜欢带有边框的表单,可以把这项去掉或者修改为true。...第二句表示将表单面板向内压缩5像素,这样表单内的组件就不会和窗口的内边框粘在一起,这个可根据个人喜好设置。第三句的作用就是让表单面板的背景颜色和窗口融合在一起,而不是默认的白色,这还是个人喜好问题。...: "Vcode", minLength: 6, maxLength: 6 } } 9.现在要考虑怎么显示验证码图片,如果直接在表单内加入Image控件,会很难控制图片的位置,因为最好的方式是先套一个容器...先来完成简单onReset方法,基本功能就是重置表单,并将焦点移动到第一个文本字段,也就是用户名那里,还要刷新验证码,代码如下: onReset: function () { var

1.9K20
  • 基于QT的webkit与ExtJs开发CBS结构的企业应用管理系统

    对于客户端系统权限、基于Socket的通信等浏览器核心无法完成的操作,可以由客户端来完成。客户端可以直接与服务端通信,也可以通过浏览器核心与服务端通信。     ...2.边框和标题栏     目前大部分windows桌面程序都使用自定义的边框和标题栏,比如QQ,360安全卫士等,使用MFC或Windows API自定义窗口的标题栏和边框并不是一件容易的事情,...上面的代码是调用了系统默认的浏览器来完成下载。当然读者也可以考虑自己实现下载线程并提示下载进度、保存地址等。    ...由于在页面加载之初,window对象就已经初始化完成了,此时为其注册子对象已为时已晚,必须在其初始化之前为其注册,为此QWebView专门提供了javaScriptWindowObjectCleared...,在这个页面中会引入extjs的资源并通过js来渲染一个框架页面,然后根据用户的操作载入更多的js代码,来完成不同的业务。

    3.4K80

    HTML 表单和约束验证的完整指南

    例如,在下面的代码中,每个无效字段都有一个红色边框: :invalid { border-color: #900; } 用户在与表单交互之前会遇到一组令人生畏的红色框。...你可以: 停止验证,直到用户与字段交互或提交表单 使用自定义样式显示错误消息 提供仅在 HTML 中无法实现的自定义验证。...同样,无效表单可能会突出显示无效字段。 现场验证 各个字段具有以下约束验证属性: willValidate:true如果元素是约束验证的候选元素,则返回。...当它这样做时,分配给该字段的任何自定义验证功能将依次执行。必须全部返回true才能使该字段有效。 无效字段具有invalid应用于该字段的父元素的类,该类使用 CSS 显示红色帮助消息。...形式技巧 表单是所有 Web 应用程序的基础,开发人员花费大量时间处理用户输入。约束验证得到很好的支持:浏览器可以处理大多数检查并显示适当的输入选项。 建议: 尽可能使用标准的 HTML 输入类型。

    8.4K40

    Extjs form 组件

    1.根类 Ext.form.Basic 提供了,表单组件,字段管理,数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关联 Ext.form.Basic 的实例对象更方便的进行字段的配置...原始表单提交方法 Ext.form.action.DirectLoad Ext.form.action.DirectSubmit 指令式的模式 4.字段的控制 Ext.form.field.Base...Field的invalidText中,任何’{0}’ 都会被替换成这个字段的值,’ {1}’会被替换成这个字段的format,下面的代码展示了如何使用这个特性自定义错误信息     自定义校验:       ...提交之前调用了isValid方法确保每个表单字段都已经填写正确    3.最后调用submit方法,并传递了两个回调函数success和failure,在这两个回调函数的参数中,action.result...,如果数据是无效的 Ext.Msg.alert('Invalid Data', 'Please correct form errors.') }             }       } ]

    2K50

    ExtJs四(ExtJs MVC登录窗口的调试)

    将原来调用alert方法的语句删除,然后加入显示登录窗口的代码: Ext.ux.Login.show();  现在,在页面打开首页,将看到如下图 ? 单击一下图片,验证码也可刷新了。...因为不需要Index方法,因而将其修改为Login,并将返回结果由ActionResult修改为JObject。...代码通过遍历ModelState中不能通过验证的字段,将其加入到errors对象中。...这里有个问题一定要注意,模型中的字段名称必须与定义表单时的字段的name名称一致,不然后台字段与前台字段就对应不上了。  ...; } 如果用户名和密码错误,则返回针对用户名和密码字段返回错误信息。如果验证成功,返回success为true,则表示登录成功了。

    4.4K20

    ExtJs四(ExtJs MVC登录窗口的调试)

    将原来调用alert方法的语句删除,然后加入显示登录窗口的代码: Ext.ux.Login.show();  现在,在页面打开首页,将看到如下图 ? 单击一下图片,验证码也可刷新了。...因为不需要Index方法,因而将其修改为Login,并将返回结果由ActionResult修改为JObject。...代码通过遍历ModelState中不能通过验证的字段,将其加入到errors对象中。...这里有个问题一定要注意,模型中的字段名称必须与定义表单时的字段的name名称一致,不然后台字段与前台字段就对应不上了。  ...; } 如果用户名和密码错误,则返回针对用户名和密码字段返回错误信息。如果验证成功,返回success为true,则表示登录成功了。

    2.6K40

    Ext常用组件

    以下将通过数据验证说明 Field。在默认的情况下,表单验证的输入控件会监听blur事件,数据验证失败则会根据 msgTarget的设置显示错误消息。...Field,所以任何表单输入控件都可以改变其错误消息的显示方式。用户登录的验证代码如下: 默认为true trackMouseOver false表示mouseover无效果 useArrows 小箭头 ​本章总结​ Ø Ext中的 MessageBox是一种特殊的窗口,配置简单,可以任意拖动...​需求说明​ 在任务2的基础上完成注册功能,当用户点击【注册】按钮后,提交到后台程序并保存到数据库,保存成功或失败给出提示,效果如图3.2.3所示。...在默认情况下,表单验证的输入控件会监听blur事件,如果数据验证失败,则根据msgTarget的设置显示错误消息。

    4600

    Ext基础

    总之,如果程序中已经存在其他库,则 Ext可以通过利用它们为用户提供各种可能性和性能上的优化。只要实现了对应的底层库接口,可以为任意一个框架添加适配器。...表格包含的列由 columns配置,每列的header表示该列的名称,dataIndex表示列对应的记录集字段。...为了使数据可以显示,需要通过“store.load();”对数据进行初始化。 定义列模型并完成原始数据和数据转换后,可以进行装配。...自定义列宽​ 2.2.2 小节的 Grid 中,所有的列宽都相同。当列不够宽时,用户必须手动调整其宽度。cm支持设置列宽,不设置时会取默认的列宽 lOOpx。...Ø ExtJS组件可以分为 3 类,即基本组件、工具栏组件、表单及元素组件。

    15210

    Ext JS 教程-组件 原

    一个ExtJS 应用程序是由一个或者更多个叫做组件的窗口小部件组成的。...此现象发生的原因是第一个tab是默认活动的tab,因此它的容器Tab Panel立即初始化和渲染了它。 ? 指导第二个tab被点击,它的警告框是不会得到显示的。...创建一个组件的(继承了该组件的)新类并替换它在组件层级中的位置,比创建一个拥有一个ExtJS组件,还要在外部渲染和管理的新类,要容易。...render方法被调用了(这是由容器的布局管理器来完成的)。这个方法也许没有被重写,而是由Ext基类实现的。...Panel拥有许多的能力: 1 边框(Border) 2 头部(Header) 3 头部工具(Header tools) 4 尾部(Footer) 5 尾部按钮(Footer buttons

    3.2K30

    工具栏和菜单

    在ExtJS中实现这些菜单都非常简单。 1.2 工具栏 1.2.1 简单工具栏 Ext.Toolbar是工具栏的基础组件,它相当于容器,在其中可以放置各种工具栏元素,主要包括按钮、文字和菜单组件。...典型的工具栏是由一组按钮组成,比如Word办公软件的新建,打开、保存、插入、编辑等,下面就使用ExtJS实现这样的工具栏,代码如示例5.1所示。...图5.1.11 自定义表单菜单 1.3.6 右键菜单 在ExtJS中,可以为用户定义一个功能菜单,在用户单击鼠标右键时代替浏览器提供的系统功能菜单。...这种自定义的右键菜单也是通过Ext.menu.Menu实现的。...接下来为页面添加监听事件,获得document对象,监听它的contextmenu事件,在这个事件处理函数中,首先取消浏览器的默认操作,然后调用contextmenu的showAt()函数,在鼠标当前位置显示我们定义好的菜单

    5810

    3分钟短文:十年窖藏,Laravel告诉你表单验证的“正确姿势”

    追加验证 在上面的代码内再添加一些代码: [pic] 其中 $request->validate() 方法是实例化了一个 Validator 对象,并默认使用 $request->input() 所有的输入数据作为验证对象...' => 'required|string' 视图模板显示错误信息 有了验证规则之后,我们需要承载验证失败的那些错误提示信息。...为了检查是不是表单验证生效了,你可以直接在空白表单,点击“提交”按钮,输出内容大致如下: [pic] 红色警告部分,就是视图模板文件里 $errors 发挥作用了。...自定义错误提示信息 错误提示信息,是laravel内置验证规则给定的,如果你觉得提示信息不够详尽,不太满意,自己写也是没问题的。 我把上面的验证规则重写一下。...写在最后 本文初步介绍了laravel验证器内置规则的使用,以及如何将验证信息渲染到视图文件内。 并介绍了自定义验证错误提示信息的使用方法。

    1.7K30

    Java实现扫雷小游戏介绍

    ,非雷数为381; 3、自定义功能能够让玩家重新定义游戏的布局(行列范围9~30)与雷数(少于格子数且不能全是雷); 4、表情 游戏仍然在继续的时候显示微笑的表情 ,当鼠标按住方格的时候显示惊讶的表情...游戏规则与玩法 游戏规则 扫雷就是要把所有非地雷的格子揭开即胜利,踩到地雷格子就算失败; 游戏主区域由很多个方格组成; 使用鼠标左键随机点击一个方格,方格即被打开并显示出方格中的数字; 方格中数字则表示其周围的...右键单击: 在判断为地雷的方块上按下右键,可以标记地雷(显示为小红旗)。 标记地雷后重复一次右击则标记(?),需要一次或两次操作右击来取消标雷)。 双击: 同时按下左键和右键完成双击。...当双击位置周围已标记雷数等于该位置数字时操作有效,相当于对该数字周围未打开的方块均进行一次左键单击操作。 地雷未标记完全时使用双击无效。若数字周围有标错的地雷,则游戏结束。...如果游戏处于运行状态,则要判断点击的位置是否为地雷,如果是地雷直接结束,否则执行默认的方块打开操作。

    1.5K60

    房屋租赁管理系统的设计和实现,SpringBoot计算机毕业设计论文

    ,使用相关的JSP+Extjs技术完成前端和中间层的代码编写。...2.3 MySQL数据库 MySql数据库是由瑞典的AB公司运用C和C++设计并开辟出来的数据库管理琐细。...MySQL数据库是一种具有高度安全性、储存数据并通过连接将数据传到界面显示中,它以最快最安全的方式记录随时更改的数据,也可以用于从主机到客户机之间数据的复制,即使主机出现问题,还有无数备用机可以使用数据...点击修改携带ID跳转到修改页面填充属性,修改内容后提交表单首先判断合规性正常则提交表单,如图 3-5所示。...47所示: 4.3.3 数据库表设计 根据上面的实体关系,对数据库表进行详细的设计,再描述每个表的字段属性,建立primary key和foreign key,描述各字段的长度与字段属性。

    10.5K23

    【Spring】SpringBoot的10个参数验证技巧

    如果有特殊参数验证的场景,可以使用 Spring 的 JSR 303 验证框架创建自定义验证注释。自定义注解可以让你的的验证逻辑更具可重用性和可维护性。...如果 title 为 null 或唯一,则验证成功,并返回 true。...4 提供有意义的错误信息 当验证失败时,必须提供清晰简洁的错误消息来描述出了什么问题以及如何修复它。 这是一个示例,如果我们有一个允许用户创建新用户的 RESTful API。...,错误消息将根据随请求发送的“Accept-Language”标头以用户的首选语言显示。...假设我们有一个表单,用户可以在其中输入任务的开始日期和结束日期,并且我们希望确保结束日期不早于开始日期。我们可以使用跨域验证来实现这一点。

    66140

    AngularDart4.0 指南- 表单 顶

    向用户显示验证错误并启用/禁用表单控件。 使用模板引用变量在HTML元素之间共享信息。 您可以在Plunker中运行实例(查看源代码)并从那里下载代码。...这个表格中的三个字段中的两个是必需的。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意的风格显示验证错误: ?...使用ngModel双向数据绑定语法将数据属性绑定到每个表单控件。 为每个表单输入控件添加一个ngControl指令。 添加自定义CSS来提供视觉反馈。 显示和隐藏验证错误消息。...它有一个绿色的边框。 它具有类形式控制和有效性。 2.通过添加一些字符来更改name。 类保持不变。 3.删除名称。 输入框边框变为红色。 is-invalid类替换为is-valid。...文本字段变为空白,如果您更改了power,它将恢复为默认值。 用ngSubmit提交表单 用户应该能够在填写表单后提交这个表单。

    17.5K30

    Flask表单之WTForms和flask-wtf

    = '1234': #field.data:用户提交过来的数据 raise ValidationError('验证码错误') #如果验证失败,就抛出验证失败的异常...不过,一旦有任意一个字段未通过验证,这个实例方法就会返回False,引发类似GET请求那样的表单的渲染并返回给用户。稍后我会在添加代码以实现在验证失败的时候显示一条错误消息。...完善字段验证 表单字段的验证器可防止无效数据被接收到应用中。 应用处理无效表单输入的方式是重新显示表单,以便用户进行更正。...如果你尝试过提交无效的数据,相信你会注意到,虽然验证机制查无遗漏,却没有给出表单错误的具体线索。下一个任务是通过在验证失败的每个字段旁边添加有意义的错误消息来改善用户体验。...for循环以便用红色字体来渲染验证器添加的错误信息。

    4K20

    OEA 中 WPF 树型表格整体重构

    经过N多天的努力……目前已经把所有代码完成。TreeGrid 不再依赖 TreeView、GridView,而是直接从 ItemsControl 上继承下来,自定义逻辑树、可视树结构,自定义绘制过程。...布局系统会检测之前所有标记为需要重新测量的元素,并分别调用它们的 Measure 方法。然后,再按类似的逻辑来调用 Arrange 和 Render。    ...通过添加一些 bool 类型的防止重入的字段,Measure 中可以做所有逻辑操作之后、渲染之前的控件构造、刷新、替换、状态变更,并对最终确定的可视树子元素进行测量。如: if(this....例如,ListBoxItem 并不一定要放在 ListBox 中才能显示。所以,在开发自定义控件时,尽量不要把控件的可视树关系要求得过于严格。当没有指定的可视树关系时,也不应该抛出异常。...也就是说,如果还没有应用模板的元素,会在第一次测量之初,会应用它对应的模板。

    1.9K60
    领券