extjs 框架是一个非常优秀的前端框架，提供了丰富的功能与炫丽的界面展示，在用 extjs 创建表单时，特别是在注册或修改密码的时候，要对密码进行确认，这里就密码确认一致性验证和大家分享自己的心得与体会。
方法一：主要代码如下
<script type='text/javascritp>
// 自定义样式
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'; // 定义函数: 验证再次输入的密码是否一致
Ext.apply(Ext.form.VTypes, {
confirmPwd: function (value, field) {
// field 的 confirmPwd 属性
if (field.confirmPwd) {
var first = field.confirmPwd.first;
var second = field.confirmPwd.second; this.firstField = Ext.getCmp('loginPassword');
this.seconField = Ext.getCmp('rePassword');
var firstPwd = this.firstField.getValue();
var secondPwd = this.seconField.getValue();
if (firstPwd == secondPwd) {
return true;
} else {
return false;
}
}
},
confirmPwdText:'两次输入的密码不一致！',
}); Ext.onReady(function () {
var formPanel = new Ext.create({
xtype: 'form',
id: 'multiColumnForm',
collapsible: false,
frame: true,
title: '用户注册表单',
bodyPadding: '5 5 0',
width: ,
fieldsDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
renderTo: 'regist_div',
items: [
{
xtype: 'textfield',
id: 'nameText',
name: 'nameText',
fieldLabel: '用户名',
allowBlank: false,
tooltip: '请输入您的用户名',
afterLabelTextTpl: required,
blankText: '请输入您的用户名',
}, {
xtype: 'textfield',
inputType: 'password',
name: 'loginPassword',
id: 'loginPassword',
fieldLabel: '密码',
tooltip: '请输入密码',
afterLabelTextTpl: required,
allowBlank: false,
blankText: '请输入密码',
regex: /^[\s\S]{,}$/,
regexText: '密码长度不能超过32个字符', },
{
xtype: 'textfield',
inputType: 'password',
name: 'rePassword',
id: 'rePassword',
vtype:'confirmPwd',
fieldLabel: '确认密码',
tooltip: '请确认密码',
afterLabelTextTpl: required,
allowBlank: false,
blankText: '确认密码不能为空',
regex: /^[\s\S]{,}$/,
regexText: '密码长度不能超过32个字符',
// 调用密码验证中的定义的属性
confirmPwd: {
first: 'loginPassword',
second:'rePassword'
}
},
{
xtype: 'button',
name: 'registButton',
id: 'registButton',
text: '保 存',
width: ,
height: ,
handler: function () {
var isValid = this.up('form').getForm().isValid();
if(isValid){
// TODO 表单提交到后台处理 }
}
},
{
xtype: 'button',
name: 'RegistButton',
text: '取 消',
width: ,
height: ,
handler: function () {
window.open('/home/index?id=' + new Date());
}
}]
});
}); </script>
方法二 : 主要 代码如下:
<script type='text/javascritp>
// 定义函数: 验证再次输入的密码是否一致
Ext.apply(Ext.form.VTypes, {
password : function(val, field) {
// field 的 initialPassField 属性
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : '两次输入的密码不一致!'
});
// 创建表单
Ext.onReady(function () {
var formPanel = new Ext.create({
xtype: 'form',
id: 'multiColumnForm',
collapsible: false,
frame: true,
title: '用户注册表单',
bodyPadding: '5 5 0',
width: ,
fieldsDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
renderTo: 'regist_div',
items: [
{
xtype: 'textfield',
id: 'nameText',
name: 'nameText',
fieldLabel: '用户名',
allowBlank: false,
tooltip: '请输入注册用户名',
afterLabelTextTpl: required,
blankText: '请输入注册用户名',
},
{
xtype: 'textfield',
inputType: 'password',
name: 'loginPassword',
id: 'loginPassword',
fieldLabel: '密码',
tooltip: '请输入密码',
afterLabelTextTpl: required,
allowBlank: false,
blankText: '请输入密码',
regex: /^[\s\S]{,}$/,
regexText: '密码长度不能超过20个字符',
},
{
xtype: 'textfield',
inputType: 'password',
name: 'rePassword',
id: 'rePassword',
vtype:'confirmPwd',
fieldLabel: '确认密码',
tooltip: '请确认密码',
afterLabelTextTpl: required,
allowBlank: false,
blankText: '请确认密码',
regex: /^[\s\S]{,}$/,
regexText: '密码长度不能超过32个字符',
initialPassField : 'loginPassword' // 调用密码验证函数中的属性
},
{
xtype: 'button',
name: 'registButton',
id: 'registButton',
text: '保 存',
width: ,
height: ,
handler: function () {
var isValid = this.up('form').getForm().isValid();
if(isValid){
// TODO 表单提交到后台处理
}
}
},
{
xtype: 'button',
name: 'RegistButton',
text: '取 消',
width: ,
height: ,
handler: function () {
window.open('/home/index?id=' + new Date());
}
}]
});
});
</script>
运行效果如下:
