ExtJs密码强度检查器

时间:2011-05-05 13:46:59

标签: extjs

如何检查ExtJS中的密码强度 我设计了一个带有oldpassword,新密码和确认密码的窗口。 那么如何在新密码旁边显示密码强度,并在确认密码旁边显示密码匹配消息(如果密码不匹配)

提前致谢

2 个答案:

答案 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以了解其他通行证检查方法。