Cet article partage les méthodes communes de JavaScript pour le traitement des événements de formulaire pour votre référence. Le contenu spécifique est le suivant
1. Méthodes courantes pour accéder aux objets de formulaire:
①: Selon l'attribut ID de l'élément <form>;
var myform = document.getElementById ("myformId"); // MyFormID est l'ID d'un élément <form>;
②: Selon l'attribut de nom de l'élément <form>;
var myform = document.forms ["myformName"]; // myformName est le nom d'un élément <form>;
③: Utilisez le nom de formulaire directement pour accéder au formulaire:
var myform = document.myformName; // myformName est le nom d'un élément <form>;
2. Événements communs pour les formulaires:
① Event ONSUBMIT: Cet événement sera déclenché lors du clic sur le bouton "Soumettre" et peut empêcher la soumission du formulaire. Exemple: vérification des formulaires;
②Onchange Event: Cet événement est déclenché lorsque l'utilisateur change de contenu et que la zone de texte perd la mise au point;
Exemple: soumission de formulaire
Interface de la réception:
Code d'interface de premier plan:
<form name = "myform" action = "javascript: alert ('enregistré avec succès!');" Method = "Post" onSubmit = "return yanzheng ();"> <s table> <tbody> <tr> <td> nom d'utilisateur: </td> <td> <input name = "username" id = "username" type = "text" /> </ td> <td align = "Left"> <p style = "colori: # ff0000"> * username est entre 6-10; </td> </tr> <tr> <td> Mot de passe: </td> <td> <entrée id = "mot de passe" onchange = "PasswordLeave ()" type = "mot de passe" /> </td> <td align = "Left"> <p style = "Color: # ff0000"> * <entrée id = "Button1" Type = "Button" Value = "Faible" Style = "Fond id = "Button2" type = "Button" value = "medium" style = "background-Color: # ff0000" /> <input id = "Button3" type = "Button" value = "Strong" style = "background-Color: # ff0000" /> <label = "lavel"> </ label> </ p> </ td> </ tr> <Tr> <td> Âge: </ td> <d> </ TR> <Tr> <TD> type = "text" /> </td> <td> <entrée id = "age" type = "text" /> </td> <td> <p style = "colore: # ff0000"> * </p> </td> </tr> <tr> <td> genre: </ td> <td> <entrée nom = "sexe" type = "radio" value " name = "sexe" type = "radio" value = "femelle" /> femelle </td> <td> align = "Left"> <p style = "colore: # ff0000"> * </p> </td> </tr> <tr> <td> Content: </td> <td> <intrant type = "checkbox" name = "contenu" value = "actualités" /> Value = "Entertainment" /> Entertainment <Input Type = "Checkbox" name = "Content" value = "Education" /> Entertainment </td> <td align = "Left"> <p style = "Color: # ff0000"> * </p> </td> </tr> <tr> <td> éducatif: </td> <td> <lelect name = "edu_level"> </td> <td> <td> <lelect name = "edu_level"> </td> <td> <td> 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> </pride name = "like" size = "6" multiple = "multiple"> <option value = "1"> basketball </ option> <option value = "2"> football </ option> <option value = "3"> volleyball </ option> <option value = "4"> exécutant </ option> <option value = "5"> hillling </ option> <option valeur = "6"> fitness </ option> </pople> <p style = "Color: # ff0000"> * </p> </td> </tr> <tr> <td> <entrée id = "Button4" type = "Button" onClick = "Checkinfo ()" Value = "Affichage des informations" /> </ td> <td> <entre type = "Soumider" Name = "Tijiao" Value = "Register" /> </ TD> name = "tijiao" value = "registre" /> </td> <td> <input type = "reset" name = "reset" value = "reset" /> </td> </tr> </tbody> </s table> </orm>Script js:
<script type = "text / javascript"> fonction yanzheng () {var b; var a = document.getElementById ("nom d'utilisateur"); // Obtenez la valeur du nom d'utilisateur var p = document.getElementById ("mot de passe"); // Obtenir la valeur du mot de passe var Age = myform.age.value; // Obtenez une valeur d'âge if (a.value.length <5 || a.value.length> 10) {alert ("le nom d'utilisateur que vous avez entré est un format incorrect!"); retourne false; } else if (p.value.length <5) {alert ("La longueur du mot de passe est inférieur à 5!"); retourne false; } else if (! checkage (Âge)) {return false; } else {return true; }} vérification des fonctions (a) {// Vérifier l'âge var ch, âge; pour (var i = 0; i <a.length; i ++) {ch = a.Carat (i); if (ch <"0" || ch> "9") {alert ("Veuillez saisir le numéro dans l'option d'âge!"); retourne false; }} age = parseInt (a); if (âge <10 || Âge> 100) {alert ("L'âge n'est pas vrai!"); retourne false; } return true; } Fonction CheckInfo () {// Afficher toutes les informations var username = myform.username.value; // Get username var mot de passe = myform.password.value; // Obtenez le mot de passe var Âge = myform.age.value; // Obtenez l'âge var sexe = myform.sex; // obtient le genre var osex = ""; // Définissez une option pour obtenir le contenu de genre Var = MyForm.Content; // obtient du contenu var oContent = ""; // Définissez une option pour obtenir du contenu var eLuleave = myform.edu_level; // obtenir une éducation var oedu = ""; // Définissez une option pour obtenir l'éducation var intersent = myform.like; // Obtenez un hobby var comme = ""; // Définissez une variable pour obtenir une option de passe-temps pour (var i = 0; i <sex.length; i ++) {// Gender if (sexe [i] .Checked) {osex = sexe [i] .value; }} pour (var i = 0; i <contenu.length; i ++) {// contenu if (contenu [i] .checked) {Ocontent + = contenu [i] .value + ""; }} pour (var i = 0; i <eduLeave.length; i ++) {// éducatif if (eduleave.selectedIndex> = 0) {oedu = eduleave.options [eduleave.selectedIndex] .Text; }} pour (var i = 0; i <intersent.length; i ++) {// hobbies if (intersent.options [i] .selected) {olike + = intersent.options [i] .text + ""; }} alert ("Votre nom d'utilisateur est:" + nom d'utilisateur + "/ n Le mot de passe est:" + mot de passe + "/ n L'âge est:" + Age + "/ n Le genre est:" + OContent + "/ n L'éducation est:" + oedu + "/ n Les passe-temps sont:" + olike); } function passwordLeave () {var passwordLeavev = myform.password.value; if (passwordLeavevel.length == "") {document.getElementById ("Button1"). Style.display = "Aucun"; document.getElementById ("Button2"). Style.display = "Aucun"; document.getElementById ("Button3"). Style.display = "Aucun"; } else {if (passwordLeavevel.length <= "5") {document.getElementById ("Button1"). style.display = ""; document.getElementById ("Button2"). Style.display = "Aucun"; document.getElementById ("Button3"). Style.display = "Aucun"; } else if (passwordLeAVEL.length <= "10") {document.getElementById ("Button1"). Style.display = ""; document.getElementById ("Button2"). style.display = ""; document.getElementById ("Button3"). Style.display = "Aucun"; } else {document.getElementById ("Button1"). style.display = ""; document.getElementById ("Button2"). style.display = ""; document.getElementById ("Button3"). style.display = ""; }}} fonction startbody () {document.getElementById ("Button1"). Style.display = "None"; document.getElementById ("Button2"). Style.display = "Aucun"; document.getElementById ("Button3"). Style.display = "Aucun"; } </ script>Ce cas n'est que quelques pratiques courantes et n'implique aucune technologie, mais est juste pour la commodité de l'utilisation de la prochaine fois.
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.