0

いつものようにこの質問をどのように表現すればよいかわかりませんでした。

私はしばらくの間、このパスワードの検証に取り組んできました (それに関する以前の質問はいくつかあります)。

パスワードのルールを示す 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 の場合にのみ、変数を 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);
});

    早く直さないと爆発しそう

    • 4

    1 に答える 1

    0

    以下を試してください。基本的には false に初期化し、最初のチェックで成功した場合は true に設定します。その後のチェックでは、pwdValid && 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');

        }
    };
    于 2013-05-21T02:59:20.640 に答える