อินสแตนซ์ JavaScript ที่ตรวจพบข้อมูลแบบฟอร์มนั้นง่ายมากและใช้งานได้จริง เพื่อนที่สนใจสามารถดูได้
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> อินสแตนซ์ JavaScript หนึ่งครั้งต่อวัน Font-Weight: ตัวหนา; ช่องว่าง: 5px; เส้นขอบ: 1px ประ #000; } div {margin: 10px 0; ช่องว่าง: 5px; ความกว้าง: 400px; พื้นหลังสี: #FFF; } </style> <script> window.onload = function () {document.getElementById ("ThirdField"). onChange = ValidateField; document.getElementById ("FirstField"). onblur = Mandatoryfield; document.getElementById ("testform"). onsubmit = finalCheck; } function validateField () {removeAlert (); if (! isnan (parsefloat (this.value))) {resetfield (นี่); } else {badfield (นี่); GenerateAlert ("คุณป้อนค่าที่ไม่ถูกต้องในฟิลด์ที่สามเพียงค่าตัวเลขเช่น 105 หรือ 3.45 เท่านั้นที่ได้รับอนุญาต"); }} function removeAlert () {var msg = document.getElementById ("msg"); if (msg) {document.body.removechild (msg); }} ฟังก์ชั่น RESETFIELD (ELEM) {Elem.ParentNode.SetAttribute ("Style", "พื้นหลังสี: #FFF"); var valid = elem.getAttribute ("Aria-invalid"); if (ถูกต้อง) elem.removeattribute ("Aria-invalid"); } ฟังก์ชั่น badfield (elem) {elem.parentNode.setAttribute ("สไตล์", "ค่าธรรมเนียมพื้นหลัง#ค่าธรรมเนียม"); Elem.setAttribute ("Aria-invalid", "true"); } function generateAlert (txt) {var txtnd = document.createtextNode (txt); msg = document.createelement ("div"); msg.setAttribute ("บทบาท", "แจ้งเตือน"); msg.setAttribute ("id", "msg"); msg.setAttribute ("คลาส", "แจ้งเตือน"); msg.appendchild (txtnd); document.body.appendchild (MSG); } function mandatoryfield () {removeAlert (); if (this.value.length> 0) {resetfield (นี่); } else {badfield (นี่); GenerateAlert ("คุณต้องป้อนค่าลงในฟิลด์แรก"); }} ฟังก์ชั่น finalCheck () {//console.log("aaa "); RemoveAlert (); var fields = document.querySelectorAll ('อินพุต [aria-invalid = "true"]'); // var fields = document.querySelectorall ("อินพุต [aria-invalid = 'true']"); // ข้อผิดพลาด! - - console.log (ฟิลด์); ถ้า (fields.length> 0) {generatealert ("คุณมีรายการฟิลด์ที่ไม่ถูกต้องที่ต้องได้รับการแก้ไขก่อนที่คุณจะสามารถส่งแบบฟอร์มนี้"); กลับเท็จ; }} </script> </head> <body> <form id = "testform"> <div> <label for = "firstfield">*ฟิลด์แรก: </label> <br/> <อินพุต id = "firstfield" name = "firstfield" type = "text" aria-required = "true"/> "secondfield" type = "text" /> </div> <div> <label for = "thirdfield"> ฟิลด์ที่สาม (ตัวเลข): < /label> <br /> <อินพุต id = "thirdfield" name = "ThirdField" type = "text" /> < /div> <div> </div> <input type = "subment" value = "ส่งข้อมูล"/> </form> </body> </html>