{
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;
}
}
分享到:
- 2009-09-29 16:22
- 浏览 4026
- 评论(0)
- 论坛回复 / 浏览 (0 / 3276)
- 查看更多
相关推荐
Ext.js 中的用户名验证机制 在 Ext.js 框架中,验证用户输入的用户名是否已经存在于数据库中是一个非常重要的步骤。本文将详细介绍如何使用 Ext.js 实现用户名验证机制。 用户名验证机制的必要性 在用户注册或...
### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中,异步提交表单是一种常见的技术手段,它能够提升用户体验,减少页面刷新带来的数据丢失风险,并能有效提高系统的响应...
例如,如果我们想要验证用户名是否已存在于数据库中,可以这样做: ```javascript var usernameValidator = function(value) { // 假设checkUsername是异步检查用户名的函数 checkUsername(value, function...
在登录插件中,JavaScript代码会利用这些功能来处理用户的交互行为,如监听登录按钮的点击事件,验证用户名和密码,以及可能的错误提示。 - `ext-base.js`通常包含EXT框架的基础部分,比如类系统、事件系统等。它是...
8. **异步验证**:对于某些场景,如检查用户名是否已存在,可能需要发送Ajax请求进行异步验证。这需要用到`XMLHttpRequest`或现代的`fetch` API。 9. **用户体验优化**:为了提高用户体验,可以在用户输入时即时...
5. **Ajax通信**:EXT3.0使用Ajax进行异步通信,这意味着在用户交互后,可以在不刷新整个页面的情况下向服务器发送和接收数据。在登录场景中,Ajax请求会携带用户名和密码,服务器端会检查这些信息的正确性。 6. **...
无论是HTML form还是Ext.FormPanel,后台处理页面通常接收登录请求,验证用户名和密码,然后返回响应。在EXTJS的登录案例中,这个过程可以通过Java、PHP或其他服务器端语言实现。理想情况下,服务器应返回JSON对象,...
3. 发送请求:通常通过Ajax调用后端服务来验证用户名和密码。 4. 处理响应:根据后端返回的结果(成功或失败),显示相应的消息或跳转到新的页面。 在EXT中,我们可以使用`Ext.Ajax.request`方法发送异步请求。例如...
在这个项目中,EXT负责前端用户界面的展示和交互,Servlet作为Java Web应用的一部分,处理来自EXT前端的HTTP请求,进行业务逻辑处理,如验证用户名和密码,然后与MySQL数据库进行通信,以验证用户凭证的正确性。...
在这个登录实例中,Ajax被用来向服务器发送登录请求,验证用户名和密码的正确性。这样可以提供更好的用户体验,因为用户不需要等待整个页面重新加载。 后端技术如C#和.NET框架,通常用于处理来自前端的Ajax请求,...
5. **服务器端验证**:`login.jsp`处理这些Ajax请求,验证用户名和密码的正确性。这通常涉及到数据库查询来确认凭证的有效性。 6. **验证码(CAPTCHA)**:`验证码.jsp`生成和验证图形验证码,防止恶意自动登录尝试...
此应用的核心功能是登录验证,其验证逻辑并不涉及数据库操作,而是直接在Servlet控制器中硬编码了用户名和密码。Servlet是一种Java Web技术,用于处理和响应HTTP请求,通常用于实现业务逻辑或控制应用程序流程。在这...
在EXT JS中,可以使用AJAX(Asynchronous JavaScript and XML)技术与服务器进行异步通信。尽管实际的数据格式可能不是XML,而是JSON,因为JSON更轻量且更适合于JavaScript处理。EXT JS提供了AJAX请求的简便方法,如...
例如,用户登录时,JSP会验证用户名和密码;发送消息时,JSP会将消息存储到数据库,并将新消息通知给接收方。JSP还能够与Servlets配合使用,进一步扩展其功能。 【数据库】虽然具体数据库类型未提及,但通常此类...
8. **AJAX请求**: ExtJS提供了`Ext.Ajax`模块用于发送异步请求。登录时,可能使用`Ext.Ajax.request`方法向服务器发送POST请求,包含用户名和密码。 9. **JSON数据交互**: 服务器返回的响应通常是JSON格式,我们...
此外,还可以使用`Ext.lib.Ajax.request`进行异步提交,方法与上述submit类似,只是更底层,可以直接控制请求参数和回调函数。 总之,Ext Form是Ext JS中的强大组件,提供了丰富的功能来创建、验证和提交表单数据。...
5. **代理(Proxy)**:登录请求需要发送到服务器进行验证,EXTJS 4.0 使用 `Ext.data.Proxy` 来处理这些网络请求,例如,使用 `Ext.data.proxy.Ajax` 发送异步HTTP请求到后端API。 6. **事件监听**:登录按钮通常...
3. 后端ASP脚本接收到请求,验证用户名和密码是否匹配。 4. 如果验证成功,服务器返回成功的响应;如果失败,返回错误信息。 5. 前端接收到服务器响应,根据响应结果展示相应的反馈信息。 在ASP中,你可以使用内置...
3. **Ajax请求**:使用`Ext.Ajax.request`方法发起异步请求,该方法支持POST或GET方式提交数据。在`action.js`中,可以配置请求的URL(如`action.html`),数据类型,以及成功或失败的回调函数。 4. **服务器端处理...
首先,EXT2.0利用AJAX(异步JavaScript和XML)技术实现前后端数据交换。尽管名称中包含XML,但如今更多的数据交换格式是JSON,因为JSON更轻量级且易于解析。在登录场景中,前端通常会创建一个表单,用户输入用户名和...