首页
学习
活动
专区
工具
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.3K40

    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,则表示登录成功了。

    2.6K40

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

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

    4.4K20

    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

    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,描述各字段的长度与字段属性。

    9.7K22

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

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

    61440

    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.8K60

    bootstrapValidator 中文API

    在提交表单时也不会执行任何验证。当您要在自定义提交处理程序中提交表单时,可能会使用它。 破坏 destroy() - 破坏插件。 它将删除所有错误消息,反馈图标以及关闭插件创建的事件。...例 显示自定义区域中的消息 getOptions getOptions(field, validator, option): String|Object - 获取字段选项。...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法返回表单选项。 validator 串 验证器的名称如果未定义验证器,则该方法返回所有字段选项。...所有的字段都被标记为未被验证。 参数 类型 描述 resetFormData 布尔 如果true,该方法重置具有验证器规则的字段。...当您需要重新验证其值其他插件更新的字段时使用它。 默认情况下,一旦该字段已经被验证被标记为有效的插件,该插件就不会重新验证字段。当与其他插件一起使用时,字段值被更改,因此需要重新验证

    13.2K50

    JavaWeb01轻松掌握HTML(Java真正的全栈开发)

    标签type属性: text:定义单行输入字段(文本框),用户可以在其中输入文本默认宽度20个字符 属性: name:定义标签名称(规定文本框名称,通过...常用属性: text:用于设定文字颜色 background:用于设定背景图片 bgcolor:用于设定背景色 关于html中颜色取值 颜色红色、绿色、蓝色混合而成 有三种取取值方式: 1.rgb(0,0,0...常用属性: src:用于设定要引入的图片的url alt:用于设定图像的替代文字 width:用于设定图片的宽度 height:用于设定图片的高度 border:图片边框厚度 align:与周围文字的对齐方式...关于标签type属性值说明 : text 定义单行的输入字段,用户可在其中输入文本.默认宽度为 20 个字符....JavaScript 的常见应用时图像操作、表单验证以及动态内容更新.

    5.2K50

    angularjs 表单验证

    二、表单中控制变量 屏蔽浏览器对表单默认验证行为 在表单元素上添加novalidate标记即可,问题是我们怎么知道我们的表单有哪些字段是有效的,那些事非法或者无效的?...如果表单当前通过验证,他将为true: formName.inputFieldName.$valid 未通过验证表单 formName.inputFieldName....$error 如果验证失败,这个属性的值为true;如果值为false,说明输入字段的值通过了验证。 <!...input.ng-invalid{ border: 1px solid red; } 四、自定义验证  但是,默认验证指令不一定能够,完全满足我们的真实应用场景,ng同样提供的自定义验证指令的功能...$setViewValue()方法适合于在自定义指令中监听自定义事件(比如使用具有回调函数的jQuery插件),我们会希望在回调时设置$viewValue执行digest循环。

    6.7K70
    领券