结合EXT怎么实现验证码,我的代码如下:
jsp页面:
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
<%@ page contentType="text/html; charset=GBK" %>
<%
request.setCharacterEncoding("GBK");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="formtest.js"></script>
<link rel="stylesheet" type="text/css" href="forms.css" />
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<table align="center">
<tr><td align="center">新用户注册</td></tr>
<tr><td>
<div style="width:440px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<div id="form-ct">
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</td></tr>
<tr><td></td></tr>
</table>
</body>
</html>
js代码:
/*
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*
licensing@extjs.com
*
*
http://www.extjs.com/license
*/
Ext.onReady(function(){
// Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var form = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 100
});
var loginName = new Ext.form.TextField({
fieldLabel: '用户名',
name: 'loginlName',
allowBlank:false
});
var password = new Ext.form.TextField({
fieldLabel: '密 码',
name: 'password',
inputType:'Password',
allowBlank:false
});
var password2 = new Ext.form.TextField({
fieldLabel: '确认密码',
name: 'password2',
inputType:'Password',
allowBlank:false
});
var email = new Ext.form.TextField({
fieldLabel: '电子邮箱',
name: 'email',
allowBlank:false,
vtype:'email'
});
var question = new Ext.form.TextField({
fieldLabel: '取回密码问题',
name: 'question',
allowBlank:false
});
var anwser = new Ext.form.TextField({
fieldLabel: '取回密码答案',
name: 'answer',
allowBlank:false
});
var name = new Ext.form.TextField({
fieldLabel: '真实姓名',
name: 'name'
});
var company = new Ext.form.TextField({
fieldLabel: '工作单位',
name: 'company'
});
var state = new Ext.form.ComboBox({
fieldLabel: '职 业',
hiddenName:'state',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : ['AL', 'Alabama','AwL', 'Awlabama']
})
});
var phone = new Ext.form.TextField({
fieldLabel: '电 话',
name: 'phone',
value: '(888) 555-1212'
});
var mobile = new Ext.form.TextField({
fieldLabel: '移动电话',
name: 'moblie'
});
var fax = new Ext.form.TextField({
fieldLabel: '传 真',
name: 'fax'
});
var certCode = new Ext.form.TextField({
fieldLabel: '身份证',
name: 'certCode'
});
var userAddress = new Ext.form.TextField({
fieldLabel: '通讯地址',
name: 'userAddress'
});
var postCode = new Ext.form.TextField({
fieldLabel: '邮政编码',
name: 'postCode'
});
//想在verifyCode后面加个img显示生成的图片,可是不知道怎么加进去
var verifyCode = new Ext.form.TextField({
fieldLabel: '验证码',
name: 'verifyCode',
width:120
});
form.column({width:400, labelWidth:100}); // open column, without auto close
form.fieldset(
{legend:'必填信息'},
loginName,
password,
password2,
email,
question,
anwser
);
form.fieldset(
{legend:'选填信息,完整填写可以更好的享有本站的服务'},
name,
company,
state,
phone,
mobile,
fax,
certCode,
userAddress,
postCode
);
/*
form.fieldset(
{id:'wwg',legend:'ffff'}
);
Ext.QuickTips.init();
Ext.get('wwg').createChild({
tag:'img',
id:'imgCode',
align:'right',
hspace:30,
qtip:'刷新'
});
// var i = Ext.get('imgCode');
*/
form.fieldset(
{id:'vcode',legend:'Options', hideLabels:true},
new Ext.form.Checkbox({
boxLabel:'<a href=http://www.sohu.com>我已阅读并同意《******网服务条款》</a>',
name:'extuser',
width:'auto'
})
);
form.end(); // close the column
form.applyIfToFields({
width:230
});
form.addButton('注册',v,{
hidden:true
});
form.addButton({
text: 'Insert',
handler:v});
form.render('form-ct');
function v()
{
alert("KJK");
}
function checkLoginName(){
alert('检查:'+loginName+'是否已被注册');
}
loginName.on('blur',checkLoginName);
// The form elements are standard HTML elements. By assigning an id (as we did above)
// we can manipulate them like any other element
/* var photo = Ext.get('photo');
var c = photo.createChild({
tag:'center',
cn: {
tag:'img',
src: 'http://extjs.com/forum/image.php?u=2&dateline=1175747336',
style:'margin-bottom:5px;'
}
});
new Ext.Button(c, {
text: 'Change Photo'
});
*/
});