양식 데이터를 감지하는 JavaScript 인스턴스는 매우 간단하고 실용적입니다. 관심있는 친구들을 볼 수 있습니다
<! docType html> <html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 하루에 하나의 JavaScript 인스턴스-양식 데이터 감지> <style> [role = "alert"] {배경-콜로; 글꼴 중량 : 대담한; 패딩 : 5px; 테두리 : 1px 점선 #000; } div {마진 : 10px 0; 패딩 : 5px; 너비 : 400px; 배경색 : #fff; }. document.getElementById ( "FirstField"). OnBlur = 의무 필드; document.getElementById ( "testform"). OnSubmit = finalCheck; } 함수 validatefield () {removealert (); if (! isnan (parsefloat (this.value))) {resetfield (this); } else {badfield (this); GenerateAlert ( "세 번째 필드에서 유효하지 않은 값을 입력했습니다. 105 또는 3.45와 같은 숫자 값 만 허용됩니다"); }} 함수 removealert () {var msg = document.getElementById ( "msg"); if (msg) {document.body.removechild (msg); }} function resetfield (elem) {elem.parentNode.setAttribute ( "스타일", "배경색 : #fff"); var valid = elem.getAttribute ( "aria-invalid"); if (유효한) elem.removeattribute ( "aria-invalid"); } function badfield (elem) {elem.parentNode.setAttribute ( "스타일", "Background-Color#fee"); elem.setattribute ( "aria-invalid", "true"); } 함수 generatealert (txt) {var txtnd = document.creatextNode (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); } else {badfield (this); generatealert ( "첫 번째 필드에 값을 입력해야한다"); }} 함수 finalCheck () {//console.log("aaa "); removealert (); var fields = docum // var fields = docum ! ! Console.log (필드); if (fields.length> 0) {generatealert ( "이 양식을 제출하기 전에 수정 해야하는 잘못된 필드 항목이 있습니다"); 거짓을 반환합니다. }} </script> </head> <body> <form id = "testform"> <div> <label for = "firstfield">*First Field : </label> <br/> <input id = "FirstField"name = "Text"aria-required = "true"/> </div> <div> < "second ford"> Second Field "> = "Secondfield"type = "text" /> < /div> <div> <label for = "ThirdField"> Third Field (숫자) : < /label> <br /> <입력 ID = "ThirdField"name = "ThirdField"type = "text" /> < /div> <div> <label for = "Fourthfield"> 네 번째 필드 : < /div. <입력 유형 = "제출"값 = "데이터 보내기"/> </form> </body> </html>