บทความนี้อธิบายวิธีการของ JS สำหรับการตรวจสอบแบบฟอร์ม แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
1. รหัสการตรวจสอบแบบฟอร์มแบบดั้งเดิม
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> การตรวจสอบแบบฟอร์ม </title>
<script type = "text/javascript">
ฟังก์ชั่น $ (id) {
ส่งคืน document.getElementById (id);
-
ตรวจสอบฟังก์ชั่น () {
var email = $ ("อีเมล") ค่า;
รหัสผ่าน var = $ ("รหัสผ่าน") ค่า;
var repassword = $ ("repassword") ค่า;
ชื่อ var = $ ("ชื่อ") ค่า;
ถ้า (email == "") {
การแจ้งเตือน ("ค่าอีเมลไม่สามารถว่างเปล่า");
$ ("อีเมล"). focus ();
กลับเท็จ;
-
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
การแจ้งเตือน ("รูปแบบกล่องจดหมายไม่ถูกต้องต้องรวม @ และ.");
$ ("อีเมล"). focus ();
กลับเท็จ;
-
ถ้า (รหัสผ่าน == "") {
การแจ้งเตือน ("รหัสผ่านไม่สามารถว่างเปล่า");
$ ("รหัสผ่าน"). focus ();
กลับเท็จ;
-
if (password.length <6) {
การแจ้งเตือน ("ความยาวรหัสผ่านต้องมากกว่าหรือเท่ากับ 6");
$ ("รหัสผ่าน"). focus ();
กลับเท็จ;
-
if (repassword! = รหัสผ่าน) {
การแจ้งเตือน ("รหัสผ่านที่ป้อนสองครั้งนั้นไม่สอดคล้องกัน");
$ ("repassword"). focus ();
กลับเท็จ;
-
if (name == "") {
การแจ้งเตือน ("ชื่อไม่สามารถว่างเปล่า");
$ ("ชื่อ"). focus ();
กลับเท็จ;
-
สำหรับ (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
การแจ้งเตือน ('ชื่อไม่สามารถมีตัวเลข');
$ ("ชื่อ"). focus ();
กลับเท็จ;
-
-
-
</script>
</head>
<body>
<form name = "login_form" method = "post" onsubmit = "return check ()">
<div>
อีเมล: <อินพุต type = "text" name = "อีเมล" id = "อีเมล"/>>
</div>
<div>
รหัสผ่าน: <อินพุต type = "รหัสผ่าน" name = "รหัสผ่าน" id = "รหัสผ่าน" />>
</div>
<div>
ป้อนรหัสผ่านอีกครั้ง: <อินพุต type = "รหัสผ่าน" name = "repassword" id = "repassword" />>>>>> >>
</div>
<div>
ชื่อ: <อินพุต type = "text" name = "name" id = "name" />>>
</div>
<div>
<อินพุตประเภท = "ส่ง" value = "ลงทะเบียน" />
</div>
</form>
</body>
</html>
2. การตรวจสอบแบบฟอร์มพร้อมข้อมูลแจ้งที่อยู่เบื้องหลังกล่องอินพุต
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> การตรวจสอบแบบฟอร์ม </title>
<script type = "text/javascript">
ฟังก์ชั่น $ (id) {
ส่งคืน document.getElementById (id);
-
ตรวจสอบฟังก์ชั่น () {
var email = $ ("อีเมล") ค่า;
รหัสผ่าน var = $ ("รหัสผ่าน") ค่า;
var repassword = $ ("repassword") ค่า;
ชื่อ var = $ ("ชื่อ") ค่า;
$ ("emailInfo"). innerhtml = "";
$ ("passwordinfo"). innerhtml = "";
$ ("repasswordInfo"). innerhtml = "";
$ ("nameInfo"). innerhtml = "";
ถ้า (email == "") {
$ ("emailInfo"). innerhtml = "ค่าอีเมลไม่สามารถว่างเปล่า";
$ ("อีเมล"). focus ();
กลับเท็จ;
-
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("emailInfo"). innerhtml = "รูปแบบกล่องจดหมายไม่ถูกต้องต้องรวม @ และ.";
$ ("อีเมล"). focus ();
กลับเท็จ;
-
ถ้า (รหัสผ่าน == "") {
$ ("PasswordInfo"). innerhtml = "รหัสผ่านไม่สามารถว่างเปล่าได้";
$ ("รหัสผ่าน"). focus ();
กลับเท็จ;
-
if (password.length <6) {
$ ("PasswordInfo"). innerhtml = "ความยาวรหัสผ่านต้องมากกว่าหรือเท่ากับ 6";
$ ("รหัสผ่าน"). focus ();
กลับเท็จ;
-
if (repassword! = รหัสผ่าน) {
$ ("repasswordInfo"). innerhtml = "รหัสผ่านที่ป้อนสองครั้งนั้นไม่สอดคล้องกัน";
$ ("repassword"). focus ();
กลับเท็จ;
-
if (name == "") {
$ ("nameInfo"). innerhtml = "ชื่อไม่สามารถว่างเปล่า";
$ ("ชื่อ"). focus ();
กลับเท็จ;
-
สำหรับ (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = 'ชื่อไม่สามารถมีตัวเลข';
$ ("ชื่อ"). focus ();
กลับเท็จ;
-
-
-
</script>
</head>
<body>
<form name = "login_form" method = "post" onsubmit = "return check ()">
<div>
อีเมล: <อินพุต type = "text" name = "email" id = "อีเมล"/> <span id = "emailinfo"> </span>
</div>
<div>
รหัสผ่าน: <อินพุต type = "รหัสผ่าน" name = "รหัสผ่าน" id = "รหัสผ่าน" /> <span id = "passwordinfo"> </span>
</div>
<div>
ป้อนรหัสผ่านอีกครั้ง: <อินพุต type = "รหัสผ่าน" name = "repassword" id = "repassword" /> <span id = "repasswordInfo"> </span>
</div>
<div>
ชื่อ: <อินพุต type = "text" name = "name" id = "name" /> <span id = "nameInfo"> </span>
</div>
<div>
<อินพุตประเภท = "ส่ง" value = "ลงทะเบียน" />
</div>
</form>
</body>
</html>
การเรนเดอร์มีดังนี้:
3. ทริกเกอร์ฟังก์ชั่นตรวจสอบเมื่อกล่องอินพุตสูญเสียโฟกัส
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> การตรวจสอบแบบฟอร์ม </title>
<script type = "text/javascript">
ฟังก์ชั่น $ (id) {
ส่งคืน document.getElementById (id);
-
ตรวจสอบฟังก์ชั่น () {
var email = $ ("อีเมล") ค่า;
รหัสผ่าน var = $ ("รหัสผ่าน") ค่า;
var repassword = $ ("repassword") ค่า;
ชื่อ var = $ ("ชื่อ") ค่า;
$ ("emailInfo"). innerhtml = "";
$ ("passwordinfo"). innerhtml = "";
$ ("repasswordInfo"). innerhtml = "";
$ ("nameInfo"). innerhtml = "";
ถ้า (email == "") {
$ ("emailInfo"). innerhtml = "ค่าอีเมลไม่สามารถว่างเปล่า";
กลับเท็จ;
-
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("emailInfo"). innerhtml = "รูปแบบกล่องจดหมายไม่ถูกต้องต้องรวม @ และ.";
กลับเท็จ;
-
ถ้า (รหัสผ่าน == "") {
$ ("PasswordInfo"). innerhtml = "รหัสผ่านไม่สามารถว่างเปล่าได้";
กลับเท็จ;
-
if (password.length <6) {
$ ("PasswordInfo"). innerhtml = "ความยาวรหัสผ่านต้องมากกว่าหรือเท่ากับ 6";
กลับเท็จ;
-
if (repassword! = รหัสผ่าน) {
$ ("repasswordInfo"). innerhtml = "รหัสผ่านที่ป้อนสองครั้งนั้นไม่สอดคล้องกัน";
กลับเท็จ;
-
if (name == "") {
$ ("nameInfo"). innerhtml = "ชื่อไม่สามารถว่างเปล่า";
กลับเท็จ;
-
สำหรับ (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = 'ชื่อไม่สามารถมีตัวเลข';
กลับเท็จ;
-
-
-
ฟังก์ชั่น checkemail () {// ตรวจสอบอีเมล
$ ('emailinfo'). innerhtml = "";
var email = $ ('อีเมล') ค่า;
ถ้า (email == "") {
$ ('emailinfo'). innerhtml = "ค่าอีเมลไม่สามารถว่างเปล่า";
กลับเท็จ;
-
if (email.indexof ('@') == -1 || email.indexof ('.') == -1) {
$ ('emailinfo'). innerhtml = "อีเมลต้องมี @ และ.";
กลับเท็จ;
-
-
ฟังก์ชั่น checkpassword () {// ตรวจสอบรหัสผ่าน
$ ('passwordinfo'). innerhtml = "";
รหัสผ่าน var = $ ('รหัสผ่าน') ค่า;
ถ้า (รหัสผ่าน == "") {
$ ("PasswordInfo"). innerhtml = "รหัสผ่านไม่สามารถว่างเปล่าได้";
กลับเท็จ;
-
if (password.length <6) {
$ ("PasswordInfo"). innerhtml = "ความยาวรหัสผ่านต้องมากกว่าหรือเท่ากับ 6";
กลับเท็จ;
-
-
ฟังก์ชั่น checkRepassWord () {// ตรวจสอบรหัสผ่านที่ป้อนเข้าอีกครั้ง
$ ('repassword'). innerhtml = "";
var repassword = $ ('repassword'). ค่า;
if (repassword! = รหัสผ่าน) {
$ ("repasswordInfo"). innerhtml = "รหัสผ่านที่ป้อนสองครั้งนั้นไม่สอดคล้องกัน";
กลับเท็จ;
-
-
ฟังก์ชั่น checkName () {// ตรวจสอบชื่อ
$ ('nameInfo'). innerhtml = "";
ชื่อ var = $ ('ชื่อ') ค่า;
if (name == "") {
$ ("nameInfo"). innerhtml = "ชื่อไม่สามารถว่างเปล่า";
กลับเท็จ;
-
สำหรับ (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = 'ชื่อไม่สามารถมีตัวเลข';
กลับเท็จ;
-
-
-
</script>
</head>
<body>
<form name = "login_form" method = "post" onsubmit = "return check ()">
<div>
อีเมล: <อินพุต type = "text" name = "อีเมล" id = "อีเมล" onblur = "checkemail ();"/> <span id = "emailinfo"> </span>
</div>
<div>
รหัสผ่าน: <อินพุต type = "รหัสผ่าน" name = "รหัสผ่าน" id = "รหัสผ่าน" onblur = "checkpassword ();"/> <span id = "passwordinfo"> </span>
</div>
<div>
ป้อนรหัสผ่านอีกครั้ง: <อินพุต type = "รหัสผ่าน" name = "repassword" id = "repassword" onblur = "checkrepassword ();"/> <span id = "repasswordInfo"> </span>
</div>
<div>
ชื่อ: <อินพุต type = "text" name = "name" id = "name" onblur = "checkName ();"/> <span id = "nameInfo"> </span>
</div>
<div>
<อินพุตประเภท = "ส่ง" value = "ลงทะเบียน" />
</div>
</form>
</body>
</html>
การเรนเดอร์มีดังนี้:
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน