Une instance JavaScript qui détecte les données de formulaire est très simple et pratique. Les amis intéressés peuvent jeter un œil
<! Doctype html> <html> <éadf> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <t titre> une instance javascript par jour - détection des données de formulaire </ title> <ystyle> [role = "alert"] {background-color: #fcc; Police-poids: Bold; rembourrage: 5px; Border: 1px en pointillé # 000; } div {margin: 10px 0; rembourrage: 5px; Largeur: 400px; Color d'arrière-plan: #FFF; } </ style> <cript> window.onload = function () {document.getElementById ("ThirdField"). OnChange = ValidateField; document.getElementById ("Firstfield"). OnBlur = MandatoryField; document.getElementById ("testform"). onSubmit = finalCheck; } fonction validatefield () {removeaRert (); if (! Isnan (parsefloat (this.value))) {resetField (this); } else {badfield (this); GeneratElerert ("Vous avez entré une valeur non valide dans le troisième champ. Seules les valeurs numériques telles que 105 ou 3,45 sont autorisées"); }} fonction RemoveRert () {var msg = document.getElementById ("msg"); if (msg) {document.body.removechild (msg); }} fonction resetfield (elem) {elem.parentNode.SetAttribute ("style", "background-Color: #fff"); var valide = elem.getAttribute ("aria-invalid"); if (valide) elem.reMoveAttribute ("aria-invalid"); } fonction badfield (elem) {elem.parentNode.setAttribute ("style", "background-color # fee"); elem.setAttribute ("aria-invalid", "true"); } fonction generateAlert (txt) {var txtnd = document.createTextNode (txt); msg = document.CreateElement ("div"); msg.setAttribute ("rôle", "alert"); msg.setAttribute ("id", "msg"); msg.setAttribute ("classe", "alert"); msg.appendChild (txtnd); Document.Body.ApendChild (MSG); } fonction obligatoryfield () {removeRert (); if (this.value.length> 0) {resetField (this); } else {badfield (this); GenerAtElert ("Vous devez saisir une valeur dans le premier champ"); }} fonction finalCheck () {//console.log("aaaa "); RemoveAlert (); var fields = document.QuerySelectorAll ('input [aria-invalid = "true"]'); // var fields = document.QuerySelectorAll ("Input [aria-invalid = 'true']"); // erreur! ! ! console.log (champs); if (fields.length> 0) {GenerateAlert ("Vous avez des entrées de champs incorrectes qui doivent être fixées avant de pouvoir soumettre ce formulaire"); retourne false; }} </ script> </ head> <body> <form id = "testform"> <div> <label for = "firstfield"> * premier champ: </ label> <br /> <input id = "firstfield" name = "firstfield" type = "text" aria-required = "true" /> </ div> <v> <label pour = "secondfield"> second champ: </ label> "secondfield" type = "text" /> </ div> <div> <étiquette pour = "Thirdfield"> Field Third (Numeric): </ Label> <br /> <Input id = "Thirdfield" name = "Thirdfield" Type = "Text" /> </ div> <v> <label for = "FourthField"> Fourth Field: </ Label> <Br /> <Entrée ID = "Fourthfield </div> <input type = "soumi" value = "Envoyer des données" /> </ form> </ body> </html>