Dieser Artikel beschreibt die Methode von JS zur Formüberprüfung. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
1. Traditioneller Formungsverifizierungscode
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Formularüberprüfung </title>
<script type = "text/javaScript">
Funktion $ (id) {
return document.getElementById (id);
}
Funktion check () {
var E -Mail = $ ("E -Mail"). Wert;
var password = $ ("Passwort"). Wert;
var repassword = $ ("Repassword"). Wert;
var name = $ ("name"). Wert;
if (mail == "") {
alarm ("E -Mail -Wert kann nicht leer sein");
$ ("E -Mail"). Focus ();
false zurückgeben;
}
if (E -Mail.indexof ("@") == -1 || E -Mail.indexof (".") == -1) {
ALERT ("Das Mailbox -Format ist falsch, muss @ und.");
$ ("E -Mail"). Focus ();
false zurückgeben;
}
if (password == "") {
alarm ("Passwort kann nicht leer sein");
$ ("Passwort"). Focus ();
false zurückgeben;
}
if (password.length <6) {
Alarm ("Die Passwortlänge muss größer oder gleich 6" sein);
$ ("Passwort"). Focus ();
false zurückgeben;
}
if (Repassword! = Passwort) {
ALERT ("Das zweimal eingegebene Passwort ist inkonsistent");
$ ("Repassword"). Focus ();
false zurückgeben;
}
if (name == "") {
alarm ("Der Name kann nicht leer sein");
$ ("Name"). Focus ();
false zurückgeben;
}
für (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
alarm ('Der Name kann keine Zahlen enthalten');
$ ("Name"). Focus ();
false zurückgeben;
}
}
}
</script>
</head>
<body>
<form name = "login_form" methode = "post" onSubmit = "return check ()">
<div>
E -Mail: <Eingabe type = "text" name = "E -Mail" id = "E -Mail"/>
</div>
<div>
Passwort: <Eingabe type = "Passwort" name = "password" id = "password" />
</div>
<div>
Geben Sie das Kennwort erneut ein: <Eingabe type = "Passwort" name = "Repassword" id = "Repassword" />
</div>
<div>
Name: <Eingabe type = "text" name = "name" id = "name" />
</div>
<div>
<Eingabe type = "surug" value = "Register" />
</div>
</form>
</body>
</html>
2. Überprüfung des Formulars mit Eingabeaufentwicklungsinformationen hinter dem Eingabefeld
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Formularüberprüfung </title>
<script type = "text/javaScript">
Funktion $ (id) {
return document.getElementById (id);
}
Funktion check () {
var E -Mail = $ ("E -Mail"). Wert;
var password = $ ("Passwort"). Wert;
var repassword = $ ("Repassword"). Wert;
var name = $ ("name"). Wert;
$ ("E -MailInfo"). Innerhtml = "";
$ ("passingInfo"). Innerhtml = "";
$ ("RepasswordInfo"). Innerhtml = "";
$ ("nameInfo"). Innerhtml = "";
if (mail == "") {
$ ("E -MailInfo"). Innerhtml = "E -Mail -Wert kann nicht leer sein";
$ ("E -Mail"). Focus ();
false zurückgeben;
}
if (E -Mail.indexof ("@") == -1 || E -Mail.indexof (".") == -1) {
$ ("E -MailInfo"). InnerHtml = "Das Mailbox -Format ist falsch, muss @ und.";
$ ("E -Mail"). Focus ();
false zurückgeben;
}
if (password == "") {
$ ("passingInfo"). Innerhtml = "Passwort kann nicht leer sein";
$ ("Passwort"). Focus ();
false zurückgeben;
}
if (password.length <6) {
$ ("passwordinfo"). InnerHtml = "Die Passwortlänge muss größer oder gleich 6 sein";
$ ("Passwort"). Focus ();
false zurückgeben;
}
if (Repassword! = Passwort) {
$ ("RepasswordInfo"). Innerhtml = "Das zweimal eingegebene Passwort ist inkonsistent";
$ ("Repassword"). Focus ();
false zurückgeben;
}
if (name == "") {
$ ("nameInfo"). Innerhtml = "Der Name kann nicht leer sein";
$ ("Name"). Focus ();
false zurückgeben;
}
für (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). Innerhtml = 'Der Name kann keine Zahlen enthalten';
$ ("Name"). Focus ();
false zurückgeben;
}
}
}
</script>
</head>
<body>
<form name = "login_form" methode = "post" onSubmit = "return check ()">
<div>
E -Mail: <Eingabe type = "text" name = "E -Mail" id = "E -Mail"/> <span id = "mailinfo"> </span>
</div>
<div>
Passwort: <Eingabe type = "Passwort" name = "password" id = "password" /> <span id = "passwordinfo"> < /span>
</div>
<div>
Geben Sie das Kennwort erneut ein: <Eingabe type = "Passwort" name = "Repassword" id = "Repassword" /> <span id = "RepasswordInfo"> < /span>
</div>
<div>
Name: <Eingabe type = "text" name = "name" id = "name" /> <span id = "nameInfo"> < /span>
</div>
<div>
<Eingabe type = "surug" value = "Register" />
</div>
</form>
</body>
</html>
Die Renderings sind wie folgt:
3.. Lösen Sie die Überprüfungsfunktion aus, wenn das Eingangsfeld den Fokus verliert
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Formularüberprüfung </title>
<script type = "text/javaScript">
Funktion $ (id) {
return document.getElementById (id);
}
Funktion check () {
var E -Mail = $ ("E -Mail"). Wert;
var password = $ ("Passwort"). Wert;
var repassword = $ ("Repassword"). Wert;
var name = $ ("name"). Wert;
$ ("E -MailInfo"). Innerhtml = "";
$ ("passingInfo"). Innerhtml = "";
$ ("RepasswordInfo"). Innerhtml = "";
$ ("nameInfo"). Innerhtml = "";
if (mail == "") {
$ ("E -MailInfo"). Innerhtml = "E -Mail -Wert kann nicht leer sein";
false zurückgeben;
}
if (E -Mail.indexof ("@") == -1 || E -Mail.indexof (".") == -1) {
$ ("E -MailInfo"). InnerHtml = "Das Mailbox -Format ist falsch, muss @ und.";
false zurückgeben;
}
if (password == "") {
$ ("passingInfo"). Innerhtml = "Passwort kann nicht leer sein";
false zurückgeben;
}
if (password.length <6) {
$ ("passwordinfo"). InnerHtml = "Die Passwortlänge muss größer oder gleich 6 sein";
false zurückgeben;
}
if (Repassword! = Passwort) {
$ ("RepasswordInfo"). Innerhtml = "Das zweimal eingegebene Passwort ist inkonsistent";
false zurückgeben;
}
if (name == "") {
$ ("nameInfo"). Innerhtml = "Der Name kann nicht leer sein";
false zurückgeben;
}
für (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). Innerhtml = 'Der Name kann keine Zahlen enthalten';
false zurückgeben;
}
}
}
Funktion checkemail () {// E -Mail prüfen
$ ('E -MailInfo'). Innerhtml = "";
var E -Mail = $ ('E -Mail'). Wert;
if (mail == "") {
$ ('E -MailInfo'). InnerHtml = "Der E -Mail -Wert kann nicht leer sein";
false zurückgeben;
}
if (E -Mail.indexof ('@') == -1 || E -Mail.indexof ('.') == -1) {
$ ('E -MailInfo'). InnerHtml = "E -Mail muss @ und.";
false zurückgeben;
}
}
Funktion checkPassword () {// Passwort überprüfen
$ ('passwordinfo'). InnerHtml = "";
var password = $ ('Passwort'). Wert;
if (password == "") {
$ ("passingInfo"). Innerhtml = "Passwort kann nicht leer sein";
false zurückgeben;
}
if (password.length <6) {
$ ("passwordinfo"). InnerHtml = "Die Passwortlänge muss größer oder gleich 6 sein";
false zurückgeben;
}
}
Funktion checkRepassword () {// Überprüfen Sie das wieder eingegebene Passwort
$ ('Repassword'). Innerhtml = "";
var repassword = $ ('Repassword'). Wert;
if (Repassword! = Passwort) {
$ ("RepasswordInfo"). Innerhtml = "Das zweimal eingegebene Passwort ist inkonsistent";
false zurückgeben;
}
}
Funktion checkname () {// Name überprüfen
$ ('nameInfo'). Innerhtml = "";
var name = $ ('name'). Wert;
if (name == "") {
$ ("nameInfo"). Innerhtml = "Der Name kann nicht leer sein";
false zurückgeben;
}
für (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). Innerhtml = 'Der Name kann keine Zahlen enthalten';
false zurückgeben;
}
}
}
</script>
</head>
<body>
<form name = "login_form" methode = "post" onSubmit = "return check ()">
<div>
E -Mail: <Eingabe type = "text" name = "E -Mail" id = "E -Mail" onblur = "checkemail ();"/> <span id = "E -MailInfo"> </span>
</div>
<div>
Kennwort: <Eingabe type = "Passwort" name = "password" id = "password" onblur = "checkPassword ();"/> <span id = "passwayInfo"> </span>
</div>
<div>
Geben Sie das Kennwort erneut ein: <Eingabe type = "Passwort" name = "repassword" id = "repassword" onblur = "checkRepassword ();"/> <span id = "repasswordInfo"> </span>
</div>
<div>
Name: <Eingabe type = "text" name = "name" id = "name" onblur = "checkName ();"/> <span id = "nameInfo"> </span>
</div>
<div>
<Eingabe type = "surug" value = "Register" />
</div>
</form>
</body>
</html>
Die Renderings sind wie folgt:
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.