自定义密码强度验证器插件

Posted 2023-05-09

【中文标题】自定义密码强度验证器插件

【英文标题】：Customizing a password strength validator plugin

【发布时间】：2014-12-16 09:21:30

【问题描述】：

我正在使用一个名为 pStrength.jquery.js 的插件，由于某种原因它没有提交我拥有的表单，或者即使它不应该提交表单（当我更改代码时）也提交了表单

我使用的代码是：

$(document).ready(function () 
    $('#myForm').submit(function () 
        return false;
    );

    $('#myElement1, #myElement2').pStrength(
        'changeBackground': false,
        'onPasswordStrengthChanged': function (passwordStrength, strengthPercentage) 
            if ($(this).val()) 
                $.fn.pStrength('changeBackground', this, passwordStrength);
             else 
                $.fn.pStrength('resetStyle', this);
            
            $('#' + $(this).data('display')).html('Your password strength is ' + strengthPercentage + '%');
        ,
        'onValidatePassword': function (strengthPercentage) 
            $('#' + $(this).data('display')).html(
                $('#' + $(this).data('display')).html() + ' Great, now you can continue to change your password!');

            $('#myForm').submit(function () 
                return true;
            );
        
    );
);

有人告诉我应该使用布尔值并在验证检查中将其设置为 true 或 false。

问题是我不知道该怎么做

有没有人可以帮助我并向我展示执行此操作的代码？

提前谢谢你

【问题讨论】：

您是否检查过控制台以检查是否有任何阻止表单提交的错误？

也许你应该问问“某人”他们的意思。对我来说似乎很模糊。

如果您注释掉第一个$('#myForm').submit() 部分，表单是否按预期提交？紧跟在$(document).ready()

之后的那个

RoryMcCrossan 我检查了控制台，没有错误，Mike 我试过了，他无处可寻，通常我的同事会处理 javascript，但他今天病了，所以我坚持下去。 @irot我已经尝试过了，即使它不应该提交它也应该只在根据文档中指定的默认值密码强度至少为 60% 时才提交，但即使我的密码强度是10%，谢谢大家的帮助

我使用的文档位于link

【参考方案1】：

它仍然提交的原因是因为 onValidatePassword 函数在每个单独的字段上运行，而您实际上有两个字段要验证。如果一个字段有效而另一个无效，则表单仍将提交，因为布尔值已设置为 true，这是唯一需要提交的条件。

下面更新了代码，也可以参考the fiddle。

$(document).ready(function () 
    $('#myForm').submit(function (event) 
        // TODO: check that the two field values match as well
        if ($('#myElement1').data('valid') === 'yup' &&
            $('#myElement2').data('valid') === 'yup') 
            // remove these three lines to make it submit
            alert('Submitting...');

            event.preventDefault();

            return false;

            // and uncomment this one line
            //return true;
         else 
            event.preventDefault();
            return false;
        
    );

    $('#myElement1, #myElement2').data('valid', 'nope');

...

您的完整 onValidatePassword 回调现在应该如下所示：

'onValidatePassword': function (strengthPercentage) 
    $('#' + $(this).data('display')).html(
            $('#' + $(this).data('display')).html() + ' Great, now you can continue to change your password!');

    formValid = strengthPercentage >= 60;

    // set for each element
    if (strengthPercentage >= 60) 
        $(this).data('valid', 'yup');
     else 
        $(this).data('valid', 'nope');
    

【讨论】：

这似乎工作得更好一些，唯一的问题是它现在正在提交，一旦它变得有效，所以用户仍在忙于打字。有什么办法可以使表单仅在单击提交输入后才提交？感谢您的帮助

当然！更新了我的答案以删除 submit() 触发器，看看这是否符合您的需求。

它现在正在提交，即使strengthPercentage小于60，我不确定我是否在正确的地方声明它，我把它放在$（'#myForm'）.submit（函数（）返回真；）；

这很奇怪。为了清楚起见，我已经更新了我的答案，但如果你想更加安全，你可以尝试使用 parseInt(strengthPercentage) 投射strengthPercentage 以确保它也被作为整数进行比较。

嗨@irot 仍然是同样的问题，我已经检查过，strengthPercentage 确实是一个 int，您要我创建一个页面并将链接发送给您，以便您自己查看吗？

【参考方案2】：

在您的onValidatePassword 中，您将绑定到提交事件，而不是提交表单。替换此代码：

$('#myForm').submit(function () 
   return true;
);

与

$('#myForm').submit();

【讨论】：

感谢您的贡献，但如果我这样做，它根本不会提交，有什么想法吗？

@NOCLMRecipies 尝试删除第一个返回 false 的提交处理程序。

如果我这样做，即使不应该提交也会提交