欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【原创】TextField的emptyText提交验证

程序员文章站 2022-06-04 15:22:01
...

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

 

 

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