如何在运行时在extJS中给予密码验证

63lcw9qa  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(231)

如何在extJS中给予密码验证
我有一个像图像1的requireant,输入文本后,图像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'

有谁能帮我实现这个目标吗?

roqulrg3

roqulrg31#

有了4个验证要求,你最好有4个独立的验证器,每个都评估问题的一部分。因此,与其使用一个正则表达式来尝试所有的事情,不如使用一个验证器来简单地检查长度,另一个检查数字,另一个检查特殊字符,最后一个检查大小写字母。
试图创建超级复杂的正则表达式是一个巨大的时间浪费,而且您无法仅用一个正则表达式来指示哪些规则通过或不通过。

qnakjoqk

qnakjoqk2#


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

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"
            }]
        })
    }
});

附言
验证最好移到单独的类中。

相关问题