extjs_zhangjun1-优快云博客

本文介绍如何使用ExtJS创建包含账号、密码输入及随机验证码的登录窗口，并通过JavaScript和Servlet实现验证码的动态刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建login.js文件：

//登陆账号
var loginName = new Ext.form.TextField({
fieldLabel:'账号',
name:'loginName',
anchor:'90%'
});

//登陆密码
var loginPwd = new Ext.form.TextField({
fieldLabel:'密码',
inputType:'password',
name:'loginPwd',
anchor:'90%'
});

//登陆随机码
var rand = new Ext.form.TextField({
fieldLabel:'随机码',
name:'rand',
anchor:'90%'
});

//登陆按钮
var btnLogin = new Ext.Button({
name:'login',
text:'登陆'
//handler:loginOnClick
});

//清空按钮
var btnClean = new Ext.Button({
name:'clean',
text:'清空'
//handler:cleanOnClick
});

//登陆表单
var loginForm = new Ext.form.FormPanel({
frame:true,
labelAlign:'right',
labelWidth:70,
url:'admin_login.action',
align:'center',
defaultType:'textfield',
items:[loginName, loginPwd, rand, validationCodeImageFieldSet]
});

//登陆窗体
var login = new Ext.Window({
title:'管理员登陆',
layout:'fit',
modal:true,
width:'300',
height:200,
closable:false,
resizable:false,
buttons:[btnLogin, btnClean],
items:[loginForm]
})

二、创建产生随机码的common.js文件（还需要新建产生随机图片的servlet文件ValidationCodeServlet）

//随机验证码（此处的图片调用的Servlet）
var validationCodeImageFieldSet = new Ext.form.FieldSet({
xtype:'column',
border:false,
style:'margin-top:10px',
items:[{
xtype:'label',
html : '<a href="#" onclick="refreshValidationCodeImage()"><img src="../ValidationCodeServlet" id="vcImg" onclick="src=/'../DreamCreatingCMS/ValidationCodeServlet?/' + new Date().getMilliseconds();" id="xyz"/></a>'
}, {
xtype:'label',
style : 'margin-left:10px',
html : '<a href="#" onclick="refreshValidationCodeImage()">换一张</a>'
}]
});

//改变随机验证码方法
function refreshValidationCodeImage() {
var vcImg = document.getElementById("vcImg");
vcImg.src = '../ValidationCodeServlet?temp=' + new Date().getMilliseconds();
return false;
}

三、在jsp文件中引入创建的js文件：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/login.js"></script>
<title>管理员登陆</title>
</head>
<body>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "../extjs/resources/images/default/s.gif";
try {
login.show();
} catch (e) {
alert(e);
}
</script>
</body>
</html>

四、运行效果图：