Question

我正在使用一个名为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。

问题是我不知道该怎么做

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

提前谢谢

Answer 1

在onValidatePassword内，您绑定了提交事件，而不是提交表单。替换此代码：

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

与

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

Answer 2

它仍然提交的原因是因为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');
    }
}

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

2 个答案: