Question

我的JavaScript代码有问题。我一直试图修复它很长一段时间，但由于我是JavaScript的初学者，我有点迷失自己...... 首先，当您提交页面而不填写任何字段时，应显示隐藏的消息。其次，当我点击一个单选按钮并检查一些复选框然后提交时，我的警报仍然因某种原因而停止。我真的非常需要这方面的帮助，但除了你们我没有人问，所以我真的希望你能帮助我！这是代码：的 HTML

<body>
<div id="case">
    <div id="title">
    <h1>Anmeldung</h1>
    </div>
    <div id="formulare">
        <form onsubmit="checkPw(this)">
            <div id="benutzerdaten">
                <h3>Benutzerdaten</h3>
                <p id="general_alarm" class="alarm">Bitte füllen Sie alle benötigten Felder aus!</p>

                <label for="Benutzername">
                <input type="email" name="username" id="username" placeholder="Benutzernamen" required>
                <p id="user_alarm" class="alarm">Bitte geben Sie eine gültige E-mail Adresse ein!</p>

                <label for="Passwort">
                <input type="Password" name="password1" id="first_pw" placeholder="Passwort" required>
                <p id="password1_alarm" class="alarm">Das Passwort muss mindestens 9 Zeichen lang sein und muss Gross und Kleinbuchstaben und Sonderzeichen enthalten<br> ( ) [ ] { } ? ! $ % &amp / = * + ~ , . ; : < > - </p>

                <label for="Passwort">
                <input type="Password" name="password2" id="second_pw" placeholder="Passwort wiederholen"required>
                <p id="password2_alarm" class="alarm">Das eingegebene Passwort stimmt nicht mit dem ersten überein!</p>
            </div> 
        </form>

        <form>
            <div id="altersgruppe">
                <h3>Altersgruppe</h3>
                <input type="radio" id="opt1" name="Alter" value="<20"><label id="radio1" for="opt1"> &lt;20</label>

                <input type="radio" id="opt2" name="Alter" value="20-39"><label id="radio2" for="opt2"> 20-39</label>

                <input type="radio" id="opt3" name="Alter" value="40-60"><label id="radio3" for="opt3"> 40-59</label>

                <input type="radio" id="opt4" name="Alter" value=">60"><label id="radio4" for="opt4"> >60</label>

                <p id="radio_alarm" class="alarm">Bitte geben Sie ihr Alter an!</p>
            </div>
        </form>

        <form>
            <div id="programmiersprache">
                <h3>Vorgezogene Programmiersprache</h3>
                <h4>Mehrere Auswahlen möglich</h4>
                <label for="check1">
                <input type="checkbox" name="Programmiersprache" value="C++" id="check1">C++</label> 

                <label for="check2">
                <input type="checkbox" name="Programmiersprache" value="C#" id="check2">C#</label>  

                <label for="check3">
                <input type="checkbox" name="Programmiersprache" value="C" id="check3">C</label> 

                <label for="check4">
                <input type="checkbox" name="Programmiersprache" value="Java" id="check4">Java</label>

                <p id="checkbox_alarm" class="alarm">Bitte geben Sie mindestens eine Programmiersprache an!</p>
            </div>
        </form>

        <form>
            <div id="betriebssystem">
                <h3>Betriebssystem</h3>
                <select>
                    <option value="Windows" name="Betriebssystem">Windows</option>
                    <option value="Mac OS" name="Betriebssystem">Mac OS</option>
                    <option value="Linux" name="Betriebssystem">Linux</option>

                    <p id="option_alarm" class="alarm">Bitte wählen Sie ein Betriebssystem aus!</p>
                </select>
            </div>
        </form>

            <div id="reset/submit">
            <button type="button" id="reset">Eingaben zurücksetzen</button>
            <button type="button" id="submit">Eingaben absenden</button>
            </div>

        </form>
    </div>
</div>

的JavaScript

