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

如何在extJS中进行密码验证

我有一个要求在类似的图像一和输入文本后，图像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'{
扩展：“Ext.form.field.Text”，
别名：“widget.passwordfield”，
//输入类型：“密码”，
msgTarget:'在'，
验证器：[{
errorMessage:“密码应至少包含6个字符；”，
fn：（值）=>{
返回值。长度>=6
}
}, {
errorMessage:“密码应至少包含一个数字；”，
fn：（值）=>{
return/\d/.test（值）
}
}, {
errorMessage:“密码应至少包含一个小写字母和一个大写字母；”，
fn：（值）=>{
返回/[a-z]/.test（值）和&/[a-z]/.test（值）；
}
}, {
errorMessage:“密码应至少包含一个特殊字符；”，
fn：（值）=>{
返回/[~`！\$%\^&*+=\-\[\]\\'，/{}\\\\\\“：\？]/g.test（值）；
}
}],
initComponent:函数（）{
这是callParent（）；
},
onRender:function（）{
这是callParent（）；
这个。validate（）；
},
验证器：函数（val）{
常量错误消息=[]；
this.validators.map（（验证器，索引）=>{
const icon=validator.fn（val）？“”；
errorMessages.push（`
${icon}${validator.errorMessage}
`）；
});
返回错误消息。加入（“”）；
}
});
外部应用程序({
名字：“小提琴”，
启动：函数（）{
Ext.create（'Ext.form.Panel'{
标题：“样本表格面板”，
renderTo:Ext.getBody（），
身高：400，
车身衬垫：5，
项目：[{
xtype:'密码字段'，
名称：“密码”，
msgTarget:'在'，
labelAlign:“顶部”，
字段标签：“密码”
}]
})
}
});

附言

---

验证最好转移到单独的类。

有些人在遇到问题时会想“我知道，我会使用正则表达式。”现在他们有两个问题。-Jamie Zawinski您使用哪种工具包？ExtJs有经典和现代两种，它们是不同的。

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