Die Anleitung zu Javascript Form Validation

Form Validation
Das einfache Beispiel
Die Daten von Form zugreifen
Submit durch Javascript
Automatisch bestätigen (validate)

1. Form Validation

Sehr regelmässig treffen Sie eine website, wo der Benutzer vor der Sendung zum Server die Information in einer Form eingibt. Zum Beispiel die Kontoregistrationsform. Die Information, die der Benutzer in die Form eingibt, müssen bestätigt werden um die Angemessenheit zu sichern.

Einige Beispiele von der Bestätigung

Prüfen zu sichern, dass die Daten nicht leer sind.
die Emailformat prüfen
die Format von Telefonnummer prüfen
...

Es gibt grundsätzlich 3 Wege zur Bestätigung der Daten:

Die Daten vom form werden zum server gesent werden und die Bestätigung (validate) wird bei der Server-Seite durchgeführt.
Die Daten vom form wird bei der Seite client durch die Verwendung von Javascript bestätigt. Das hilft server nicht zu viel zu arbeiten und die Leistung der Applikation zu verbessern.
2 obengemeinte Methode verwenden um form zu bestätigen.

In dieser Unterricht werde ich die Verwendung von Javascript zur Bestätigung der form diskutieren. Unter ist das die Illustration des Programmsverhalten wenn der Benutzer auf die Button Submit klickt.

Sie müssen eine Funktion in der Kombination mit dem Event onsubmit von form registrieren. Die Aufgabe von der Funktion ist die Prüfung der durch den Benutzer in form eingegebenen Informationen und die Zurückgabe von true wenn alle Information richtig sind und umgekehrt false .
Wenn der Benutzer auf die Button Submit klickt, wird die Funktion in der Kombination vom Event onsubmit aufgeruft.
Wenn die Funktion in der Kombination vom Event onsubmittrue zurückgibt, wird die Daten von form zum server geschickt werden. Umgekehrt wird die Aktion Submit entfernt.

2. Das einfache Beispiel

OK, das ist ein einfaches Beispiel, damit Sie vor der Durchführung der mehr komplizierten Beispielen den Operationsgrundsatz von Form verstehen können.

Das Attribut action von <form> wird benutzt um die Seite, nach der die Daten geschickt werden anzugeben. Anders gesagt, das ist die Seite, die die aus <form> der momentanen Seite gesendeten Daten behandeln wird.

Die Seite zur Behandlung der aus form gesendeten Daten wird oft durch die Technologie Servlet/JSP, PHP oder eine Technologie in die Seite Server stattdessen einer Seite HTML geschrieben. Allerdings erwähne ich die Behandlung der Daten in dieser Unterricht.

simple-validation-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>
      <script type = "text/javascript">
         function validateForm()  {
             var u = document.getElementById("username").value;
             var p = document.getElementById("password").value;

             if(u== "") {
                 alert("Please enter your Username");
                 return false;
             }
             if(p == "") {
                 alert("Please enter you Password");
                 return false;
             }

             alert("All datas are valid!, send it to the server!")

             return true;
         }
      </script>
   </head>
   <body>

      <h2>Enter your Username and Password</h2>

      <div style="border:1px solid #ddd; padding: 5px;">
         <form method="GET" action="process-action.html" onsubmit = "return validateForm()">
            Username: <input type="text" name="username" id="username"/>
            <br><br>
            Password: <input type="password" name = "password" id="password"/>
            <br><br>
            <button type="submit">Submit</button>
         </form>
      </div>

   </body>
</html>

process-action.html

<!DOCTYPE html>
<html>
   <head>
      <title>Process Action</title>

   </head>
   <body>

      <h3>Process Action Page</h3>

      OK, I got data!
      
      <br/><br/>

      <a href="javascript:history.back();">[Go Back]</a>

   </body>
</html>

3. Die Daten von Form zugreifen

Auf die Daten eines Feldes durch ID vom Feld zugreifen.

<input type="text"  id="username"/>
<input type="password"  id="password"/>

// Access field via ID:
var field =  document.getElementById("fieldId");

var value = field.value;

Auf die Felden vom Form durch das Attribut name zugreifen:

<form name="myForm" ...>
    <input type="text" name="username"/>
    <input type="password" name = "password"/>
    <button type="submit">Submit</button>
</form>

// Get form via form name:
var myForm = document.forms["myForm"];

var u = myForm["username"].value;
var p = myForm["password"].value;

Wenn der Benutzer auf einen Feld von Form die Daten unrichtig eingibt, sollen Sie den Benutzer ankündigen und gleichzeitig auf diesen Feld fokussieren (focus).

validation-example1.html

<!DOCTYPE html>
<html>
   <head>
      <title>Validation</title>
      <script type = "text/javascript">

         function validateForm()  {
             // Get form via form name:
             var myForm = document.forms["myForm"];

             var u = myForm["username"].value;
             var p = myForm["password"].value;

             if(u== "") {
                 alert("Please enter your Username");
                 myForm["username"].focus(); // Focus
                 return false;
             }
             if(p == "") {
                 alert("Please enter you Password");
                 myForm["password"].focus(); // Focus
                 return false;
             }

             alert("All datas are valid!, send it to the server!")

             return true;
         }
      </script>
   </head>
   <body>

      <h2>Enter your Username and Password</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" method="GET" action="process-action.html" onsubmit = "return validateForm()">
            Username: <input type="text" name="username"/>
            <br><br>
            Password: <input type="password" name = "password"/>
            <br><br>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Zum Beispiel: den Benutzer auffordern, eine Zahl vom 0 bis 10 anzugeben.

