مثيل JavaScript الذي يكتشف بيانات النموذج بسيطة للغاية وعملية. يمكن للأصدقاء المهتمين إلقاء نظرة
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> مثيل javaScript واحد يوميًا-اكتشف بيانات النموذج </title> <style> [alert "] خط الرصيف: جريئة ؛ الحشو: 5 بكسل ؛ الحدود: 1 بكسل متقطع #000 ؛ } div {margin: 10px 0 ؛ الحشو: 5 بكسل ؛ العرض: 400 بكسل ؛ خلفية اللون: #fff ؛ } </style> <script> window.onload = function () {document.getElementById ("Thirdfield"). onChange = ValatedField ؛ document.getElementById ("Firstfield"). Onblur = ComplatoryField ؛ document.getElementById ("testform"). onSubmit = FinalCheck ؛ } وظيفة ValidateField () {removealert () ؛ if (! isnan (parsefloat (this.value))) {ResetField (this) ؛ } آخر {badfield (this) ؛ generatealert ("لقد أدخلت قيمة غير صالحة في الحقل الثالث. فقط القيم الرقمية مثل 105 أو 3.45 مسموح بها") ؛ }} function removealert () {var msg = document.getElementById ("msg") ؛ if (msg) {document.body.removechild (msg) ؛ }} resetField (elem) {elem.parentNode.setAttribute ("style" ، "background-color: #fff") ؛ var apport = elem.getAttribute ("aria-invalid") ؛ إذا (صالح) elem.removeattribute ("aria-invalid") ؛ } وظيفة Badfield (elem) {elem.parentNode.setAttribute ("style" ، "background-color#fee") ؛ elem.setattribute ("aria-invalid" ، "true") ؛ } وظيفة generatealert (txt) {var txtnd = document.createTextNode (txt) ؛ msg = document.createElement ("div") ؛ msg.setattribute ("الدور" ، "التنبيه") ؛ msg.setAttribute ("id" ، "msg") ؛ msg.setattribute ("class" ، "Alert") ؛ msg.appendchild (txtnd) ؛ document.body.appendchild (msg) ؛ } وظيفة إلزاميفيلد () {removealert () ؛ if (this.value.length> 0) {resetField (this) ؛ } آخر {badfield (this) ؛ generatealert ("يجب إدخال قيمة في الحقل الأول") ؛ }} FinalCheck () {//console.log("aaa ") ؛ removeAlert () ؛ var fields = document.queryselectorall ('input [aria-invalid = "true"]') ؛ // var fields = document.queryselectorall ("input [aria-invalid = 'true']") ؛ // error! ! ! console.log (الحقول) ؛ if (fields.length> 0) {generatealert ("لديك إدخالات حقول غير صحيحة يجب إصلاحها قبل أن تتمكن من إرسال هذا النموذج") ؛ العودة كاذبة }}} </script> </head> <body> <form id = "testform"> <viv> <label for = "firstfield"> الحقل الأول: </label> <br/> <input id = "firstfield" name = "firstfield" type = "text" "secondfield" type = "text" /> </viv> <viv> <label for = "thirdfield"> الحقل الثالث (رقمي): < /label> <br /> <input id = "thirdfield" name = "typefield" type = "text" /> </viv> </viv> <input type = "submit" value = "إرسال البيانات"/> </form> </body> </html>