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.