이 기사에서는 양식 검증을위한 JS의 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
1. 전통적인 양식 검증 코드
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 양식 검증 </title>
<script type = "text/javaScript">
함수 $ (id) {
return document.getElementById (id);
}
함수 check () {
var email = $ ( "이메일"). 값;
var password = $ ( "password"). 값;
var repassword = $ ( "Repassword"). 값;
var name = $ ( "name"). 값;
if (email == "") {
경고 ( "이메일 값이 비어질 수 없음");
$ ( "이메일"). focus ();
거짓을 반환합니다.
}
if (email.indexof ( "@") == -1 || email.indexof ( ".") == -1) {
ALERT ( "사서함 형식이 잘못되었으며 @ and.를 포함해야합니다");
$ ( "이메일"). focus ();
거짓을 반환합니다.
}
if (password == "") {
Alert ( "비밀번호는 비어있을 수 없습니다");
$ ( "password"). focus ();
거짓을 반환합니다.
}
if (password.length <6) {
경고 ( "비밀번호 길이는 6보다 크거나 같아야 함");
$ ( "password"). focus ();
거짓을 반환합니다.
}
if (repassword! = password) {
경고 ( "두 번 입력 한 비밀번호는 일관성이 없다");
$ ( "Repassword"). focus ();
거짓을 반환합니다.
}
if (name == "") {
경고 ( "이름은 비어있을 수 없습니다");
$ ( "name"). focus ();
거짓을 반환합니다.
}
for (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
경고 ( '이름은 숫자를 포함 할 수 없습니다');
$ ( "name"). focus ();
거짓을 반환합니다.
}
}
}
</스크립트>
</head>
<body>
<form name = "login_form"method = "post"onsubmit = "return check ()">
<div>
이메일 : <input type = "text"name = "email"id = "email"/>
</div>
<div>
비밀번호 : <입력 유형 = "password"name = "password"id = "password" />
</div>
<div>
비밀번호를 다시 입력하십시오
</div>
<div>
이름 : <입력 유형 = "text"name = "name"id = "name" />
</div>
<div>
<입력 유형 = "제출"값 = "레지스터" />
</div>
</form>
</body>
</html>
2. 입력 상자 뒤에 신속한 정보가있는 양식 확인
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 양식 검증 </title>
<script type = "text/javaScript">
함수 $ (id) {
return document.getElementById (id);
}
함수 check () {
var email = $ ( "이메일"). 값;
var password = $ ( "password"). 값;
var repassword = $ ( "Repassword"). 값;
var name = $ ( "name"). 값;
$ ( "emailInfo"). innerHtml = "";
$ ( "passwordInfo"). innerHtml = "";
$ ( "RepasswordInfo"). innerHtml = "";
$ ( "nameinfo"). innerhtml = "";
if (email == "") {
$ ( "emailInfo"). innerHtml = "이메일 값이 비어있을 수 없다";
$ ( "이메일"). focus ();
거짓을 반환합니다.
}
if (email.indexof ( "@") == -1 || email.indexof ( ".") == -1) {
$ ( "emailInfo"). innerHtml = "사서함 형식이 올바르지 않고 @ and.를 포함해야합니다.";
$ ( "이메일"). focus ();
거짓을 반환합니다.
}
if (password == "") {
$ ( "passwordInfo"). innerHtml = "암호가 비어있을 수 없다";
$ ( "password"). focus ();
거짓을 반환합니다.
}
if (password.length <6) {
$ ( "passwordInfo"). innerHtml = "비밀번호 길이는 6보다 크거나 같아야합니다";
$ ( "password"). focus ();
거짓을 반환합니다.
}
if (repassword! = password) {
$ ( "RepasswordInfo"). innerHtml = "두 번 입력 한 암호는 일치하지 않습니다";
$ ( "Repassword"). focus ();
거짓을 반환합니다.
}
if (name == "") {
$ ( "nameinfo"). innerhtml = "이름은 비어있을 수 없다";
$ ( "name"). focus ();
거짓을 반환합니다.
}
for (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ( "nameinfo"). innerhtml = '이름에는 숫자를 포함 할 수 없습니다';
$ ( "name"). focus ();
거짓을 반환합니다.
}
}
}
</스크립트>
</head>
<body>
<form name = "login_form"method = "post"onsubmit = "return check ()">
<div>
이메일 : <입력 유형 = "text"name = "email"id = "email"/> <span id = "emailInfo"> </span>
</div>
<div>
비밀번호 : <입력 유형 = "password"name = "password"id = "password" /> <span id = "passwordInfo"> < /span>
</div>
<div>
비밀번호를 다시 입력하십시오
</div>
<div>
이름 : <입력 유형 = "text"name = "name"id = "name" /> <span id = "nameinfo"> < /span>
</div>
<div>
<입력 유형 = "제출"값 = "레지스터" />
</div>
</form>
</body>
</html>
렌더링은 다음과 같습니다.
3. 입력 상자가 초점을 잃으면 확인 기능을 트리거합니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 양식 검증 </title>
<script type = "text/javaScript">
함수 $ (id) {
return document.getElementById (id);
}
함수 check () {
var email = $ ( "이메일"). 값;
var password = $ ( "password"). 값;
var repassword = $ ( "Repassword"). 값;
var name = $ ( "name"). 값;
$ ( "emailInfo"). innerHtml = "";
$ ( "passwordInfo"). innerHtml = "";
$ ( "RepasswordInfo"). innerHtml = "";
$ ( "nameinfo"). innerhtml = "";
if (email == "") {
$ ( "emailInfo"). innerHtml = "이메일 값이 비어있을 수 없다";
거짓을 반환합니다.
}
if (email.indexof ( "@") == -1 || email.indexof ( ".") == -1) {
$ ( "emailInfo"). innerHtml = "사서함 형식이 올바르지 않고 @ and.를 포함해야합니다.";
거짓을 반환합니다.
}
if (password == "") {
$ ( "passwordInfo"). innerHtml = "암호가 비어있을 수 없다";
거짓을 반환합니다.
}
if (password.length <6) {
$ ( "passwordInfo"). innerHtml = "비밀번호 길이는 6보다 크거나 같아야합니다";
거짓을 반환합니다.
}
if (repassword! = password) {
$ ( "RepasswordInfo"). innerHtml = "두 번 입력 한 암호는 일치하지 않습니다";
거짓을 반환합니다.
}
if (name == "") {
$ ( "nameinfo"). innerhtml = "이름은 비어있을 수 없다";
거짓을 반환합니다.
}
for (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ( "nameinfo"). innerhtml = '이름에는 숫자를 포함 할 수 없습니다';
거짓을 반환합니다.
}
}
}
function checkemail () {// 이메일 확인
$ ( 'emailInfo'). innerHtml = "";
var email = $ ( '이메일'). 값;
if (email == "") {
$ ( 'emailInfo'). innerHtml = "이메일 값이 비어질 수 없다";
거짓을 반환합니다.
}
if (email.indexof ( '@') == -1 || email.indexof ( '.') == -1) {
$ ( 'emailInfo'). innerHtml = "email은 @ and.를 포함해야합니다.";
거짓을 반환합니다.
}
}
함수 checkPassword () {// 비밀번호 확인
$ ( 'passwordInfo'). innerHtml = "";
var password = $ ( 'password'). 값;
if (password == "") {
$ ( "passwordInfo"). innerHtml = "암호가 비어있을 수 없다";
거짓을 반환합니다.
}
if (password.length <6) {
$ ( "passwordInfo"). innerHtml = "비밀번호 길이는 6보다 크거나 같아야합니다";
거짓을 반환합니다.
}
}
함수 checkRepassword () {// 재 입력 된 비밀번호를 확인합니다
$ ( 'repassword'). innerhtml = "";
var repassword = $ ( 'Repassword'). 값;
if (repassword! = password) {
$ ( "RepasswordInfo"). innerHtml = "두 번 입력 한 암호는 일치하지 않습니다";
거짓을 반환합니다.
}
}
함수 checkName () {// 이름을 확인하십시오
$ ( 'nameinfo'). innerhtml = "";
var name = $ ( 'name'). 값;
if (name == "") {
$ ( "nameinfo"). innerhtml = "이름은 비어있을 수 없다";
거짓을 반환합니다.
}
for (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ( "nameinfo"). innerhtml = '이름에는 숫자를 포함 할 수 없습니다';
거짓을 반환합니다.
}
}
}
</스크립트>
</head>
<body>
<form name = "login_form"method = "post"onsubmit = "return check ()">
<div>
이메일 : <input type = "text"name = "email"id = "email"onblur = "Checkemail ();"/> <span id = "emailinfo"> </span>
</div>
<div>
비밀번호 : <입력 유형 = "비밀번호"이름 = "password"id = "password"onblur = "checkpassword ();"/> <span id = "passwordInfo"> </span>
</div>
<div>
비밀번호를 다시 입력하십시오
</div>
<div>
이름 : <input type = "text"name = "name"id = "name"onblur = "checkname ();"/> <span id = "nameinfo"> </span>
</div>
<div>
<입력 유형 = "제출"값 = "레지스터" />
</div>
</form>
</body>
</html>
렌더링은 다음과 같습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.