Question

不确定如何按照惯例说出这个问题。

我已经在这个密码验证工作了一段时间（以前的问题很少），而且我越来越近了。

我有一个显示密码规则的HTML列表：

<form id="form-password-change" method="post" action="/notrelevantrightnow">
    <div class="control-group">
        <label class="control-label" for="input-username">{{label_username}}</label>
        <div class="controls">
            <input type="text" id="input-username" name="username" class="required" value="{{username}}" autocomplete="off">
        </div>
    </div>
    <div id="password-info">
        <ul>
            <li id="length" class="invalid">Password must be 8 characters</li>
            <li id="letter" class="invalid">Password must contain 3 letters</li>
        </ul>
    </div>
    <div class="control-group">
        <label class="control-label" for="input-password">{{label_new_password}}</label>
        <div class="controls field">
            <input type="password" id="input-password" name="password" placeholder="{{label_password}}" autocomplete="off">
        </div>
    </div>
    <button type="submit" class="btn btn-large btn-wide btn-primary">Send Request</button>
</form>

我在列表中为每个规则（

）添加了一个“有效”类，因为密码字段的值通过了一些验证。这一切都很棒。通过每个规则后，该规则的文本将变为绿色。

但是，如果多个if条件为真，我还需要将变量设置为true。示例：如果密码长度超过7个字符且至少包含3个字母，则var pwdValid = true。

实际上，我必须在else条件下设置pwdValid = false（我没想到我会这样做），然后一旦我添加了另一个'if'验证，一旦它验证了之前的条件被遗忘了！因此，如果您输入3个字母并提交，则控制台会将其显示为有效，尽管不满足其他条件（最少8个字符）。

这是我的JS：

$(function(){

    var pwdInput = $('#form-password-change #input-password');

    var pwdValid = false;

    function validatePwdStrength(){

        var pwdValue = $(pwdInput).val(); // This works because when it's called it's called from the pwdInput, see end

        // Validate the length
        if (pwdValue.length > 7) {
            $('#form-password-change #length').removeClass('invalid').addClass('valid');
            pwdValid = true;
        } else {
            $('#form-password-change #length').removeClass('valid').addClass('invalid');
        pwdValid = false; // Had to add this in or it remains true if it passes the if case and then you change the field so it fails.
        }

        // RegExp
        // Validate number of letters letters
        if ( /([^a-z]*[a-z]){3,}/i.test(pwdValue) ) {
            $('#letter').removeClass('invalid').addClass('valid');
            pwdValid = true; // As soon as I add this one, my previous if cases are forgotten.
        } else {
            $('#letter').removeClass('valid').addClass('invalid');
            pwdValid = false;
        }
    };

    function validatePwdValid(){
        if (pwdValid == true) {
            event.preventDefault();
            console.log('Password Validated');
        }
        else {
            event.preventDefault();
            console.log('Password Failed');
        }
    };

    pwdInput.bind('change keyup input', validatePwdStrength); // Keyup is a bit unpredictable
    $('#form-password-change').submit(validatePwdValid);
});

如果我不尽快解决这个问题，我可能会爆炸。

Answer 1

尝试以下方法。基本上我们将初始化为false，然后在第一次检查时设置为true如果它通过..在后续检查中将其设置为pwdValid && true，因此如果它失败则会继续报告错误。

function validatePwdStrength(){

        var pwdValue = $(pwdInput).val(); // This works because when it's called it's called from the pwdInput, see end

        pwdValid = false; //start out false;

        // Validate the length
        if (pwdValue.length > 7) {
            $('#form-password-change #length').removeClass('invalid').addClass('valid');
            pwdValid = true;
        } else {
            $('#form-password-change #length').removeClass('valid').addClass('invalid');

        }

        // RegExp
        // Validate number of letters letters
        if ( /([^a-z]*[a-z]){3,}/i.test(pwdValue) ) {
            $('#letter').removeClass('invalid').addClass('valid');
            pwdValid = pwdValid && true; // As soon as I add this one, my previous if cases are forgotten.
        } else {
            $('#letter').removeClass('valid').addClass('invalid');

        }
    };

如何将DOM更改为'if / else'语句单独为true，如果所有if语句都为true，还将变量设置为true？

1 个答案: