Ext.form.TextField是表单基本元素,当使用表单时,这种表单元素必不可少,配置选项emptyText的使用效果也很诱人,表单初始时将显示emptyText设置的提示语句,当文本域获得鼠标焦点时,提示语消失,很方便对表单字段的提示,如此好用,emptyText是我们使用form时常用到的元素之一。
然而,加入我们在某个表单中的一个元素foo设置了emptyText为“请输入XX”,当用户对该字段放弃输入,该文本域保持空值,点击提交,表单有效性检验仍然能获取到该文本域非空
var foo = form.findField("foo") //foo == "" false
ExtJs对emptyText属性命名容易混淆,emptyText实际使用效果类似“defaultValue“(该option目前上不存在),所以,在有效性检验时需要对表单元素的提交的数据和该表单元素的emptyText比较,如果相同,说明用户没有输入任何文本;如果不同并且非空,说明是用户填写的内容。
问题分析清楚了,怎么能够在未知表单名称的情况下,遍历表单元素呢,这就要使用javascript的for in循环了
//以下代码是对某一个form的提交事件句柄函数
handler :function(btn) {
var thisForm = formInsert.getForm();
if (thisForm.isValid()) {
// 添加按钮失效,事务锁定
btn.disable();
var submitValues = formInsert.getForm().getValues();
// 修正emptyText造成的提示语句当做value值传递到后台
// 如果是emptyText就改为''
for (var param in submitValues) {
if (thisForm.findField(param) && thisForm.findField(param).emptyText == submitValues[param]) {
submitValues[param] = '';
}
}
//alert('submitValues = ' + Ext.util.JSON.encode(submitValues));
return;
thisForm.submit({
waitTitle :'请稍候',
waitMsg :'正在提交表单数据,请稍候...',
params:submitValues,
// 1 提交成功后的回调函数
success :function(form, action) {
// 面板显示回馈信息
winInsert.setTitle('添加成功!');
// 对所填数据清空,保证下次弹出的时候不再显示上次填写的数据
formInsert.getForm().reset();
// 添加成功后,表单应该消失
ds_json.load({params:{start:0,limit:10}});
formInsert.ownerCt.hide();
// Grid从新编号
// grid.view.refresh();
// 添加按钮生效,insert事务解锁
btn.enable();
},
// 2 失败后回调函数
failure:function(form, action) {
SMN.base.pubextjs.Exception.errorHandler(form, action);
btn.enable()
}
});
}
红色标识代码为emptyText检验,该代码对一般常见的表单元素都适用,检查到某个表单字段提交值还为emptyText原始字符串时,我这里的处理是将提交值赋值为空字符串,后台过滤空字符串,从而可以将用户填写过的和未填写的字段区分开,达到有效性检验-非空性验证的目的。
各位网友,如果有更好的控制emptyText空值提交的方法或者对以上方法有改进意见,请各抒己见。
注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。
分享到:
相关推荐
本实战教程将聚焦于如何使用`TextField`来实现手机号的验证,并限制输入的字符长度,确保用户只能输入有效的手机号码。我们将探讨以下几个关键知识点: 1. **SwiftUI的TextField**: `TextField`是SwiftUI提供的一...
例如,对于`Ext_TextField表单验证.xls`文件,它可能是包含EXT表单验证示例的电子表格,详细列出了不同vtype的使用方法和效果,这对于学习和参考EXT表单验证非常有帮助。 总而言之,EXT表单验证中的TextField组件...
在表单中,每个TextField作为表单的一个字段,可以通过`FormPanel`的`getForm().load()`和`submit()`方法进行数据加载和提交。 6. **示例代码**: 压缩包内的"sample"文件可能包含了创建和使用TextField的示例代码...
2. `name`:每个textField都需要一个唯一的name属性,以便在提交表单时标识数据。 3. `allowBlank`:设置是否允许字段为空,如果为false,则当字段为空时表单验证会失败。 4. `maxLength`:限制输入的最大字符数。 5...
在ExtJs5中,开发人员有时需要自定义UI以满足特定的设计需求,比如去掉`textfield`组件的边框。在给定的描述中,我们看到开发者遇到了一个问题:默认情况下,ExtJs5的`textfield`组件有明显的边框,但通过添加特定的...
Java中的`TextField`类是Swing库中的一个基础组件,用于创建用户可以在其上输入文本的单行文本字段。在GUI编程中,`TextField`是一个非常常见的元素,它允许用户输入和编辑一行文本。以下是对`TextField`类的详细...
基于TextField的图文混编组件是一种解决方案,它利用了Adobe Flash(ActionScript 3,AS3)中的TextField类来实现这一功能。TextField在Flash中是一个基础的文本显示和编辑控件,它可以处理简单的文本输入,但通过...
- `textFieldShouldReturn(_ textField:)`: 当用户按下回车键时调用,通常用于执行搜索或提交操作。 4. **添加到视图**: 最后,我们需要将创建的`textField`添加到父视图上: ```swift view.addSubview...
在iOS开发中,`textField` 是一个非常常见的控件,用于接收用户输入的文字信息。在很多情况下,我们可能需要在用户交互时管理键盘的显示和隐藏,以优化用户体验。在这个"textField的一个简单例子"中,我们将探讨如何...
4. **输入限制**:可以使用`maxLength`属性限制用户输入的最大字符数,或通过`delegate`方法实现更复杂的输入验证,如只允许输入数字、字母等。 5. **添加左/右视图**:利用`leftView`和`rightView`属性,可以添加...
4. **信息采集优化**:在信息采集类的场景下,例如表单填写,`TextField-InputView`可能会有特定的优化,比如自动验证输入数据、滑动切换不同输入类型等,提升用户填写信息的效率。 5. **可扩展性**:作为一个开源...
如果您能提供关于这些字段的真实内容,比如标题可能是“Java编程中的TextField使用”,描述可能是“在Java Swing应用中遇到TextField输入验证的问题”,标签可能是“Java”、“Swing”、“UI设计”等,那么我可以...
在QML(Qt Quick)中,`TextField`是用于用户输入文本的基本组件,而`Completer`则是一种增强用户体验的功能,它可以提供输入建议,帮助用户快速完成输入。本项目"QML-TextField-Completer.zip"显然是一个关于如何在...
在iOS应用开发中,创建用户界面是至关重要的一步...在实际开发中,还可以根据需求添加更多交互效果,如文本验证、自定义键盘样式等。`LTFDemo`项目可能包含了这些功能的示例代码,你可以下载并运行,进一步理解和学习。
在iOS开发中,TextField是用户输入文本的基本控件,它通常用于收集用户的单行文本信息。然而,标准的UITextField在处理多行文本时可能存在局限,因为它默认不支持自适应高度,即不能根据输入内容的多少自动调整自身...
"ios keyword 自适应 textField 高度"这一话题,正是关注如何在故事板(Storyboard)中巧妙地设置背景图片以及管理多个UITextField的高度动态变化。 首先,让我们深入理解UITextField的基本属性和行为。UITextField是...
在GUI(图形用户界面)应用中,`TextField`组件是实现文本输入和编辑的基本元素。在这里,我们将深入探讨如何使用`TextField`来创建一个功能丰富的文本编辑器。 `TextField`是JavaFX或Swing等GUI库中的一个类,它...
2. **交互行为**:这可以是添加动画效果、更改键盘类型、实现输入验证等。例如,当用户开始输入时,可以添加一个淡入动画,或者限制只能输入数字或特定格式的数据。 3. **扩展功能**:这可能包括添加下拉菜单、日期...
在Android开发中,`TextField`是用于用户输入文本的基本组件,尤其在构建用户界面时扮演着重要角色。在本文中,我们将深入探讨`TextField`如何实现多行输入,即自动换行的功能,并揭示一个小小的惊喜——只需导入一...
这可以帮助用户即时了解他们的输入是否满足系统的要求,从而避免因提交错误信息而引起的不便。 1. Android中的警示效果:在Android中,可以使用TextInputLayout配合TextInputEditText来实现TextField的警示效果。...