질문 : 입력 직후에 양식을 확인하는 방법, 제출 후 확인하는 대신 양식을 확인하는 대신 너무 불편합니다 (온라인 검색은 모호하거나 불완전합니다 ...)
방법 : 이를 고려하여 Xiaoke, Shuishanqi는 코드를 작성하고 Xiaoke의 개인적인 이해 (표기)를 추가합니다. 우회를 피하는 것은 후추기만을위한 것입니다. 모든 종류의 영웅을 비판하고 수정하십시오 ... (저자, Xiexie) - 테이블 테이블 양식 버전, 앞으로 jQuery 버전이있을 것입니다 ...
그것이 당신을 도와 주면, 시도해주세요 (o) 〃ao ~
스크린 샷 :
암호:
<! docType html> <html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <title> 사용자 등록 </title> <!-외부 CSS 스타일이 여기에 참조됩니다-> <link rel = "stylesheet"href = "css/stye.cs. type = "text/javaScript"> // 사용자 이름 함수의시기 적절한 확인 weckuse () {// 각 함수에서 확인 변수 정의는 양식이 제출 된 후 각 함수가 하나씩 통과하는지 여부를 확인할 수 있습니다. (다음과 동일) var 확인; var username = document.getElementById ( "사용자 이름"). 값; if (username.length> 18 || username.length <6) {alert ( "사용자 이름 입력은 불법입니다. 다시 입력하십시오!"); // 이것은 매우 훌륭합니다. 당신이 여기에 잘못된 장소에 들어갔으므로 이론적으로는 물론 여기에 계속 들어가야합니다. (여기서 계속 집중하십시오!) document.getElementById ( "username"). focus (); 점검 = 거짓; } else {document.getElementById ( "CheckText1"). innerHtml = "* 사용자 이름은 6-18 비트 문자 √"로 구성됩니다. check = true; } 반환 점검; } // 정규 표현식을 사용하여 암호가 함수 checkpwd () {var check; var reg = /[^a-za-z0-9 _]+ /; var regs = /^[a-za-z0-9_ /u4e00- /u9fa5] + $ /; var password = document.getElementById ( "password"). 값; if (password.length <6 || password.length> 18 || regs.test (password))) {alert ( "비밀번호 입력은 불법, 다시 들어가십시오!"); document.getElementById ( "password"). focus (); 점검 = 거짓; } else {document.getElementById ( "CheckText2"). innerHtml = "* 비밀번호는 6-18 자로 구성되며 문자, 숫자 및 구두점 마크를 포함해야합니다. √"; check = true; } 반환 점검; } // 비밀번호가 일치하지 않는지 확인하십시오! 함수 checkpwdc () {var check; var password = document.getElementById ( "password"). 값; var pwdc = document.getElementById ( "pwdc"). 값; if (password! = pwdc) {alert ( "비밀번호가 입력 될 때 비밀번호가 일치하지 않으면 다시 입력하십시오!"); document.getElementById ( "pwdc"). focus (); 점검 = 거짓; } else {document.getElementById ( "CheckText3"). innerHtml = "* 비밀번호를 다시 입력하십시오 √"; check = true; } 반환 점검; } // 함수를 제출할 때 사용자 카테고리 확인 checkut () {var check; if (document.getElementById ( "seluser"). selectedIndex == 0) {alert ( "사용자 유형을 선택하십시오!"); document.getElementById ( "seluser"). focus (); 점검 = 거짓; } else {document.getElementById ( "CheckText4"). innerHtml = "* 사용자 유형 √"; check = true; } 반환 점검; } // 함수를 제출할 때 사용자 성별 확인 checkgender () {var check; var gender = ""; // 이름으로 모든 태그를 가져옵니다. 섹스 var sex = document.getElementsByName ( "sex"); // (var i = 0; i <sex.length; ++ i) {// 섹스를 선택하면 (sex [i] .checked) gender = sex [i] .value; } if (gender == "") {alert ( "성별을 선택하십시오!"); 점검 = 거짓; } else {docum check = true; } 반환 점검; } // 생년월일 날짜를 적시에 확인합니다 checkDate () {var check; if (document.getElementById ( "txtDate"). value == "") {alert ( "생년월일을 작성하십시오!"); document.getElementById ( "txtDate"). focus (); 점검 = 거짓; } else {document.getElementById ( "CheckText6"). innerHtml = "* 생년월일 날짜를 선택하십시오."; check = true; } 반환 점검; } // 관심사 및 취미 기능을 적시에 확인합니다 CheckHobby () {var check; var Hobby = 0; // objnum은 Hobby var objnum = document.getElementsByName ( "Hobby")을 가진 모두 입력 태그입니다. // (var i = 0; i <objnum.length; ++ i)에 대한 모든 취미 태그를 전송 {// 취미 태그가 선택되었는지 여부 (objnum [i] .checked == true) Hobby ++; } // 선택한 취미 태그가있는 경우 (Hobby> = 1) {Document.getElementById ( "CheckText7"). InnerHtml = "* Hobby √"; check = true; } else {Alert ( "취미를 채우십시오!"); 점검 = 거짓; } 반환 점검; } // 정규 표현식 확인 이메일 (적시) 함수 checkmail () {var check; // 이메일의 정규 표현식 var e1 = document.getElementById ( "이메일"). value.indexof ( "@", 0); var e2 = document.getElementById ( "이메일"). value.indexof ( ".", 0); if (email == ""|| (e1 == -1 || e2 == -1) || e2 <e1) {alert ( "e_mail 입력 오류!"); document.getElementById ( "이메일"). focus (); 점검 = 거짓; } else {document.getElementById ( "CheckText8"). innerHtml = "* 일반적으로 사용되는 이메일을 작성하십시오.이 이메일은 비밀번호 √"; check = true; } 반환 점검; } // 자체 소개 함수의시기 적절한 검증 checkintro () {var check; var intro = document.getElementById ( "소개"). 값; if (intro.length> 100) {alert ( "단어 수는 한계를 초과합니다!"); 점검 = 거짓; } else {document.getElementById ( "CheckText9"). innerHtml = "* 100 단어로 제한됩니다"; document.getElementById ( "CheckText9"). focus (); check = true; } 반환 점검; } // 양식을 제출할 때 모든 검증이 수행됩니다 (확인 실패가 실패하면 양식 제출을 방지하기 위해 False로 반환됩니다) 함수 check () {var check = checkus () && checkpwdc () && checkut () && checkgender () && checkhobby () && checkmail () && checkmail (); 반환 점검; }. -> <form action = "#"method = "get"onsubmit = "return check ()"> <fieldset> <legend> 양식의 적시 검증의 작은 예 </legend> <table align = "left"style = "background-image : url ( 'img/4.jpg');"; > <tr> <td> username : </td> <td> <input type = "text"name = "username"id = "username"onchange = "checkuse ()" "/> </td> <td id ="checkText1 ">* 사용자 이름은 6-18 자 </td> </td> <!-onblur 핸드러 : on element 또는 than than than than than than than handlur handler : onchange 이벤트 핸들러 : 양식 요소가 초점을 맞추고 내용이 변경 될 때 트리거되었습니다.> <!-다음은 동일합니다-> <tr> <td> 암호 : </td> <td> <입력 유형 "password"name = "password"id = "onchange"onchange = "checkpwd ()"/> </td> <td id = "checktext2"> 구두점 마크 </td> </tr> <tr> <td> 비밀번호 확인 : </td> <td> <입력 유형 = "비밀번호"이름 = "pwdc"id = "pwdc"onchange = "checkpwdc ()" "/> </td> <td id ="checktext3 ">에 다시 입력하십시오. </td> <td> <select id = "seluser"onblur = "cheep ()"> <옵션 이름 = "seluser"value = "0"> </옵션> <옵션 이름 = "seluser"value = "1"> admin </옵션> <옵션 이름 = "seluser"value = "2"> ordential </select> <td> <td id = "woney wone wone wone wone stett 유형 </td> </tr> <td> <td> 성별 : </td> <td> <입력 유형 = "radio"value = "1"name = "sex"onchange = "checkgender ()"/> male <입력 유형 = "radio"value = "2"name = "sex"weckgender () ""* weft selets in here in stect 성별 </td> </tr> <tr> <td> 생년월일 : </td> <td> <입력 유형 = "날짜"이름 = "날짜"id = "txtDate"weckDate () ""/> </td> <td id = "CheckText6"> 출생 날짜 </td> <td> <td> <td> <td> <td> <td> <입력 유형 = "checkbox"name = "Hobby"value = "reading"onchange = "CheckHobby ()"> 읽기 <입력 유형 = "입력 상자"이름 = "Hobby"value = "music"onchange = "CheckHobby ()"> music <input type = "checkbox"name = "Hobby"value = "sports" "checkhobby ()"> sports = "checkhobby ()"> id = "checktext7">* 취미를 선택하십시오 </td> </td> </tt> <ttr> <td> 이메일 : </td> <td> <input type = "text"name = "email"id = "email"onchange = "checkemail ()"/> </td> <td id = "checkText8"* <tr> <td> 자체 소개 : </td> <td> <TextArea cols = "30"rows = "3"3 "name ="소개 "id ="소개 "wect-introduction ... </textarea> </td> <td ="checkText9 "> 100 단어로 제한됩니다. colspan = "2"align = "center"> <input type = "제출"name = "제출"value = "제출"/> <입력 유형 = "Reset"name = "reset"value = "reset"/> </td> </trave> </fieldset> </form> </body> </html>CSS 스타일 :
입력 : Focus, Textarea : Focus {Border : 1px Solid #F00; 배경 : #FCC; } textArea {너비 : 230px; 높이 : 50px; } 바디 {font-size : 15px; /* 글꼴 스타일*/ 글꼴-가족 : Microsoft Yahei; } 선택 옵션 {font-size : 10px; Font-Family : Microsoft Yahei; }위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.