Ext.onReady(function() {
// 自定义密码验证
Ext.apply(Ext.form.VTypes, {
// val指这里的文本框值,field指这个文本框组件
password : function(val, field) {
if (field.confirmTo) {
var pwd = Ext.get(field.confirmTo);
return (val == pwd.getValue());
}
return true;
}
});
var quesStore = new Ext.data.SimpleStore({
fields : ['question'],
data : [['你父亲的名字'], ['你宠物的名字'], ['你母亲的名字'], ['你的英文名称'],
['你的家乡地址']]
});
Ext.QuickTips.init();
// 注册表单开始
var regForm = new Ext.form.FormPanel({
monitorValid : true,// 把有formBind:true的按钮和验证绑定
frame : true,
width : 300,
labelSeparator : ':',
baseCls : 'x-plain',
labelWidth : 60,
defaults : {
anchor : '80%',
allowBlank : false
},
items : [{
fieldLabel : '用户名',
name : 'users.username',
id : 'userName',
xtype : 'textfield',
blankText : '用户名不能为空',
emptyText : '请输入用户名',
regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/,
regexText : '用户名不合法(必须以字母开头,长度6-12位)!',// 验证错误之后的提示信息
invalidText : '',
anchor : '80%',
validationEvent : 'blur',
validator : function(thisText) {
var loginNameEl = this;// 得到本身的textField
Ext.Ajax.request({
url : 'user.do?operate=doCheckUser&username='
+ thisText,
method : 'post',
success : function(response, options) {
var result = Ext.util.JSON
.decode(response.responseText);
if (result.success == true) {
loginNameEl
.markInvalid("该登录名已经被他人使用,请重新输入其他登录名!");
return false;
}
},
failure : function(response, options) {
return true;
Ext.MessageBox.alert('友情提示', "异步通讯失败,请于管理员联系!");
}
});
return true;
}
}, {
fieldLabel : '密码',
xtype : 'textfield',
name : 'users.password',
id : 'password',
blankText : '密码不能为空',
inputType : 'password',
anchor : '80%'
}, {
fieldLabel : '确认密码',
xtype : 'textfield',
name : 'rePassWord',
id : 'rePassWord',
blankText : '确认密码不能为空',
inputType : 'password',
vtype : 'password',// 自定义的验证类型
vtypeText : '两次密码不一致',
confirmTo : 'passWord',// 要比较的另外一个的组件的id
anchor : '80%'
}, new Ext.form.ComboBox({
name : 'users.question',
id : 'question',
fieldLabel : '请选择密码问题',
blankText : '密码问题不能为空',
triggerAction : 'all',
emptyText : '请选择',
store : quesStore,
displayField : 'question',
valueField : 'question',
selectOnFocus:true,
mode : 'local',
forceSelection : true,
typeAhead : true
}), {
fieldLabel : '密码问题答案',
xtype : 'textfield',
name : 'users.answer',
id : 'answer',
emptyText : '请输入密码问题',
blankText : '密码问题不能为空',
anchor : '80%'
}, {
fieldLabel : '邮箱',
xtype : 'textfield',
name : 'users.email',
id : 'email',
blankText : '邮箱不能为空',
emptyText : '请输入E-mail(电子邮箱)',
// vtype:'email',
// vtypeText:'请输入正确的邮箱地址',
regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
regexText : '电子邮件格式错误!',// 验证错误之后的提示信息
anchor : '80%'
}, {
fieldLabel : '移动电话',
xtype : 'textfield',
name : 'users.mobile',
id : 'mobile',
anchor : '80%',
regex : /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/,
regexText : '移动电话号码格式输入错误!',
allowBlank : true,
anchor : '80%'
}, {
fieldLabel : '毕业院校',
name : 'users.school',
id : 'school',
xtype : 'textfield',
allowBlank : true,
anchor : '80%'
}, {
xtype : 'datefield',
fieldLabel : '出生日期',
name : 'bornDate',
id : 'borndate',
emptyText : '请选择出生日期',
blankText : '出生日期不能为空',
format : 'Y-m-d',
readOnly : true
}, {
fieldLabel : '籍贯',
name : 'users.hometown',
id : 'hometown',
xtype : 'textfield',
allowBlank : true,
anchor : '80%'
}, {
xtype : 'panel',
baseCls : 'x-plain',
layout : 'column',
items : [{
columnWidth : .6,
layout : 'form',
baseCls : 'x-plain',
items : [{
name : 'validateCode',
xtype : 'textfield',
baseCls : 'x-plain',
plain : true,
fieldLabel : '验证码',
regex : /^[0-9]{4}$/,
regexText : '图片不清楚吗?请点击图片进行刷新,验证码为4位数字!',
width : 70,
allowBlank : false,
blankText : '验证码不能为空!'
}]
}, {
columnWidth : .4,
baseCls : 'x-plain',
plain : true,
scripts : true,
html : '<img id="photo" src="codeServlet" οnclick="changeImg(this);" alt="看不清?换一张"/><A href="#" style="font-size:12px,valign:middle">看不清</A>'
}]
}
],
buttons : [{
text : '注册',
type : 'submit',
formBind : true,
handler : function() {
// 如果表单数据无效则返回
if (!regForm.getForm().isValid()) {
return;
}
regForm.getForm().submit({
url : "user.do?operate=doAddUser",
method : 'post',
success : function(response, options) {
if (options.result.success) {
Ext.Msg.alert("提示", " "+options.result.msg+" ",
function() {
regForm.getForm().reset();
});
}
},
failure : function(response, options) {
Ext.Msg.alert('错误', " "+options.result.msg+" ");
}
})
}
}, {
text : '重置',
handler : function() {
regForm.getForm().reset();
}
}]
});// 注册表单结束
var regWindow = new Ext.Window({
title : '用户注册',
width : 300,
shadowOffset : -4,
closeAction : 'hide',
floating : true,
bodyStyle : 'padding: 4 2 2 2',
shadow : true,
animCollapse : true,
closable : false,
draggable : false,
plain : true,
resizable : false,
items : [regForm]
});
regWindow.show();
});
效果图如下: