如何检查ExtJS中的密码强度 我设计了一个带有oldpassword,新密码和确认密码的窗口。 那么如何在新密码旁边显示密码强度,并在确认密码旁边显示密码匹配消息(如果密码不匹配)
提前致谢
答案 0 :(得分:1)
这是DebJS网站上的验证示例:http://dev.sencha.com/deploy/ext-3.3.0/examples/form/adv-vtypes.html
您可以通过在clientvalidation
事件上放置一个监听器来更新具有密码强度的面板。
答案 1 :(得分:1)
在我的项目中,我正在使用passwordmeter。用于评估密码的算法非常合乎逻辑且功能强大(并非总是如此)。我已将它放入盒式容器中进入formpanel。这是我的代码:
{
xtype: 'box',
isFormField: true,
autoEl: {
tag: 'div',
id: 'scorebarBorder',
children: [{
tag: 'div',
id: 'score',
html: '0%'
}, {
tag: 'div',
id: 'scorebar',
html: ' '
}, {
tag: 'div',
id: 'complexity',
html: 'Too Short'
}]
}
}
您必须将密码字段与 keyup 事件相关联才能使用:
{
xtype: 'textfield',
inputType: 'password',
fieldLabel: "Enter your new password",
minLengthText: 'Type at least 4 characters',
maxLengthText: 'Type maximum 50 characters',
enableKeyEvents: true,
listeners: {
keyup: function (field, event) {
chkPass(field.getRawValue());
}
}
}
您还可以使用 vtype 来比较用户输入的两个传递值:
Ext.apply(Ext.form.VTypes, {
password: function (val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: 'The passwords entered do not match!<br/>Please Re-Type'
});
}, this);
然后:
{
xtype: 'textfield',
fieldLabel: "Please re-type your new password",
inputType: 'password',
vtype: 'password',
initialPassField: 'firstPassword'
}
另请查看此site以了解其他通行证检查方法。