如何在运行时在extJS中提供密码验证

问题描述

如何在extJS中提供密码验证

我在图像1中有一个要求，输入文字后应出现图像2。应该为通过的所有点赋予绿色。

我的空白图片

输入文字图片后

这是我正在尝试但没有得到想要的东西。

 regex: /^(?!.*(.)\1{3})((?=.*[\d])(?=.*[a-z])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z])(?=.*[^\w\d\s])|(?=.*[\d])(?=.*[A-Z])(?=.*[^\w\d\s])|(?=.*[\d])(?=.*[a-z])(?=.*[^\w\d\s]))[\x21-\x7E]{8,28}$/,regexText: ' Password should contain at least 6 character; Password should contain at least one number; Password should contain at least one lowercase and one uppercase letter
Password should contain at least one special character ',msgTarget: 'under'

有人可以帮助我实现这一目标吗？

解决方法

有了4个验证要求，最好有4个单独的验证器，每个验证器都会评估问题的一部分。因此，与其做一个尝试所有内容的正则表达式，不如做一个只看长度的验证器，再看一个数字的验证器，再看一个特殊字符的验证器，再看小写和大写字母的最终验证器。

尝试制作超级复杂的正则表达式会浪费大量时间，而且仅凭一个正则表达式就无法指示正在通过或未通过哪些规则。

,

最好使用简单的验证器功能进行检查。您可以使用以下代码并根据需要进行更改（删除错误图标，更改样式并添加“密码强度：字符串”标题）：

Ext.define('PasswordField',{
    extend: 'Ext.form.field.Text',alias: 'widget.passwordfield',//inputType: 'password',msgTarget: 'under',validators: [{
        errorMessage: "Password should contain at least 6 character;",fn: (value) => {
            return value.length >= 6
        }
    },{
        errorMessage: "Password should contain at least one number;",fn: (value) => {
            return /\d/.test(value)
        }
    },{
        errorMessage: "Password should contain at least one lowercase and one uppercase letter;",fn: (value) => {
            return /[a-z]/.test(value) && /[A-Z]/.test(value);
        }
    },{
        errorMessage: "Password should contain at least one special character;",fn: (value) => {
            return /[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(value);
        }
    }],initComponent: function () {
        this.callParent();
    },onRender: function() {
        this.callParent();
        this.validate();
    },validator: function(val) {
        const errorMessages = [];
        this.validators.map( (validator,index) => {
            const icon = validator.fn(val) ? '<i class="fa fa-check-circle-o" style="color: green; width: 20px;"></i>': '<i style="width: 20px;">&nbsp;</i>';
            errorMessages.push(`<li>${icon}${validator.errorMessage}</li>`);
        });
        return errorMessages.join('');
    }
});

Ext.application({
    name: 'Fiddle',launch: function () {
        Ext.create('Ext.form.Panel',{
            title: "Sample Form Panel",renderTo: Ext.getBody(),height: 400,bodyPadding: 5,items: [{
                xtype: 'passwordfield',name: 'password',labelAlign: 'top',fieldLabel: "Password"
            }]
        })
    }
});

PS

最好将验证移到单独的课程。