首页
学习
活动
专区
工具
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的表单验证功能,可以轻松实现自定义验证失败时,将表单字段标记为无效并在其周围显示红色边框的效果。

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

相关·内容

  • 初识Ext.NET

    以前从没想过会用到ExtJS,总是对它有着一种反感:认为脚本资源大,执行脚本多,性能差等等。最近因为一个项目使用到了,就用上了。相对JQuery,ExtJS没有那么方便灵活,但是其界面美观,功能实用,可以节约不少开发时间。玩ExtJS,就感觉是在玩配置,也许Java程序员会习惯些。熟悉那些配置无疑也是一件麻烦而且棘手的事情,稍不留心,就得为自己的失误埋单。虽然网上有些设计器,但是大都满足不了需求。后来,在网上找到一款还不错的框架——Ext.NET。这对于.NET开发人员来说,能节省不少时间。至少带智能提示的xml配置怎么也要比写js要顺手方便多了。而且其还是免费开源的。不过在使用过程中,也没有那么顺畅。

    06
    领券