如何将 DOM 更改为“if/else”语句单独为真,如果所有 if 语句都为真,也将变量设置为真?

Posted

技术标签:

【中文标题】如何将 DOM 更改为“if/else”语句单独为真,如果所有 if 语句都为真,也将变量设置为真?【英文标题】:How to change DOM as 'if/else' statements are true individually, and also set variable to true if all if statements are true? 【发布时间】:2013-05-15 17:07:20 【问题描述】:

不知道如何像往常一样表达这个问题。

我一直在研究这个密码验证(之前有几个问题),而且我越来越接近了。

我有一个显示密码规则的 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>

我为每个规则添加了一个“有效”类(

) 在列表中,因为密码字段的值通过了一些验证。这一切都很棒。随着每条规则通过,该规则的文本变为绿色。

但是,我还需要一个变量设置为 true,仅当多个 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);
);

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

【问题讨论】:

【参考方案1】:

试试下面的。基本上,我们将初始化为 false,然后在第一次检查时将其设置为 true,如果它通过。在后续检查中将其设置为 pwdValid &amp;&amp; true,因此如果失败,它将继续报告 false。

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');

        
    ;

【讨论】:

这真的很棒@lucuma,效果很好。我只剩下 1 个问题。如果验证为真,例如两个字段都通过验证,然后 pwdValid 设置为 true。但是,如果您随后更改密码框中的值,它仍然认为它设置为 true 吗? There's a fiddle here if it helps? 在您的小提琴上,我输入了足够的字符以将验证设置为绿色,然后我开始删除它们并删除了验证..我没有关注问题是什么? 是的,类的添加和删除工作正常。当您在this updated fiddle 中提交表单时,我添加了一条警报,显示在上述情况下 pwdValid 应该为 false 时如何设置为 true。 我认为您错过了部分答案。您需要在顶部的函数中将 pwdValid 设置为 false。查看上面写着// start out false的评论我已经更新了你的小提琴:jsfiddle.net/VSYr6/3 啊,是的,我确实错过了,然后我通过重新输入 var pwdValid = false 而不是 pwdValid = false 将其设置为 false。非常感谢!!!

以上是关于如何将 DOM 更改为“if/else”语句单独为真,如果所有 if 语句都为真,也将变量设置为真?的主要内容,如果未能解决你的问题,请参考以下文章

带有嵌套 if/else 语句的 While 循环

python基础--条件语句if else

如何将 torch.device('cuda' if torch.cuda.is_available() else 'cpu') 编写为完整的 if else 语句?

将 Dom 更改为 Jquery [关闭]

如何将 if/else 语句指向另一个页面?

良好编程习惯