이 기사는 참조를위한 양식 이벤트 처리를위한 JavaScript의 일반적인 방법을 공유합니다. 특정 내용은 다음과 같습니다
1. 형태 객체에 액세스하는 일반적인 방법 :
① : <form> 요소의 ID 속성에 따라;
var myform = document.getElementById ( "myformid"); // myFormID는 <form> 요소의 ID입니다.
② : <form> 요소의 이름 속성에 따라;
var myform = document.forms [ "myformname"]; // myFormName은 <form> 요소의 이름입니다.
③ : 양식 이름을 직접 사용하여 양식에 액세스하십시오.
var myform = document.myformname; // myFormName은 <form> 요소의 이름입니다.
2. 양식에 대한 일반적인 이벤트 :
OnSubmit 이벤트 : 이 이벤트는 "제출"버튼을 클릭 할 때 트리거되며 양식 제출을 방지 할 수 있습니다. 예 : 양식 검증;
ONCHANGE 이벤트 : 이 이벤트는 사용자가 컨텐츠를 변경하고 텍스트 상자가 초점을 잃으면 트리거됩니다.
예 : 양식 제출
프론트 데스크 인터페이스 :
전경 인터페이스 코드 :
<form name = "myform"action = "javaScript : alert ( 'Registered a Success!');" 메소드 = "post"onsubmit = "return yanzheng ();"> <table> <tbody> <td> <td> username : </td> <td> <input name = "username"id = "username"type = "text"/</td> <td> <td> <td> <p style = "color : #ff0000">*username donge is. </td> </tr> <tr> <td> 비밀번호 : </td> <td> <입력 ID = "Password"onchange = "assad <입력 id = "button2"type = "button"value = "medium"style = "back id = "age"type = "text"/> </td> <td> <입력 id = "age"type = "text"/> </td> <p style = "color : #ff0000">*</p> </td> </tr> <td> <td> gender : </td> <td> <input name = "sex" "sex" "radio" "radio" "sex" /> male <input name = "sex"type = "radio"value = "female"/> female </td> <td> align = "left"> <p style = "color : #ff0000">*</p> </td> </td> <tr> <td> 내용 : </td> <td> <입력 유형 = "checkbox" "value" "news" "news" "news" "news" name = "content"value = "Entertainment"/> Entertainment <입력 유형 = "checkbox"name = "content"value = "Education"/> Entertainment </td> <td align = "left"> <p style = "color : #ff0000"> </p> </td> </td> <td> <td> value = "1"> 초등학교 </옵션> <옵션 값 = "2"> 노인 스쿨 </옵션> <옵션 value = "3"> 대학 </옵션> <옵션 값 = "4"> 대학 </옵션> </select> </td> <td align = "left"> <p style = "color : #ff0000"> </p> <td> <select name = "like"size = "6"multiple = "multip"> <옵션 값 = "1"> 농구> <옵션 값 = "2"> 축구 </옵션> <옵션 value = "3"> 배구> <옵션 값 = "4"> running </옵션> <옵션 value = "5"> hilling> align = "left"> <p style = "color : #ff0000">***</p> </td> </td> <tr> <td> < "button4"type = "button"onclick = "checkInfo ()"value = "view"/</td> <td> <입력 유형 = "name ="value = "value ="value = "value ="value = "value" <입력 유형 = "제출"이름 = "tijiao"value = "register"/> </td> <td> <입력 유형 = "Reset"name = "reset"value = "Reset"/> </td> </tr> </tbody> </table> </form>
JS 스크립트 :
<script type = "text/javaScript"> 함수 Yanzheng () {var b; var a = document.getElementById ( "사용자 이름"); // 사용자 이름 값 가져 오기 var p = document.getElementById ( "password"); // 비밀번호 값 가져 오기 var age = myform.age.value; // if (a.value.length <5 || a.value.length> 10) {alert ( "입력 한 사용자 이름이 잘못된 형식입니다!"); 거짓을 반환합니다. } else if (p.value.length <5) {alert ( "비밀번호 길이는 5!"); 거짓을 반환합니다. } else if (! checkage (age)) {return false; } else {return true; }} 함수 checkage (a) {// Age var ch, age; for (var i = 0; i <a.length; i ++) {ch = a.charat (i); if (ch < "0"|| ch> "9") {alert ( "연령 옵션에 숫자를 입력하십시오!"); 거짓을 반환합니다. }} age = parseint (a); if (age <10 || age> 100) {alert ( "나이는 사실이 아닙니다!"); 거짓을 반환합니다. } true를 반환합니다. } 함수 checkInfo () {// 모든 정보 표시 var username = myform.username.value; // 사용자 이름 var password = myform.password.value를 가져옵니다. // 비밀번호 가져 오기 var age = myform.age.value; // Age var sex = myform.sex를 얻습니다. // 성별 var var osx = ""; // 성별 var content = myform.content를 얻는 옵션을 설정합니다. // 콘텐츠 가져 오기 var ocontent = ""; // 컨텐츠를 얻는 옵션을 설정 var var eduleave = myform.edu_level; // 교육 받기 var oedu = ""; // 교육을받을 수있는 옵션을 설정합니다. var intersent = myform.like; // 양식 취미 var var = ""; // (var i = 0; i <sex.length; i ++) {// gender if (sex [i] .checked) {ossx = sex [i] .value; }} for (var i = 0; i <content.length; i ++) {// content if (content [i] .checked) {ocontent += content [i] .value +""; }} for (var i = 0; i <eduleave.length; i ++) {// Educational if (eduleave.SelectedIndex> = 0) {OEDU = eduleave.Options [eduleave.SeleaveCectedIng] .Text; }} for (var i = 0; i <intersent.length; i ++) {// Hobbies if (intersent.option [i] .selected) {olike += intersent.options [i] .text +""; }} alert ( "사용자 이름은" + username + "/n 비밀번호는 다음과 같습니다." + password + "/n age is :" + age + "/n 성별은 :" + ocontent + "/n 교육은 다음과 같습니다." + Oedu + "/n Hobbies는 다음과 같습니다. } function passwordLeave () {var passwordLeavel = myForm.Password.Value; if (passwordLeavel.length == "") {document.getElementById ( "button1"). style.display = "none"; document.getElementById ( "button2"). style.display = "none"; document.getElementById ( "button3"). style.display = "none"; } else {if (passwordLeavel.Length <= "5") {document.getElementById ( "button1"). Style.display = ""; document.getElementById ( "button2"). style.display = "none"; document.getElementById ( "button3"). style.display = "none"; } else if (passwordLeavel.Length <= "10") {document.getElementById ( "button1"). Style.Display = ""; document.getElementById ( "button2"). style.display = ""; document.getElementById ( "button3"). style.display = "none"; } else {document.getElementById ( "button1"). style.display = ""; document.getElementById ( "button2"). style.display = ""; document.getElementById ( "button3"). style.display = ""; }}} 함수 startBody () {document.getElementById ( "button1"). style.display = "none"; document.getElementById ( "button2"). style.display = "none"; document.getElementById ( "button3"). style.display = "none"; } </스크립트>이 사례는 몇 가지 일반적인 관행 일 뿐이며 어떤 기술도 포함되지 않지만 다음에 사용하는 편의성을위한 것입니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.