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

Ext JS开发大全

CmsWing

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

## [Ext JS ] 动添切换字段的必填与非必填
Ext JS的字段支持必填的设置， 通过设置allowBlank 属性设置这个字段不能为空，在失去焦点或是调用字段的valid 方法才进行检查， 如果字段位于Form 中， 调用Form 的valid 相关方法也会对字段的有效性进行检查。 必填的
验证效果如下图：
![](/upload/picture/2022-09-30/upload_a54ded21cd340b64cdcdd552ddebbcb5.png)
但是这种使用体验要等点击提交按钮才发现有字段没有填值， 是否在一开始就可以提示哪些栏位必须填写呢？
效果可以是在字段的标签前加一个必填的提示符， 类似：
![](/upload/picture/2022-09-30/upload_fbbc4e581c268435ebc3850aa029d1ea.png)
通过混合器的方式可以实现这种效果， 详细参考：
[Ext JS]12.12.1 必填字段组件扩展。
### 字段必填动态设置的要求与难点
现在的问题是： 在实际应用中， 页面或者表单的栏位是由联动的， 类似字段1的值为A时， 才显示字段2； 或者字段1的值为A时， 字段2才必填， 否则非必填。 也就是说是否必填是动添设置的。
在上一篇中， 对原生的栏位必填做了字段标签加 红色“*”的扩展， 也就是说要做到动添切换必填和非必填，需要达成的功能有：
字段标签的红色星号可以动添添加和删除
自动的验证部分需要是正确的。
对应上面的两个需求，有两个需要解决的难点：
动添添加和删除红色星号， 动态添加和清除输入框的红色边框。
allowBlank 只能在字段初始化的时候进行设置， 并没有 setAllowBlank 这样的方法， 也就是原生的字段类型不支持这种功能。也就是说一开始如果设置allowBlank 为true, 则就不会对其进行非空的验证。
字段必填动态设置的实现
针对上面的功能需求和难点， 实现方式包括：
通过字段的 setFieldLabel() 方法设置字段的标签， 切换是否带红色星号。
通过字段的 markInvalid() 和 clearInvalid() 来控制红色边框
给字段添加 validator ， 如果标签中包含红色星号， 则值是空的话， 则返回错误信息， 否则返回true。
演示代码如下：
```javascript
var panel = Ext.create('Ext.panel.Panel', {
renderTo : 'div1',
items:[{
xtype:'textfield',
itemId: 'mytextfield',
fieldLabel: '动态设置必填',
validator: function (val) {
var isValid = true;
if (val != null && val.length > 0) {
// 有值
} else {
if (this.getFieldLabel().startsWith('* ')) {
isValid = 'This field is required.';
}
],
tbar:[{
text:'设置必填',
handler: function(){
var field = panel.getComponent('mytextfield');
if (field.getFieldLabel().startsWith('')) {
field.setFieldLabel('* ' + field.getFieldLabel().substr(68));
} else if (!field.getFieldLabel().startsWith('* ')) {
field.setFieldLabel('* ' + field.getFieldLabel());
}
field.markInvalid('This field is required.');
field.allowBlank = true;
}
},{
text:'设置非必填',
handler: function(){
var field = panel.getComponent('mytextfield');
field.clearInvalid();
field.setFieldLabel(field.getFieldLabel().replace('* ',''));
}
},{
text: '验证有效',
handler: function(){
var field = panel.getComponent('mytextfield');
alert(field.isValid());
}
}]
});
```

在线演示效果
https://osxm.github.io/extjs_dev_ency/demos/chp12/fieldRequired.html
![](/upload/picture/2022-09-30/upload_cd97744f34cbaf4ddc664a8d466000c4.png)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

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

网站导航