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

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

相关·内容

领券