关于这个问题,我们可以使用ExtJS 4的表单验证功能来实现。具体步骤如下:
validator
属性,该属性是一个函数,用于自定义验证逻辑。在该函数中,如果验证失败,需要返回一个错误消息字符串。例如:{
xtype: 'textfield',
name: 'username',
fieldLabel: '用户名',
validator: function(value) {
if (value.length < 3) {
return '用户名长度必须大于等于3';
}
return true;
}
}
isValid()
方法。例如:var form = Ext.getCmp('myForm');
if (form.isValid()) {
// 表单验证通过,可以提交表单
} else {
// 表单验证失败,显示错误消息
form.getFields().each(function(field) {
if (!field.isValid()) {
field.markInvalid(field.getErrors().join('; '));
}
});
}
Ext.form.field.Base
类的markInvalid()
方法。例如,可以将错误消息显示在表单字段下方,而不是周围的红色边框中。综上所述,使用ExtJS 4的表单验证功能,可以轻松实现自定义验证失败时,将表单字段标记为无效并在其周围显示红色边框的效果。
领取专属 10元无门槛券
手把手带您无忧上云