validation-number-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Validation</title>
      <script type = "text/javascript">

         function validateForm()  {

             var myField = document.getElementById("myNumber");
             var value = myField.value;

             if( value == "" || isNaN(value) || value < 0 || value > 10)  {
                alert("Invalid input!");
                myField.focus();
                return false;
             }

             return true;
         }
      </script>
   </head>
   <body>

      <h2>Enter a Number between 0 and 10</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html" onsubmit = "return validateForm()">
            Number: <input type="text" id= "myNumber"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

4. Submit durch Javascript

Auf die Button <button type="submit"> oder <input type="submit"> innerhalb form klicken hilft Ihnen bei der Sendung der Daten von form nach Server. Aber Sie können das Ding durch Javascript auch tun.

javascript-submit-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Javascript Submit</title>
      <script type = "text/javascript">

         function validateForm() {
             var name = document.forms["myForm"]["fullName"].value;
             if(name == "") {
                 alert("Please enter your name");
                 return false;
             }
             return true;
         }

         function submitByJavascript()  {

             var valid = validateForm();
             if(!valid)  {
               return;
             }

             var myForm = document.forms["myForm"];

             myForm.submit();
         }
      </script>
   </head>
   <body>

      <h2>Submit a from with Javascript</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html" onsubmit = "return validateForm()">
            Your Name: <input type="text" name = "fullName" value =""/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>
       <br/>

      <!-- A Button outside the form -->
      Button outside the form:
      <button onclick="submitByJavascript()">Click Me to submit form</button>

   </body>
</html>

5. Automatisch bestätigen (validate)

Der Browser kann einige Datentypen auf Form automatisch bestätigen (validate), z.B das Attribut required auf einen Feld von form einfügen um dem Browser zu sagen, dass dieser Feld verpflichtend ist. Der Browser wird automatisch prüfen und den Benutzer melden wenn der Benutzer in diesen Feld nicht eingibt

Achtung: Die Browser sind zu alt. Z.B IE von der Version 9 oder älter unterstützt automatisch validate nicht.

required-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Required</title>

   </head>
   <body>

      <h2>Required attribute</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html" onsubmit = "return validateForm()">
            Your Name: <input type="text" name = "fullName" value ="" required/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Einige Element <input> werden in HTML 5 neu vorgestellt, z.B color, date, datetime-local, email, month, number, range, search, tel, time, url, week,. Die Elementen haben die besonderen Attribute um den Browser zu helfen, wie sie ihre Daten automatisch bestätigen (validate). Unter sind sie einige solchen Attributen:

Attribute	Bezeichnung
disabled	Vorgeben, dass das Element Input deaktiviert (disabled) werden soll.
max	Die maximale Wert von dem Element Input vorgeben.
min	Die minimum Wert von dem Element Input vorgeben.
pattern	pattern für das Element Input vorgeben.
required	Vorgeben, dass der Input-Feld verpflichtend ist. Der Benutzer muss die Daten eingeben.
type	Das Typ vom Element Input bestimmen.

Die Details der Liste von Elementen <input> und die jedem Element angemessenen Attribute sehen:
HTML Input types

Zum Beispiel: Ein Element <input type="number"> mit den Attributen min, max, Der Browser wird den Benutzer benachrichtigen wenn er eine Zahl aus dem erlaubten Bereich eingibt

attr-min-max-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Min Max Attributes</title>

   </head>
   <body>

      <h2>Attribute min, max</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Enter your score (0-100):
            <input type="number" name = "score" min= "0" max = "100"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Zum Beispiel: den Benutzer auffordern, einen Ländercode mit 2 Zeichen einzugeben.

attr-pattern-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>pattern attribute</title>

   </head>
   <body>

      <h2>Attribute: pattern</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Country code:
            <input type="text" name = "countryCode" pattern="[A-Za-z]{2}"
              title="Two letter country code"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Zum Beispiel: den Benutzer auffordern, ein Passwort mit mindesten 8 Zeichen einzugeben.

attr-pattern-example2.html

<!DOCTYPE html>
<html>
   <head>
      <title>pattern attribute</title>

   </head>
   <body>

      <h2>Attribute: pattern</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Password:
            <input type="password" name = "password" pattern=".{8,}"
              title="8 or more characters"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Achtung: den Benutzer auffordern, ein starkes Passwort einzugeben, das mindesten 8 Zeichen, mindesten eine Großschrift und mindesten eine Kleineschrift hat.

attr-pattern-password-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>pattern attribute</title>

   </head>
   <body>

      <h2>Attribute: pattern</h2>
      Password must contain 8 or more characters that are of at least one number,
      and one uppercase and lowercase letter:
      <br/><br/>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Password:
            <input type="password" name = "password"
              pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
              title="Invalid password!"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Zum Beispiel: den Benutzer auffordern, die Email Addresse einzugeben und das Attribut pattern zu benutzen, um zu sichern, dass der Benutzer ein email in die richtigen Format eingibt.

attr-pattern-email-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>pattern attribute</title>

   </head>
   <body>

      <h2>Attribute: pattern</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Email:
            <input type="password" name = "password"
              pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
              title="Invalid password!"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>