【原创】TextField的emptyText提交验证
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空值提交的方法或者对以上方法有改进意见,请各抒己见。
注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。
上一篇: AngularJS 1.4.0下载
下一篇: Jsdoc注释标签