ExtJs Password strength checker

How to check password strength in ExtJS Iam design a window with oldpassword ,new password and confirmpassword. So how to diplay password strength beside the new password and also password match message beside confirm pasword(In case 开发者_如何学运维of passwords not matched)

Thanks in advance

---

In my project I'm using passwordmeter. The algorithm it use to evaluate the password is very logical and powerful (which is not always the case). I've put it in box container into a formpanel. Here is my code :

{

            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'

                }]

            }

        }

You must to connect your password field with a keyup event to use that :

{

            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());

                }

            }

        }

You can also use a vtype to compare the two pass values entered by user :

    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);

and then :

{

        xtype: 'textfield',

        fieldLabel: "Please re-type your new password",

        inputType: 'password',


        vtype: 'password',

        initialPassField: 'firstPassword'

    }

Check also this site for other pass check alternatives.

---

The bare bones of this is in a validation example on the ExtJS site: http://dev.sencha.com/deploy/ext-3.3.0/examples/form/adv-vtypes.html

You can update a panel with the password strength by putting a listener on the clientvalidation event.