フォームデータを検出するJavaScriptインスタンスは非常にシンプルで実用的です。興味のある友達は見ることができます
<！doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> 1日あたりの1つのjavascriptインスタンス - フォームデータを検出</title> <style> [lole = "alert"] {background-color：#fcc; font-weight：bold;パディング：5px;ボーダー：1pxダッシュ＃000; } div {マージン：10px 0;パディング：5px;幅：400px;バックグラウンドカラー：#fff; } </style> <script> window.onload = function（）{document.getElementById（ "Thirdfield"）。onchange = validatefield; document.getElementById（ "FirstField"）。onblur = encorationfield; document.getElementById（ "testform"）。onsubmit = finalcheck; } function validatefield（）{removealert（）; if（！isnan（parsefloat（this.value））））{resetfield（this）; } else {badfield（this）; GenerateAlert（ "3番目のフィールドに無効な値を入力しました。105や3.45などの数値のみが許可されます」）; }} 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（有効）elem.removeattribute（ "aria-invalid"）; } function badfield（elem）{elem.parentnode.setattribute（ "style"、 "background-color＃fee"）; elem.setattribute（ "aria-invalid"、 "true"）; } function generatealert（txt）{var txtnd = document.createTextNode（txt）; msg = document.createelement（ "div"）; msg.setAttribute（ "role"、 "alert"）; msg.setattribute（ "id"、 "msg"）; msg.setattribute（ "class"、 "alert"）; msg.appendChild（txtnd）; document.body.AppendChild（MSG）; } function encorationfield（）{removealert（）; if（this.value.length> 0）{resetfield（this）; } else {badfield（this）; GenerateAlert（ "最初のフィールドに値を入力する必要があります"）; }} function finalCheck（）{//console.log("aaa "）; removealert（）; var fields = document.queryselectorall（ 'input [aria-invalid = "true"]'）; // var fields = document.queryselectorall（ "input [aria-invalid = 'true']"）; // error！ ！ ！ console.log（fields）; if（fields.length> 0）{generatealert（ "このフォームを送信する前に修正する必要があるフィールドエントリが誤っていない"）; falseを返します。 }} </scrip> </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> <"> </<> < "secondfield" type = "text" /> < /div> <div> <label for = "thirdfield"> 3番目のフィールド（数字）：< /label> <br /> <input id = "thirdfield" type = "text" /> < /div> <div> <div> <div> < /div> < </div> <入力タイプ= "submit" value = "send data"/> </form> </body> </html>