Question: Comment vérifier le formulaire immédiatement après la contribution, au lieu de le vérifier après l'avoir soumis, est si gênant (les recherches en ligne sont soit ambiguës ou incomplètes ...)
Méthode: Compte tenu de cela, Xiaoke, Shuishanqi, complétez le code et ajoutez la compréhension personnelle (notations) de Xiaoke. Ce n'est que pour les retardataires d'éviter les détours. Veuillez critiquer et corriger toutes sortes de héros ... (veuillez noter l'auteur, Xiexie) - - Version du formulaire de table de table, et il y aura une version jQuery à l'avenir ...
Si cela vous aide, veuillez essayer (o) 〃ao ~
Capture d'écran:
Code:
<! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <tight> user enregistrement </tape> <! - Le style CSS external est référé ici -> <link rel = "Styleheet" href = "css / style.cs" type = "text / javascript"> // Vérification en temps opportun de la fonction de nom d'utilisateur Checkuse () {// Définition de la variable de vérification dans chaque fonction est de pouvoir vérifier si chaque fonction passe une par une après la soumission du formulaire, ce qui est très bon. (Identique à ce qui suit) VAR CHECK; var username = document.getElementById ("nom d'utilisateur"). valeur; if (username.length> 18 || username.length <6) {alert ("l'entrée du nom d'utilisateur est illégale, veuillez vous réintégrer!"); // C'est très merveilleux. Depuis que vous êtes entré dans le mauvais endroit ici, alors en théorie, bien sûr, vous devez continuer à entrer ici. (Continuez à se concentrer ici!) Document.GetElementById ("nom d'utilisateur"). Focus (); check = false; } else {document.getElementById ("CheckText1"). innerHtml = "* Le nom d'utilisateur se compose de caractères 6-18 bits √"; check = true; } return chèque; } // Utilisez des expressions régulières pour déterminer si le mot de passe répond à la fonction CheckPwd () {var chèque; var reg = / [^ a-za-z0-9 _] + /; var regs = / ^ [a-za-z0-9_ / u4e00- / u9fa5] + $ /; var mot de passe = document.getElementById ("mot de passe"). valeur; if (password.length <6 || mot de passe.length> 18 || regs.test (mot de passe)) {alert ("l'entrée de mot de passe est illégale, veuillez vous réintégrer!"); document.getElementById ("mot de passe"). focus (); check = false; } else {document.getElementById ("CheckText2"). InnerHtml = "* Le mot de passe se compose de 6 à 18 caractères et doit contenir des lettres, des chiffres et des marques de ponctuation √"; check = true; } return chèque; } // Vérifiez si le mot de passe est incohérent! fonction checkPwdc () {var chèque; var mot de passe = document.getElementById ("mot de passe"). valeur; var pwdc = document.getElementById ("pwdc"). valeur; if (mot de passe! = pwdc) {alert ("Le mot de passe est incohérent lorsque le mot de passe est entré, veuillez rentrer!"); document.getElementById ("pwdc"). focus (); check = false; } else {document.getElementById ("CheckText3"). innerHtml = "* Veuillez saisir à nouveau votre mot de passe √"; check = true; } return chèque; } // Vérifier la fonction de catégorie utilisateur CheckUt () {var check; if (document.getElementById ("Seluser"). SelectedIndex == 0) {alert ("Veuillez sélectionner le type d'utilisateur!"); document.getElementById ("Seluser"). focus (); check = false; } else {document.getElementById ("CheckText4"). innerHtml = "* Veuillez sélectionner le type d'utilisateur √"; check = true; } return chèque; } // Vérifiez la fonction de genre utilisateur CheckGender () {var check; var Gender = ""; // Obtenez toutes les balises avec le nom Sex var Sex = document.getElementsByName ("Sex"); // Transférer ces balises avec le nom Sex pour (var i = 0; i <sexe.length; ++ i) {// Si un sexe est sélectionné, enregistrez si (sexe [i] .Chenced) Sexe = sexe [i] .Value; } if (sexe == "") {alert ("Veuillez sélectionner le genre!"); check = false; } else {document.getElementById ("CheckText5"). innerHtml = "* Veuillez sélectionner votre genre√"; check = true; } return chèque; } // Vérifiez en temps opportun la date de la fonction de naissance CheckDate () {var chèque; if (document.getElementById ("txtDate"). Value == "") {alert ("Veuillez remplir la date de naissance!"); document.getElementById ("txtDate"). focus (); check = false; } else {document.getElementById ("CheckText6"). innerHtml = "* Veuillez sélectionner votre date de naissancef."; check = true; } return chèque; } // Vérifiez en temps opportun la fonction d'intérêts et de passe-temps CheckHoBBy () {var Check; Var Hobby = 0; // Objnum est toutes des balises d'entrée avec le nom Hobby var objnum = document.getElementsByName ("Hobby"); // Transférer toutes les balises de passe-temps pour (var i = 0; i <objnum.length; ++ i) {// juger si une balise de hobby est sélectionnée si (objnum [i] .Coched == true) hobby ++; } // S'il y a une balise de passe-temps sélectionnée if (hobby> = 1) {document.getElementById ("CheckText7"). InnerHtml = "* Veuillez sélectionner votre passe-temps √"; check = true; } else {alert ("Veuillez remplir le passe-temps!"); check = false; } return chèque; } // Email de vérification d'expression régulière (en temps opportun) Fonction Checkmail () {var chèque; // Expression régulière de l'e-mail var e1 = document.getElementById ("Email"). Value.Indexof ("@", 0); var e2 = document.getElementById ("e-mail"). valeur.indexof (".", 0); if (email == "" || (e1 == - 1 || e2 == - 1) || e2 <e1) {alert ("E_Mail Erreur d'entrée!"); document.getElementById ("e-mail"). focus (); check = false; } else {document.getElementById ("CheckText8"). innerHtml = "* Veuillez remplir l'e-mail couramment utilisé, qui sera utilisé pour récupérer le mot de passe √"; check = true; } return chèque; } // Vérification en temps opportun de la fonction d'auto-introduction CheckIntro () {var check; var intro = document.getElementById ("Introduction"). Valeur; if (intro.length> 100) {alert ("Le nombre de mots dépasse la limite!"); check = false; } else {document.getElementById ("CheckText9"). innerHtml = "* Limited à 100 mots"; document.getElementById ("CheckText9"). focus (); check = true; } return chèque; } // Toutes les vérifications sont effectuées lors de la soumission du formulaire (si une vérification échoue, elle sera renvoyée à False pour empêcher la soumission du formulaire) Fonction Check () {var CheckAr = CheckUse () && checkPwdd () && checkPwdc () && checkUt () && checkGender () && checkinTo () & checkhobBy () && checkmail () && checkin ();););) &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & checkro (););) Retour chèque; } </ script> </ head> <body> <! - <form action = "Jump page" method = "get" | "post" name = "form name" target = "ouvrir avec" ENCTYPE = "multipart / form-data"> -> <! - onSubmit () La fonction soumet un formulaire lorsque la valeur de retour est vraie. -> <form action = "#" méthode = "get" onSubmit = "return check ()"> <fieldset> <gend> petit exemple de vérification opportune de la forme </gend> <table align = "Left" style = "background-image: url ('img / 4.jpg');" > <tr> <td> nom d'utilisateur: </td> <td> <input type = "text" name = "username" id = "username" onchange = "checkuse ()" /> </td> <td id = "checkText1"> * username se compose de 6-18 caractères </ td> </ / tr> <! ONCHANGE EVETS HANDER: déclenché lorsqu'un élément de formulaire se concentre et que le contenu change -> <! - Ce qui suit est le même -> <tr> <td> mot de passe: </td> <td> <entrée type = "mot de passe" name = "mot de passe" id = "mot de passe" OnChange = "CheckPwd ()" /> </td> <td id = "checkTex Marks </td> </ tr> <tr> <td> confirme le mot de passe: </td> <td> <entrée type = "mot de passe" name = "pwdc" id = "pwdc" onchange = "checkPwdc ()" /> </td> <td id = "checkText3"> * Veuillez saisir votre mot de passe </td> </r> <select id = "seUser" onblur = "checkUt ()"> <option name = "seUser" value = "0"> s'il vous plaît sélectionnez </ option> <option name = "seUser" value = "1"> admin </ option> <option name = "seUser" value = "2"> utilisateur ordinaire </ option> </ select> </td> <td = "checkText4"> * Veuillez sélectionner Type </td> <td = "ChecktETH <tr> <td> Gender: </td> <td> <entrée type = "radio" value = "1" name = "sex" onChange = "CheckGender ()" /> mâle <entrée = "radio" value = "2" name = "sexe" onChange = "Checkgender ()" /> Femme </ td> <td id = "CheckText5"> * S'il vous plaît sélectionnez votre Gender </ td> <tr> <tr> <Td> Date de naissance: </td> <td> <Type d'entrée = "DATE" NAME = "DATE" ID = "TXTDATE" ONBLUR = "CHECKDATE ()" /> </ TD> </ TD ID = "CheckText6"> * Veuillez sélectionner votre date de naissance </td> </tr> <TR> <TD> Hôtes "Hosts" Value = "Reading" onChange = "CheckHoBBy ()"> Reading <Input Type = "Checkbox" Name = "Hobby" value = "Music" OnChange = "CheckhobBy ()"> Music <Input Type = "Checkbox" Name = "Hobby" Value = "Sports" OnChange = "Checkhobby ()"> Sports </ TD> <td = "CheckText7"> * Sélectionnez vos gobelets </ TD> <TD = " <Ttr> <Td> Email: </td> <td> <entrée type = "text" name = "e-mail" id = "e-mail" onChange = "CheckEmail ()" /> </td> <td id = "checkText8"> * Veuillez remplir l'e-mail couramment utilisé, qui sera utilisé pour le mot de passe </td> </p> <Tr> <Td> Auto-introduction: </td> </p> <Tr> <Td> Auto-introduction: </td> </ TD> <TR> <TD> cols = "30" rows = "3" name = "introduction" id = "introduction" onchange = "checkIntro ()"> Ceci est une auto-introduction ... </ textarea> </td> <td id = "checkText9"> * Limited à 100 mots </td> </ tr> <tr> <td Colspan = "2" ALIGNE = "Centre"> <fant type = "soumettre" value = "soumi" /> <input type = "reset" name = "reset" value = "reset" /> </td> </tr> </ table> </ fieldset> </ form> </ body> </html>Style CSS:
Entrée: focus, textarea: focus {border: 1px solide # f00; Contexte: #fcc; } textarea {width: 230px; hauteur: 50px; } body {Font-Size: 15px; / * Style de police * / Font-Family: Microsoft Yahei; } Sélectionnez l'option {Font-Size: 10px; Font-Family: Microsoft Yahei; }Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.