[Ext JS ] 动添切换字段的必填与非必填| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS ] 动添切换字段的必填与非必填

Ext JS的字段支持必填的设置， 通过设置allowBlank 属性设置这个字段不能为空，在失去焦点或是调用字段的valid 方法才进行检查， 如果字段位于Form 中， 调用Form 的valid 相关方法也会对字段的有效性进行检查。 必填的
验证效果如下图：
![](https://img-blog.csdnimg.cn/96f9ccac01f441719abffbba7deba4ba.png)
在这里插入图片描述

但是这种使用体验要等点击提交按钮才发现有字段没有填值， 是否在一开始就可以提示哪些栏位必须填写呢？
效果可以是在字段的标签前加一个必填的提示符， 类似：
![](https://img-blog.csdnimg.cn/74450d470a604577b9c3968d3babefff.png)

通过混合器的方式可以实现这种效果， 详细参考：
[Ext JS]12.12.1 必填字段组件扩展。

## 字段必填动态设置的要求与难点
现在的问题是： 在实际应用中， 页面或者表单的栏位是由联动的， 类似字段1的值为A时， 才显示字段2； 或者字段1的值为A时， 字段2才必填， 否则非必填。 也就是说是否必填是动添设置的。

在上一篇中， 对原生的栏位必填做了字段标签加 红色“*”的扩展， 也就是说要做到动添切换必填和非必填，需要达成的功能有：

字段标签的红色星号可以动添添加和删除
自动的验证部分需要是正确的。
对应上面的两个需求，有两个需要解决的难点：

动添添加和删除红色星号， 动态添加和清除输入框的红色边框。
allowBlank 只能在字段初始化的时候进行设置， 并没有 setAllowBlank 这样的方法， 也就是原生的字段类型不支持这种功能。也就是说一开始如果设置allowBlank 为true, 则就不会对其进行非空的验证。
## 字段必填动态设置的实现
针对上面的功能需求和难点， 实现方式包括：

1. 通过字段的 setFieldLabel() 方法设置字段的标签， 切换是否带红色星号。
2. 通过字段的 markInvalid() 和 clearInvalid() 来控制红色边框
3. 给字段添加 validator ， 如果标签中包含红色星号， 则值是空的话， 则返回错误信息， 否则返回true。
演示代码如下：

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS ] 动添切换字段的必填与非必填

网站导航