Dieser Artikel teilt die gemeinsamen Methoden von JavaScript für die Verarbeitungsformularereignisse für Ihre Referenz. Der spezifische Inhalt ist wie folgt
1. Häufige Methoden zum Zugriff auf Formularobjekte:
①: gemäß dem ID -Attribut des <form> Elements;
var myform = document.getElementById ("myFormId"); // MyFormID ist die ID eines <form> Elements;
②: gemäß dem Namensattribut des <form> Elements;
var myform = document.Forms ["myFormName"]; // myFormName ist der Name eines <form> Elements;
③: Verwenden Sie den Formularnamen direkt, um auf das Formular zuzugreifen:
var myform = document.myFormName; // myFormName ist der Name eines <form> Elements;
2. Gemeinsame Ereignisse für Formulare:
① ONSUBMIT -Ereignis: Dieses Ereignis wird beim Klicken auf die Schaltfläche "Senden" ausgelöst und kann die Einreichung von Formularen verhindern. Beispiel: Überprüfung der Formen;
②onchange -Ereignis: Dieses Ereignis wird ausgelöst, wenn der Benutzer den Inhalt ändert und das Textfeld den Fokus verliert.
Beispiel: Formulareingabe
Schnittstelle an der Rezeption:
Vordergrund -Schnittstellencode:
<form name = "myForm" action = "JavaScript: alert ('erfolgreich registriert!');" method = "post" OnSubmit = "return yanzheng ();"> <table> <tbody> <tr> <Td> Benutzername: </td> <td> <input name = "userername" id = "username" type = "text"/> </td> <td align = "links"> <p style = "farb #ff0000"> username "ush user #" #" #ff0000" userNAME "ush user usw. #" # #ff0000 "username ist user usw. #" #ff0000 "username links" </td> </tr> <tr> <td> Kennwort: </td> <td> <input id = "password" onchange = "passwordLeave ()" type = "passwart"/> </td> <td align = "links"> <p style = "color: #ff0000">* <Eingabe id = "butth- type- type- type- type- type-" button = "button". id = "button2" type = "button" value = "Medium" style = "Hintergrundfarbe: #ff0000"/> <input id = "button3" type = "button" value = "strong" style = "background-color: #ff0000"/> <label id = "lavel"> </p> </td> </tr> <tr> </tR> <tr> <ttr> <td> ager: type = "text"/> </td> <td> <input id = "Alter" type = "text"/> </td> <td> <p style = "color: #ff0000">*</p> </td> </tr> <tr> <td> Geschlecht: </td> <td> <Eingabe name = "type". name = "sex" type = "radio" value = "weiblich"/> weiblich </td> <td> align = "links"> <p style = "color: #ff0000">*</p> </td> </tr> <tr> <Td> Inhalt: </td> <td> <input type = "passbox" content "content" content "content" content "content" content "content" content "content" content "content" content "content" content "content" content "content" content "content" content "content" content " value="Entertainment" />Entertainment<input type="checkbox" name="content" value="Education" />Entertainment</td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> Education: </td> <td> <select name="edu_level"> <option value="1">Elementary School</option> <option value="2">Senior School</option> <option value="3">University</option> <option value="4">University</option> </select> </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> Hobbies: </td> <td> <select name = "wie" size = "6" multiple = "multiple"> <option value = "1"> Basketball </option> <Option Value = "2"> Fußball </option> <Option Value = "3"> Volleyball </Option> <Option Value = "4"> Ausführen </option> <Optionswert = "5"> Hilling </option> <td value = "6"> Fitness </option </select "> </td aloption =" 6 "> Fitness </option </select" <p style = "color: #ff0000">*</p> </td> </tr> <tr> <td> <input id = "button4" type = "button" onclick = "checkinfo ()" value = "Ansichtsinformationen"/> </td> <td> <Eingabe type = "subjekt" tijiao "-Regel". name = "tijiao" value = "register"/> </td> <td> <Eingabe type = "reset" name = "reset" value = "reset"/> </td> </tr> </tbody> </table> </Form>JS -Skript:
<script type = "text/javaScript"> Funktion yanzheng () {var b; var a = document.getElementById ("Benutzername"); // Benutzername value var p = document.getElementById ("Passwort"); // Kennwortwert abrufen var age = myForm.age.Value; // Alterswert abrufen if (a.Value.length <5 || a.Value.length> 10) {alert ("Der von Ihnen eingegebene Benutzername ist ein falsches Format!"); false zurückgeben; } else if (p.Value.length <5) {alert ("Kennwortlänge ist weniger als 5!"); false zurückgeben; } else if (! Scheck (Alter)) {return false; } else {return true; }} Funktionsprüfung (a) {// Alter var ch, Alter; für (var i = 0; i <A.Length; i ++) {ch = a.charat (i); if (ch <"0" || ch> "9") {alert ("Bitte geben Sie die Nummer in der Altersoption ein!"); false zurückgeben; }} ay = parseInt (a); if (Alter <10 || Alter> 100) {alert ("Alter ist nicht wahr!"); false zurückgeben; } Return true; } function checkinfo () {// Alle Informationen anzeigen var userername = myForm.username.Value; // Benutzername var password = myForm.Password.Value; // Kennwort abrufen var age = myForm.age.Value; // Alter var sex = myForm.sex; // Gender var Osex = "" erhalten; // Legen Sie eine Option fest, um Geschlechtsvar content = myForm.Content zu erhalten. // Inhalt in content te var ocontent = ""; // Legen Sie eine Option fest, um Inhalt zu erhalten. // Bildung var oedu = "" erhalten; // Legen Sie eine Option fest, um Bildung zu erhalten. // Formular Hobby var wie = ""; // Setzen Sie eine Variable, um eine Hobby -Option für (var i = 0; i <sex.length; i ++) {// Geschlecht if (sex [i]. }} für (var i = 0; i <content.length; i ++) {// content if (content [i]. Checked) {ocontent += content [i] .Value +""; }} für (var i = 0; i <eduleave.length; i ++) {// lehrreich if (eduleave.selectedIndex> = 0) {oedu = eduleave.options [eduleave.selectedIndex] .Text; }} für (var i = 0; i <intersent.length; i ++) {// hobbies if (intersent.options [i] .Selected) {Olike += interSent.Options [i] .text +""; }} alert ("Ihr Benutzername lautet:" + Benutzername + "/n Passwort lautet:" + password + "/n Alter ist:" + Alter + "/n Geschlecht ist:" + ocontent + "/n Bildung ist:" + oedu + "/n Hobbies sind:" + Olike); } Funktion passwordLeave () {var passwordleAvel = myForm.Password.Value; if (passwordleavel.length == "") {document.getElementById ("button1"). style.display = "Keine"; document.getElementById ("button2"). style.display = "Keine"; document.getElementById ("button3"). style.display = "keine"; } else {if (passwordleAvel.length <= "5") {document.getElementById ("button1"). style.display = ""; document.getElementById ("button2"). style.display = "Keine"; document.getElementById ("button3"). style.display = "keine"; } else if (passwordleAvel.length <= "10") {document.getElementById ("button1"). style.display = ""; document.getElementById ("button2"). style.display = ""; document.getElementById ("button3"). style.display = "keine"; } else {document.getElementById ("button1"). style.display = ""; document.getElementById ("button2"). style.display = ""; document.getElementById ("button3"). style.display = ""; }}} function startbody () {document.getElementById ("button1"). style.display = "Keine"; document.getElementById ("button2"). style.display = "Keine"; document.getElementById ("button3"). style.display = "keine"; } </script>Dieser Fall ist nur ein paar gängige Praktiken und beinhaltet keine Technologie, sondern ist nur zur Bequemlichkeit, das nächste Mal zu nutzen.
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.