Wie zum ausführen von client-seitigen Formular-Validierung auf Passwort

Mache ich ein einfaches " sign-up-Seite. Für die Passwort-Sachen, die ich brauchen, um zu überprüfen das neue Kennwort und das bestätigte Kennwort sind die gleichen, aber keine Ahnung, wie

                            <div class="row">
                                <!--New Username-->
                                <div class="large-4 columns form-text">New Username</div>
                                <div class="large-8 columns">
                                    <div class="input-icon font-awesome">&#xf007;</div><input type="text" class="form-input" name="username" required>
                                </div>
                            </div>
                            <br/>
                            <div class="row">
                                <!--New email-->
                                <div class="large-4 columns form-text">Email</div>
                                <div class="large-8 columns">
                                    <div class="input-icon font-awesome">&#xf003;</div><input type="email" class="form-input" name="email" pattern="[a-zA-Z]*@[a-zA-Z]*" required>
                                </div>
                            </div>
                            <br/>
                            <div class="row">
                                <!--New Passwrord-->
                                <div class="large-4 columns form-text">New Password</div>
                                <div class="large-8 columns">
                                    <div class="input-icon font-awesome">&#xf084;</div><input type="password" class="form-input" name="password" required> 
                                </div>
                            </div>
                            <br/>
                            <div class="row">
                                <!--Reconfirm new password-->
                                <div class="large-4 columns form-text">Re-enter Password</div>
                                <div class="large-8 columns">
                                    <div class="input-icon font-awesome">&#xf084;</div><input type="password" class="form-input" name="password-confirm" required>
                                </div>
                            </div>

Wie weit haben Sie bekommen?
Zeigen Sie Ihren code so weit bro
Entschuldigung für meinen Kommentar vorher (jetzt gelöscht)... ich habe deine Frage falsch verstanden, und dachte, Sie wollte überprüfen, ob das Passwort gültig war

InformationsquelleAutor Frank Tian | 2013-11-08

1

Das ist ziemlich viel code, aber ich brach ein Beispiel auf einer fiddle.

Vereinfachte HTML:
```
<form id="passwordForm" action="#" method="POST">
    Password:<br>
    <input type="password" id="password"><br>
    Confirm Password:<br>
    <input type="password" id="confirmPassword"><br>
    <input type="submit" id="submitButton" value="Check 'Em">
</form>
<div id="responseDiv"></div>
```
Ich verwendet jQuery:
```
$(document).ready(function () {
    $("#submitButton").click(function (e) {
        e.preventDefault();
        var matched,
            password = $("#password").val(),
            confirm = $("#confirmPassword").val();

        matched = (password == confirm) ? true : false;
        if(matched) { 
            //Submit line commented out for example.  In production, remove the //
            //$("#passwordForm").submit(); 

            //Shows success message and prevents submission.  In production, comment out the next 2 lines.
            $("#responseDiv").html("Passwords Match");
            return false;
    }
    else { 
        $("#responseDiv").html("Passwords don't match..."); 
        return false;
    }
});
```
});

Viele Male neue Lernende vergessen den e.preventDefault(); Ohne Sie, wird das Formular Einreichen, unabhängig von der Validierung. Gibt false zurück, wenn es etwas falsch, und das Formular kann nicht abgeschickt werden.

Gibt es einen Ereignis-listener auf die Schaltfläche senden. Wenn es angeklickt, oder die enter-Taste gedrückt wird, fokussiert in der form, es wird führen Sie die Validierung. Wenn alles in Ordnung ist, wird die post die Informationen an die URL im action-Attribut des form-Tags.

Ein weiterer wichtiger Punkt ist immer die re-Validierung auf der Serverseite. Wenn ein Benutzer hat Javascript deaktiviert das Formular wird nach den Informationen, unabhängig davon, was in Ihrem Validierung Skript.
- wie u automatisch den Benutzer zu einigen anderen Seite, wenn das Spiel überprüfen übergeben?
- u tun müssen, klicken Sie zum überprüfen dieser beiden Werte übereinstimmen oder nicht?
- Bisher mein code gezeigt, wie Sie überprüfen, wenn der text innerhalb der jeweiligen box abgestimmt. Ich habe aktualisiert es, zu zeigen, die tatsächliche Unterwerfung nach der Prüfung. Wenn Sie weitere Fragen haben, zögern Sie nicht zu Fragen!
InformationsquelleAutor Matthew Johnson

mit normalen javascript, nur die Anpassung an Ihren source-code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<script>
function pass() {
    var pass_1 = document.forms["myForm"].pass_1.value.length;
    var pass_2 = document.forms["myForm"].pass_2.value.length;
    if (pass_1 != pass_2) {
        alert("the pass and repeat pass must be equal");
        return false;
    }
    return true;
}
</script>
</head>

<body>
    <form method="post" action="" name="myForm" onSubmit="pass(); return false;">
    <input type="password" placeholder="type your pass" name="pass_1">
    <input type="password" placeholder="confirm your pass" name="pass_2">
<input type="submit" value="validate">
</form> 
</body>
</html>

den gleichen code oben, aber mit dem redirect: http://jsfiddle.net/m7BrM/

option 2 verwenden Sie ein plugin:
http://www.technicalkeeda.com/jquery/password-and-confirm-password-validation-in-jquery

InformationsquelleAutor Leandro RR

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.