ExtJS带验证码登录框[新增回车提交]
2011-11-24 17:00
218 查看
原文地址:http://ht19820316.blog.163.com/blog/static/3395523320113222421670/
/* * 用户带验证码登录页面 * sheak * code.php 生成验证码 * 1202增加键盘回车提交功能(粗体部分) */ /* * 用户带验证码登录页面 * sheak 081115 * code.php 生成验证码 */ Ext.QuickTips.init(); LoginWindow = Ext.extend( Ext.Window, { title : '登陆系统', width : 275, height : 155, collapsible : true, defaults : { border : false }, buttonAlign : 'center', createFormPanel : function() { // 表单重置函数 function reset() { myform.form.reset(); } ; // 表单提交函数,这个是重点,单独提取出来,与myform一个层级 function subjectForm() { if (myform.getForm().isValid()) { myform.form.submit({ waitMsg : '正在登录......', url : '../../../index/login', timeout : 3000, success : function(form, action) { if (action.result.type == 0)// OP window.location.href = '../op/index.html'; else window.location.href = 'index.html'; }, failure : function(form, action) { form.reset(); if (action.failureType == Ext.form.Action.SERVER_INVALID) Ext.MessageBox .alert( '警告', action.result.errors.msg); } }); } } ; var myform = new Ext.form.FormPanel({ bodyStyle : 'padding-top:6px', defaultType : 'textfield', labelAlign : 'right', labelWidth : 55, labelPad : 2, // frame : true, method : 'POST', // 增加表单键盘事件,键盘按键10或者13会触发subjectForm方法 keys : [ { key : [ 10, 13 ], fn : subjectForm } ], defaults : { allowBlank : false, width : 158 }, items : [ { cls : 'user', name : 'username', fieldLabel : '帐 号', blankText : '帐号不能为空' }, { cls : 'key', name : 'password', fieldLabel : '密 码', blankText : '密码不能为空', inputType : 'password' }, { cls : 'key', name : 'randCode', id : 'randCode', fieldLabel : '验证码', width : 70, blankText : '验证码不能为空' } ], buttons : [ { text : '确定', id : 'sure', handler : subjectForm//鼠标按键提交表单 }, { text : '重置', id : 'clear', handler : reset } ] }); return myform; }, initComponent : function() { LoginWindow.superclass.initComponent.call(this); this.fp = this.createFormPanel(); this.add(this.fp); } }); Ext.onReady(function() { var win = new LoginWindow(); win.show(); var bd = Ext.getDom('randCode'); var bd2 = Ext.get(bd.parentNode); bd2.createChild({ tag : 'img', src : 'code.php', align : 'absbottom' }); });
相关文章推荐
- ExtJS带验证码登录框[新增回车提交]
- ExtJS带进度条的登陆验证+验证码+回车提交
- ie和火狐浏览器都支持的回车键提交表单登录
- 在ASP.NET登录页面中如何实现文本框焦点自动跳转及通过回车键提交表单
- ExtJS回车提交
- 【Extjs登陆】表单ajax提交,登录实例 后台为servlet
- 防止频繁提交(修改、删除、新增)验证码方案
- 随机验证码------WEB开发(登录提交 或避免重复提交数据)常用
- ExtJS用户带验证码登录页面
- ExtJS与.NET结合开发实例(Grid之新增——Form提交篇)
- 在JSP中动态生成随机验证码,登录时后台校验验证码,以及如何避免同一个验证码被重复提交爆破密码
- ExtJS提交到服务器端的方式以及简单的登录实现
- ExtJS表单提交时,不用鼠标点击按钮提交,直接通过回车键提交
- 页面回车键提交表单-常用于登录页面
- 用户登录密码框直接按回车提交,Submit按钮无法响应的有效解决办法
- ExtJs学习篇---OA系统登录界面设计之验证码
- ie和火狐浏览器都支持的回车键提交表单登录
- 输入密码后默认回车提交登录事件
- 在JSP中动态生成随机验证码,登录时后台校验验证码,以及如何避免同一个验证码被重复提交爆破密码
- ExtJS监听键盘事件:回车键实现登录功能