ExtJS4为form表单必填项添加红色，标识

ExtJS4中可以使用自定义的验证函数来实现表单必填项的验证，并通过添加CSS样式来标识必填项为红色。下面是一个示例：

```javascript

Ext.onReady(function() {

// 创建表单

var form = Ext.create('Ext.form.Panel', {

renderTo: Ext.getBody(),

width: 300,

bodyPadding: 10,

defaultType: 'textfield',

defaults: {

anchor: '100%',

labelWidth: 100,

allowBlank: false // 设置所有字段都为必填项

},

items: [{

fieldLabel: '姓名',

name: 'name'

},{

fieldLabel: '邮箱',

name: 'email',

vtype: 'email' // 使用内置的email验证类型

},{

xtype: 'datefield',

fieldLabel: '出生日期',

name: 'birthday',

format: 'Y-m-d'

}],

buttons: [{

text: '提交',

handler: function() {

if (form.isValid()) {

// 提交表单逻辑

}

}

}]

});

// 监听表单校验事件

form.on('validitychange', function(form, isValid) {

// 移除所有字段的错误样式

form.getForm().getFields().each(function(field) {

field.removeCls('field-error');

});

// 标记必填项为红色

form.getForm().getFields().each(function(field) {

if (!field.isValid()) {

field.addCls('field-error');

}

});

});

});

```

在上述示例中，我们创建了一个简单的表单，宽度为300px，有三个字段：姓名、邮箱和出生日期。默认情况下，所有字段都是必填项（使用`allowBlank: false`设置）。我们还为邮箱字段添加了内置的email验证类型。

为了实现必填项的红色标识，我们监听了表单的`validitychange`事件。在事件的回调函数中，首先使用`removeCls`方法移除所有字段的错误样式，然后使用`addCls`方法为必填项添加错误样式（使用CSS类名`field-error`）。

最后，我们为表单的提交按钮添加了一个点击事件处理函数，当表单验证通过时才进行提交逻辑的处理。

在CSS中，我们可以为`field-error`类定义红色的标识样式，例如：

```css

.field-error .x-form-item-body {

border-color: red;

}

.field-error .x-form-item-label {

color: red;

}

```

当某个字段验证失败时，它的输入框边框和标签文本都会显示红色。

通过上述方式，我们可以实现为ExtJS4表单的必填项添加红色标识。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/