Contoh JavaScript yang mendeteksi data formulir sangat sederhana dan praktis. Teman yang tertarik bisa melihatnya
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/> <Title> satu instance JavaScript per hari-Deteksi Data Formulir </iteme> [gaya = "Peringatan"] {latar belakang: #fcc; font-weight: tebal; padding: 5px; Perbatasan: 1px putus #000; } div {margin: 10px 0; padding: 5px; Lebar: 400px; Latar Belakang-Color: #FFF; } </tyle> <script> window.onload = function () {document.geteLementById ("Thirdfield"). Onchange = ValidateField; document.geteLementById ("firstfield"). onblur = wajib; document.geteLementById ("testForm"). Onsubmit = finalCheck; } function validateField () {removeAlert (); if (! isnan (parsefloat (this.value))) {resetfield (ini); } else {badfield (ini); GenerateAlert ("Anda memasukkan nilai yang tidak valid di bidang ketiga. Hanya nilai numerik seperti 105 atau 3,45 yang diizinkan"); }} function removeAlert () {var msg = document.geteLementById ("msg"); if (msg) {document.body.removechild (msg); }} function resetfield (elem) {elem.parentnode.setAttribute ("style", "background-color: #fff"); var valid = elem.getAttribute ("aria-invalid"); if (valid) elem.removeattribute ("aria-invalid"); } function badfield (elem) {elem.parentnode.setAttribute ("style", "background-color#fee"); elem.setAttribute ("aria-invalid", "true"); } function generateLert (txt) {var txtnd = document.createTextNode (txt); msg = document.createElement ("div"); msg.setAttribute ("peran", "peringatan"); msg.setAttribute ("id", "msg"); msg.setAttribute ("class", "alert"); msg.appendChild (txtnd); document.body.appendchild (msg); } function MandatoryField () {removeAlert (); if (this.value.length> 0) {resetfield (this); } else {badfield (ini); generateLeT ("Anda harus memasukkan nilai ke bidang pertama"); }} Fungsi finalCheck () {//console.log("aaa "); removeAlert (); var bidang = document.querySelectorAll ('input [aria-invalid = "true"]'); // var bidang = document.queryselectorAll ("input [aria-invalid = 'true']"); // error! Lai Lai console.log (bidang); if (fields.length> 0) {generateLeT ("Anda memiliki entri bidang yang salah yang harus diperbaiki sebelum Anda dapat mengirimkan formulir ini"); mengembalikan false; } } </script> </head> <body> <form id = "testform"> <div> <label for="firstfield">*first Field:</label><br /> <input id="firstfield" name = "firstfield" type = "text" aria-required = "true" /> </div> <div> <label for="secondfield">Second Field:</label><br /> <input id="secondfield" name = "secondfield" type = "text" /> </div> <div> <label for="thirdfield">Third Field(numeric):</label><br /> <input id="thirdfield" name = "thirdfield" type = "text" /> </div> <div> <label for="fourthfield">Fourth Field:</label><br /> <input id="fourthfield" name = "fourthfield" type = "text" /> </div> <input type = "kirim" value = "kirim data"/> </form> </body> </html>