ext 验证用户名异步

最新推荐文章于 2025-08-28 14:19:18 发布

最新推荐文章于 2025-08-28 14:19:18 发布 · 194 阅读

文章标签：

#EXT #Ajax

Extjs 专栏收录该内容

39 篇文章

订阅专栏

本文探讨了在用户注册过程中，如何有效验证用户名是否已被占用的技术细节。通过改进前后端交互逻辑，确保了用户输入的有效性和系统反馈的准确性。

{
					id : 'account',
					xtype : 'textfield',
					name : 'account',
					fieldLabel : '用户名',
					blankText : '用户名不能为空',
					allowBlank : false,
					validationEvent : 'blur',
					validator : function(thisText) {
						Ext.Ajax.request({
									url : '../userManage.do?method=isPersonNameUsed',
									method : 'post',
									params : {
										personName : thisText
									},
									success : function(response, options) {
										if (response.responseText == 'nameUsed') {
											Ext.getCmp('account')
													.markInvalid('用户名已被使用');
										} else {
										}
									}
								});
						return true;//输入框失去焦点后，执行Ajax请求，但马上继续执行对是否valid的判断，这里先返回valid，默认验证成功，假如异步的请求返回后发现用户名已注册，在改成invalid  markInvalid('用户名已被使用');

					}
				}

发现还是有问题，假如我输入的名字是被占用的，代码执行了markInvalid ，输入栏被改成了invalid的状态（有红框），但是假如这时我执行提交，提交时会执行userForm.form.isValid() ，

或者手动执行alert(Ext.getCmp('account').isValid()); 这时会判断那个输入栏是valid的，就是说markInvalid 只是改变了输入栏的外在，提示错误，但内在的valid判断还是最开始返回的那个true，

然后反过来最开始返回false，然后假如没占用的话，Ext.getCmp('account').clearInvalid();

那么最开始输入完是现实错误的，然后过一会后台验证完了，发现没占用，红框没了，

但一旦提交的时候 userForm.form.isValid() 还是会判断说输入框是invalid的，这时因为最开始返回的false

貌似 markInvalid clearInvalid 改变的只是表象

又研究了一下现象发现了在执行userForm.form.isValid() 时，他是会把所有输入框的vallidator函数都执行一遍的，这个时候我最开始的写的true 或false就产生效果了其实每次markInvalid clearInvalid 还是把valid的状态改过来了，但是每次在userForm.form.isValid() 时就会又访问输入框的验证函数然后直接返回true 或false才造成了之前的现象

下面是再次改了之后的代码

isPersonNameOK=true; 先定义个全局变量

{
					id : 'account',
					xtype : 'textfield',
					name : 'account',
					fieldLabel : '用户名',
					blankText : '用户名不能为空',
					allowBlank : false,
					validationEvent : 'blur',
					validator : function(thisText) {
						if (thisText != '') {
							Ext.Ajax.request({
								url : '../userManage.do?method=isPersonNameUsed',
								method : 'post',
								params : {
									personName : thisText
								},
								success : function(response, options) {
									if (response.responseText == 'nameUsed') {
                                        isPersonNameOK=false;
										 Ext.getCmp('account')
										 .markInvalid('用户名已被使用');
									} else {
										isPersonNameOK=true;
                                        Ext.getCmp('account').clearInvalid();
									}
								}
							});
						}
						return isPersonNameOK;
					}
				}