$(document).ready(function(){

//versteckt alarme
$('#password1_alarm').hide();
$('#password2_alarm').hide();
$('#user_alarm').hide();
$('#radio_alarm').hide();
$('#checkbox_alarm').hide();
$('#general_alarm').hide();

//pattern für username und passwort definieren
var username_pattern = /.+@.+[.].+/;
var password_pattern = [/[a-zäöü]+/, /[A-ZÄÖÜ]+/, /[0-9]+/, /[\(\)\[\]\{\}\?\!\$\%\&\/\=\*\+\~\,\.\;\:\<\>\-\_]+/];

//überprüft passwort
function checkPw(password1) {
        if (password1.length < 9) {
            $("#password1_alarm").show();
        } else {
            for (var i = 0; i < password_pattern.length; i++) {
                if (!password_pattern[i].test(password1)) {
                    $("password1_alarm").show();
                    return false;
                } else {
                    $("password1_alarm").hide();
                    if (password_pattern.length -1 == i) {
                        return true;
                    }
                }
            }
        }
    };

//überprüft email 
function checkUn(username){
    if (!username_pattern.test(username)) {
        $('#user_alarm').show();
        return false;
    } else {
        $('#user_alarm').hide();
        return true;
    }
}

$('#first_pw').on("keyup", function(){
    var password1 = $("#first_pw").val();
    checkPw(password1);
});

// Hier wird direkt bei der Eingabe geprüft ob das zweite Passwortfeld 9 Zeichen lang ist und alle vorgegebenen Zeichen ethält.
$('#second_pw').on("keyup", function(){
    var password2 = $("#second_pw").val();
    checkPw(password2);
});

// Hier wird direkt bei der Eingabe geprüft ob der Username einer Email entspricht.
$('#username').on("keyup", function(){
    var username = $('#username').val();
    checkUn(username);
});

$("#submit").click(function(){
    var username = $("#username").val();
    var first_pw = $("#first_pw").val();
    var second_pw = $("#second_pw").val();
    var radio = $('input[name=Alter]:checked', '#radio').val();
    var country = $(".checkbox:selected").val();
    var checkbox = [];

    $(".checkbox").each(function(){
        if ($(this).prop("checked")) {
            checkbox.push($(this).val());
        }
    });

    if (username && first_pw && !second_pw && !radio && !checkbox.length) {
        var password1 = $("#first_pw").val();
        var username = $('#username').val()
        if (checkUn(username) && checkPw(password1)) {
            window.location.href = "login.html?username=" + username;
        }
    } else if (!username && !first_pw && !second_pw) {
        $('general_alarm').show();
    } else {
        $('general_alarm').hide();
        var pw_ok = false;
        var opt_ok = false;
        var chbx_ok = false;

        if (first_pw != second_pw) {
            $('#password2_alarm').show();
            var pw_ok = false;
        } else {
            $('#password2_alarm').hide();
            var pw_ok = true;
            var password = $("#first_pw").val();
        }

        if (!radio) {
            $('#radio_alarm').show();
            var opt_ok = false;
        } else {
            $('#radio_alarm').hide();
            var opt_ok = true;
        }

        if (!checkbox.length) {
            $('#checkbox_alarm').show();
            var chbx_ok = false;
        } else {
            $('#checkbox_alarm').hide();
            var chbx_ok = true;
        }

        if (checkUn(username) && checkPw(password) && pw_ok && opt_ok && chbx_ok){
            window.location.href = "anmeldung.html?username="+username+"&password="+password1+"&radio="+radio+"&checkbox="+checkbox+"&country="+country+"";
        }
    }
});

$("#reset").click(function(){
    if (confirm("Sind Sie sicher das Sie all Ihre Daten zurücksetzen wollen?")) {
        document.location.reload(true)
    }
});

}）;

Answer 1

你好像在做很多不必要的检查。例如，您需要检查“密钥”上的用户名和密码。当用户提交表单时我建议这样做：简化您的检查，以便您只测试一次每个字段。当您在同一个点击事件中多次检查！checkbox.length时，我认为您正在进入一些奇怪的逻辑流程。例如，像这样的伪代码可能更好：

//simple check username function
function checkUn(username){
    if (!username_pattern.test(username)) return false;
}

var $username_ok = false; //plus all other 'ok' bool variables.
$('#username').blur(function(){
    //check username
    if(CheckUn($(this).val())) $username_ok = true;
    //don't need else, since $username_ok is already false at declaration
});

//do same for password (include length check) and all other fields
//then, on submit:

$('#submit').click(function(e){
    e.preventDefault();
    if(!username_ok && !password_ok && ... ){
    //display general alarm here
    return false;
    }
});

发送和显示的邮件错误

1 个答案: