如何在运行时在 extJS 中进行密码验证答案

【问题标题】：How to give password validation in extJS in runtime如何在运行时在 extJS 中进行密码验证
【发布时间】：2020-08-25 05:56:10
【问题描述】：

如何在 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'

谁能帮我实现这个目标。

【问题讨论】：

您使用的是哪个工具包？ ExtJs 有经典和现代两种，它们是不同的。

标签： javascript extjs extjs6

【解决方案1】：

如果有 4 个验证要求，那么拥有 4 个单独的验证器可能会好很多，每个验证器都会评估问题的一部分。因此，与其做一个尝试所有事情的单一正则表达式，不如做一个简单地查看长度的验证器，另一个查找数字，另一个查找特殊字符，然后是查找小写和大写字母的最终验证器。

尝试制作超级复杂的正则表达式会浪费大量时间，而且您将无法仅使用单个正则表达式来指示哪些规则正在通过。

【讨论】：

有些人在遇到问题时会想“我知道，我会使用正则表达式”。现在他们有两个问题。 - 杰米扎温斯基

【解决方案2】：

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

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',
                msgTarget: 'under',
                labelAlign: 'top',
                fieldLabel: "Password"
            }]
        })
    }
});

附言

验证更好地转移到单独的类。

【讨论】：