【原创】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空值提交的方法或者对以上方法有改进意见，请各抒己见。

 

 

注：本博客文章均已注明原创和转载，如转载本博客文章，需注明原文出处或征求原作者同意。

 

评论

1 楼 george.hu 2013-09-29  

网上有多种多样的方法来实现这个功能，很多地方都利用了判断emptyText的值与用户submit的值对比，当两者相等的时候使用空值来代替原值。

其实有一个更加简单的方法实现这个效果，只需要在submit的时候添加上“submitEmptyText: false”这么一句就可以解决这个问题了。
?
win.form.submit({
     submitEmptyText: false,
     url : 'xxxxx',
     method : 'post'
});
That all, 方便快捷。