Eine JavaScript -Instanz, die Formulardaten erkennt, ist sehr einfach und praktisch. Interessierte Freunde können einen Blick darauf werfen
<! DocType html> <html> <kopf> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <title> Eine javaScript-Instanz pro Tag-Erkennungsformulardaten </title> <Stil> [Rollen = "Alert"] {{Hintergrundfarbe: #fcc; Schriftgewicht: fett; Polsterung: 5px; Grenze: 1PX gestrichelt 000; } div {margin: 10px 0; Polsterung: 5px; Breite: 400px; Hintergrundfarbe: #fff; } </style> <script> window.onload = function () {document.GetElementById ("ThirdField"). Onchange = ValidateField; document.getElementById ("Firstfield"). onblur = obligatorischfield; document.getElementById ("testForm"). OnSubmit = Finalcheck; } function validateField () {removealert (); if (! isnan (Parsefloat (this.Value))) {Resetfield (this); } else {badfield (this); GenerateAlert ("Sie haben einen ungültigen Wert in das dritte Feld eingegeben. Nur numerische Werte wie 105 oder 3.45 sind zulässig"); }} function removealert () {var msg = document.getElementById ("msg"); if (msg) {document.body.removechild (msg); }} Funktion resetfield (elem) {elem.parentnode.setattribute ("style", "background-color: #fff"); var valid = elem.getAttribute ("aria-invalid"); if (gültig) Elem.removeAttribute ("aria-invalid"); } function badfield (elem) {elem.parentnode.setAttribute ("style", "background-color#fee"); Elem.Setattribute ("Aria-invalid", "wahr"); } function GenerateAlerT (txt) {var txtnd = document.CreateTextNode (txt); msg = document.createelement ("div"); msg.setattribute ("Rolle", "Alarm"); msg.setattribute ("id", "msg"); msg.setattribute ("Klasse", "Alarm"); MSG.AppendChild (txtnd); document.body.appendchild (msg); } function Meisterschaft () {removeAlerT (); if (this.Value.length> 0) {Resetfield (this); } else {badfield (this); GenerateAlert ("Sie müssen einen Wert in das erste Feld eingeben"); }} function FinalCheck () {//console.log("aaa "); removealert (); var fields = document.querySelectorAll ('Eingabe [aria-invalid = "true"]'); // var fields = document.querySelectorAll ("Eingabe [aria-invalid = 'true']"); // Fehler! ! ! console.log (fields); if (fields.length> 0) {generateAlert ("Sie haben falsche Feldereinträge, die behoben werden müssen, bevor Sie dieses Formular einreichen können"); false zurückgeben; }} </script> </head> <body> <form id = "testForm"> <div> <label for = "Firstfield">*Erstes Feld: </label> <br/> <input id = "firstField" name = "firstField" type = "text" arkefield "arkefield" -Aria-Erregung ". "SecondField" type = "text" /> < /div> <div> <label für = "drittfield"> drittes Feld (numerisch): < /label> <br /> <input id = "Thirdfield" name = "drittfield" type = "text" /> < /div> <div> <label für = "viertes."> viertes Feld: < /label> <br /> <input id = ". </div> <Eingabe type = "surug" value = "Daten senden"/> </form> </body> </html>