이것은 매우 복잡한 배경 검증 및 JavaScript 정규 표현이 아닙니다. 나는이 기술, 간단한 배경 수신 및 점프를 간단히 소개하고 그것을 확인하는 방법을 이해합니다. 나중에 특정 기술에 대한 블로그를 계속 작성하겠습니다. 나는 여전히 공부하고있다.
형성 검증 1- 단순한 검증
간단한 확인을 위해서는 사용자 이름이 ABCD 여야하며 비밀번호 길이는 6보다 크거나 동일해야합니다.
그런 다음 사용자가 입력 한 데이터를 기반으로 프롬프트가 나중에 제공됩니다.
코드 데모 :
<html> <head> <title> dhtml 기술 데모 --- 양식 검증 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <cript> 기능 checkusername () {// alert ( "aa"); document.getElementsByName ( "username") [0]; var name = oosernamenode.value; //이 유형의 값 = "텍스트"값은 미래에 상자의 문자입니다. // 배경이있을 때 Ajax 기술을 통해 배경에서 요청해야합니다. abcdif (name == "abcd") {docut checkpwd () {var ouserpwdnode = docum 요구 사항 ".fontColor ("green ");} else {document.getElementById ("userpwdspan "). innerHtml ="비밀번호 길이는 6보다 크거나 같아야합니다 ".fontColor ("red "); }}} </script> </head> <hod> <form> <!-객체가 입력 초점을 잃을 때 Onblur가 발생합니다. -> username : <input type = "text"name = "username"onblur = "checkusername ()"/> <span id = "usernamepan"> </span> <br/> <br/> <!-비밀번호는 여기에서 유형 = "text"로 사용됩니다. 실제로, type = "password"의 비밀번호를 사용해야합니다 -> 비밀번호 : <input type = "text"name = "pwd"onblur = "Checkpwd ()"/> <span id = "userpwdspan"> </span> </body> </html> </html>360 브라우저 8.1 데모 결과 :
사용자 이름은 규칙을 준수하지 않습니다.
비밀번호는 규칙을 준수하지 않습니다.
등록 양식 2- 정규 표현식 검증
코드 데모 :
<html> <head> <title> DHTML 기술 데모 --- 등록 양식의 확인-JS에서 정규 표현식을 사용하는 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <script type = "text/javaScript"> var {var ousernamenode = document.getElementsByName ( "username") [0]; var username = ousernamenode.value; // 정기 테스트 사용 var reg = new regexp ( "[az] {4}", "i"); // 4 연속 문자를 포함하는 것은 괜찮습니다. regexp ( "^ [az] {4} $", "i"); // 4 개의 연속 문자 만 포함되어 있습니다. "i"의 이중 인용문은 생략 할 수 없음 //^를 의미합니다. 시작 $는 end var ousernamespan = document.getEnmespan ( "usernamespan")을 의미합니다. if (reg.test (username)) {oosernamespan.innerhtml = "사용자 이름은 올바르게 형식화됩니다".fontcolor ( "green");} else {ousernamespan.innerhtml = "username format error".fontcolor ( "red") <! js의 표현식-> <script type = "text/javaScript"> // var reg =/^[0-9] {6} $/; // 메소드 1 var reg = new regexp ( "^[0-9] {6} $"); // 메소드 2 var str = "123456"; var bres = reg.test (str); // 111은 검증을 위해 정규 표현식 객체에서 메소드를 사용하여 일치하는지 판단 할 수 있습니다. 이 기능은 Java // alert (bres)의 String 클래스의 matches () 메소드와 유사합니다. // true // 222 정기 테스트를 위해 String 객체의 메소드를 사용합니다. 일치에 도달하지 않으면 RES는 NULL입니다. // alert (res); // 123456 // 일치 메소드에서 반환 된 배열에는 입력, 색인 및 lastIndex의 세 가지 속성이 있습니다. // ★ 작은 세부 사항 --- 새로운 regexp () 메소드를 사용할 때 특수 문자가 피해야합니다. // var reg2 =/^/d {6} $/; // "/"var reg2 = new regexp ( "^/d {6} $")를 피할 필요가 없습니다. // ※※ "/"는 "/"에 주목하십시오. // ▲ ▲ 탬에 대한 참고 사항 위의 문장은 잘못되었으며 다음과 같이 작성되어야합니다. New Regexp ( "^// d {6} $") // alert (reg2.test ( "123456"); 객체는 입력 초점을 잃습니다. -> username : <input type = "text"name = "username"onblur = "checkusername ()"/> <span id = "usernamespan"> </span> </form> </body> </html>360 브라우저 8.1 데모 결과 :
연속 편지 4 개만 포함하십시오.
등록 양식의 확인 및 제출의 프론트 엔드 검증을 제어합니다.
코드 파일 생성 위치 :
코드 데모 :
3form3.html
<html> <head> <title> DHTML 기술 데모 --- 등록 양식 선정 엔드 검증의 검증 및 제어 제출 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <script type = "text/javascript"> var {) {var var ousernamedode " document.getElementsByName ( "username") [0]; var username = ousernamenode.value; // 정기적 인 검증 사용 var reg = new regexp ( "[az] {4}", "i"; // 4 연속 문자를 포함하는 것은 괜찮습니다. regexp ( "^ [az] {4} $", "i"); // 4 개의 연속 문자 만 포함되어 있습니다. "i"의 이중 인용문은 생략 할 수 없음을 의미합니다. if (reg.test (username)) {oosernamespan.innerhtml = "username format은 올바른".fontColor ( "green"); return true;} else {ousernamespan.innerhtml = "사용자 이름 오류 형식".fontColor ( "red"); return false; }} function checkpwd () {var ouserpwdnode = document.getElementsByName ( "pwd") [0]; var pwd = ouserpwdnode.value; var reg2 = new regexp ( "^[// w // d] {6,9} $"); if (reg2.test (pwd)) {document.getElementById ( "userpwdspan"). innerhtml = "암호 형식은 요구 사항을 충족합니다".fontcolor ( "green"); Return true;} else {document.getElementById ( "userpwdspan"). innerHtml = "암호 길이는 6-9 자리 또는 밑줄이어야합니다." 여기. return true;} else {return false;}} </script> </head> <body> <!-OnSubmit 이벤트 응답을 등록하여 양식 제출을 제어하십시오. Return False는 제출되지 않으며 Return True가 제출됩니다. OnSubmit 이벤트가 등록되지 않은 경우 양식이 제출 될 때 TrueonSubmit 트리거가 반환됩니다. <form action = "/mydhtmlproj/servlet/regservlet"onsubmit = "return true;">-> <form action = "/mydhtmlproj/servlet/regservlet"onsubmit = "return checkuser ();"> username : <input type = "text" "username"wickername () "" "inblur =" "" id = "usernamepan"> </span> <!-명확성을 위해 암호도 여기에 사용됩니다. 실제로, type = "password"의 비밀번호를 사용해야합니다-> 비밀번호 : <input type = "text"name = "pwd"onblur = "Checkpwd ()" "/> <span id ="userpwdspan "> <br/> <입력 유형 ="value = "registration"// form> <!-- 형식 2------ 형식 2에 직접 씁니다. 버튼-> <form id = "userInfo"action = "/dhtmlproj/servlet/regservlet"> username : <input type = "text"name "name"= "username"onblur = "checkusername2 ()"/> <span id = "usernamespan2"> </spant >> postepport = "text" "pwd" "pwd" " onblur = "checkpwd2 ()"/> <span id = "userpwdspan2"> </span> <br/> </form> <입력 유형 = "button"value = "register"onclick = "mySubmit ()"/> <script type = "text/javascript"> function mysubmit () {var oformnode = document.getElementById ( "userInfo"); if (checkuserName2 () && checkpwd2 ()) {oformnode.submit (); // 양식을 제출하십시오. }} 함수 checkUserName2 () {var ousernamenode = document.getElementsByName ( "username") [1]; var username = oosernamenode.value; // 정기 테스트 var reg = new regexp 사용 ( "[az] {4}", "i"); // i --- 상단 및 소문자를 무시하는 것을 의미합니다. // var regg = new regexp ( "^ [az] {4} $", "i"); // 4 연속 문자 만 포함되므로 "i"의 이중 인용문은 생략 할 수 없음을 의미합니다. document.getElementById ( "usernamespan2"); if (reg.test (username)) {oosernamespan.innerhtml = "username format은 정확합니다".fontColor ( "green"); return true;} else {oosernamespan.innerhtml = "username format" }} 함수 checkpwd2 () {var ouserpwdnode = document.getElementsByName ( "pwd") [1]; var pwd = ouserpwdnode.value; var reg2 = new regexp ( "^[// w // d] {6,9} $"); if (reg2.test (pwd)) {document.getElementByid ( "userpwdspan2"). innerhtml = "비밀번호 형식은 요구 사항을 충족합니다".fontcolor ( "green"); Return; true;} else {document.getElementById ( "userpwdspan2"). innerHtml = "비밀번호 길이는 6-9 자리 또는 밑줄이어야합니다show.jsp :
<%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core"prefix = "c"%> <! arttype html public "-// w3c // 과도기 // en "> <html> <head> <title> 등록 후 페이지입니다 </title> </head> <body> <%out.println (request.getAttribute ("uname ")); out.println ("pwd ");%> <%<3; i ++) %> <div> 환영 </div> < %// 위에 html 코드를 쓸 수 있습니다} %> </body> </html>regservlet.java
이것은 새로운 서블릿입니다.
우리는 자동으로 web.xml과 일치합니다
패키지 cn.hncu.user; import java.io.ioexception; import java.io.printwriter; import javax.servlet.servletexception; import javax.servlet.http.httpservlet; import javax.servlet.http.httpervletrequest; import; javax.servlet.http.httpervletresponse; public class regservlet는 httpservlet {public void doget (httpservletrequest request, httpservletresponse 응답)을 확장합니다. servletexception, ioexception {dopost (요청, 응답);} public void dopost (httpervletrequest). httpservletResponse 응답) servletexception, ioexception {request.setcharacterencoding ( "utf-8"); // set set string name = request.getParameter ( "username"); // username은 제출 된 양식 문자열 pwd =에서 입력의 이름 속성입니다. request.getParameter ( "pwd"); // system.out.println (name); request.setattribute ( "uname", "hncu ---"+name); request.setattribute ( "pwd", "pwd ---"+pwd); request.getRequestDispatcher ( "/dhtml/6formsubmit/jsps/show.jsp"). Forward (요청, 응답); // 출력, 다른 페이지로 표시}}}}}.web.xml
<? xml version = "1.0"encoding = "utf-8"?> <web-app version = "2.5"xmlns = "http://java.sun.com/xml/xml/ns/javaee"xmlns : xsi = "http://www.w3.org/2001/xmlschema-instance. xsi : schemalocation = "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name></display-name> <servlet> <descrientive>이 설명은 내 j2ee 구성 요소의 설명입니다. 구성 요소 </display-name> <servlet-name> regservlet </servlet-name> <servlet-class> cn.hncu.user.regservlet </servlet-class> </servlet> <servlet-mapping> <servlet-name> regservlet </servlet-name> <url-pattern/servlet/regservattn> <Welcome-file-list> <welcome-file> index.jsp </welcome-file> </welcome-file-list> </web-app>
360 브라우저 8.1 데모 사진 :
형식이 올바르게 채워지면 등록 버튼을 클릭하고 자동으로 다른 페이지로 이동하십시오.
형식 오류가 있으면 등록 버튼을 클릭하면 응답하지 않습니다.
등록 양식의 확인 및 프론트 엔드 검증의 최종 버전을 제어합니다.
코드 데모 :
<HTML> <Head> <title> DHTML 기술 데모 --- 등록 양식 선회 엔드 검증-결제 제출-결제 버전 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <script "> 기능 check (이름, reg, spanid, okinfo, errinfo) {var value = document.getElementsByName (name) [0] .Value; // 정기적 인 검증 var ospannode = document.getElementById (spanid); if (reg.test (value)) {ospannode.innerhtml = okinfo.fontcolor ( "Green"); true;} else {opsannode.innerhtml = errinfo.fontcolor ( "red"); return false;}} 함수 checkusername () {var reg = new regexp ( "[az] {4}", "i"); // "I"의 두 배수구는 "I"의 두 인용문을 포함합니다. check ( "username", reg, "usernamepan", "usernamepan", "usernamepan", "username format은 올바른다", "사용자 이름 형식이 잘못");} function checkpwd () {var reg = new regexp ( "^[// w // d] {6,9} $"); return check (pwd ", retpwds,", "," 요구 사항 ","비밀번호 길이는 6-9 자리 또는 밑줄 ");} 함수 checkpwd2 () {var flag; var pwd = docum document.getElementById ( "userpwd2span"); if (pwd == pwd2) {ospannode.innerhtml = "두 가지 암호는 일관성이있다".fontColor ( "green"); flad = true;} else {ospannode.innerhtml = "두 가지 비밀번호는 retains" flag;} function checkmail () {var reg = /^/w+@/w+(/./w+)+$/i; Return Check ( "mail", reg, "usermailspan", "make mailbox format", "mailbox format 잘못된"; checkmail ()) {return true;} else {return false;}} </script> </head> <body> <form action = "/mydhtmlproj/servlet/regservlet"onsubmit = "return checkuser ();"; "> username : <input type"text "name ="username ""insername () ""/> < "/>. id = "usernamepan"> </span> <br/> 비밀번호를 입력하십시오 : <input type = "text"name = "pwd"onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> 비밀번호 확인 : <input type = "text"name = "pwd2"Onblur = "checkpwd2 ()"/>>>>>>>>>>>>>>>>>>>>>>>>>>>>>들 때는 비밀번호입니다. id = "userpwd2span"> </span> <br/> 이메일 주소 : <input type = "text"name = "mail"onblur = "checkmail ()"/> <span id = "usermailspan"> </span> <br/> <입력 유형 = "value ="registration "> </body> </html>360 브라우저 8.1 데모 결과 :
모든 형식을 올바르게 작성한 후에 만 등록 버튼을 클릭하면 응답합니다.
모든 형식을 올바르게 작성한 후 등록 버튼을 클릭 한 후 페이지를 클릭하면 실제로 show.jsp 페이지로 이동합니다. (원하는 곳을 찾을 수 있습니다)
위는 편집자가 소개 한 JavaScript의 양식 기술 요약 (권장)에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 당신에게 답장 할 것입니다!