ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

     ในการกรอกรหัสผ่าน(password) และยืนยันรหัสผ่าน(confirm password) สองช่องนี้จำเป็นต้องกรอกรหัสที่เหมือนกันเพื่อป้องกันเกิดข้อผิดพลาดและดูว่ารหัสผ่านที่ผู้ใช้กรอกเข้ามานั้นผู้ใช้จำไหมหรือแค่กรอกมั่วๆ 

      ซึ่งมักจะถูกใช้ในแบบฟอร์มใบสมัครออนไลน์หรือเว็บไซต์โซเชียลเพื่อลงทะเบียนหรือสมัคสมาชิกเพื่อตรวจสอบรหัสผ่านที่ป้อนโดยผู้ใช้ว่าถูกต้องและเหมือนกันหรือไม่ บทความนี้เป็นวิธีง่าย ๆ ในการตรวจสอบรหัสผ่านว่าตรงกันไหม โดยใช้ JavaScript โดยรหัสผ่านแรก (password)  จะถูกเก็บไว้ในตัวแปร password1 และยืนยันรหัสผ่าน (confirm password) จะถูกเก็บไว้ในตัวแปร password2 จากนั้นทำตรวจสอบว่าค่าตัวแปรทั้งสองตัวนี้มีค่าเท่ากันหรือไม่ ถ้ารหัสผ่านไม่ตรงกันก็แจ้งกลับไปยังผู้ใช้

ก่อนอื่นเราจะสร้างฟอร์มรับข้อมูลมาก่อน ซึ่งเราจะใช้ HTML ในการสร้าง ดังตัวอย่างโค้ดด้านล่างนี้

<!DOCTYPE html> 
<html> 
	<head> 
		<style> 
			.mindphp { 
				font-size:40px; 
				color:navy; 
				font-weight:bold; 
				text-align:center; 
			} 
			.todo { 
				font-size:17px; 
				text-align:center; 
				margin-bottom:20px; 
			} 
		</style> 
	</head> 
	<body> 
		<div class = "mindphp">Mindphp</div> 
		<div class = "todo">สอนเขียนโปรแกรมด้วย PHP สอน OOP ฐานข้อมูล สอน ทำเว็บ Joomla phpBB OpenERP.</div> 
		<form onSubmit = "return checkPassword(this)"> 
		<table border = 1 align = "center"> 
			<tr> 
				<!-- Enter Username -->
				<td>Username:</td> 
				<td><input type = text name = name size = 25</td> 
			</tr> 
			<tr> 
				<!-- Enter Password. -->
				<td>Password:</td> 
				<td><input type = password name = password1 size = 25</td> 
			</tr> 
			<tr> 
				<!-- To Confirm Password. -->
				<td>Confirm Password:</td> 
				<td><input type = password name = password2 size = 25></td> 
			</tr> 
			<tr> 
				<td colspan = 2 align = right> 
				<input type = submit value = "Submit"></td> 
			</tr> 
		</table> 
		</form> 
	</body> 
</html>					 

เมื่อเปิดผ่านเบราเซอร์แล้วจะมีหน้าเป็นอย่างนี้น่ะครับ

result
หน้าฟอร์มรับข้อมูลเมื่อเปิดผ่านเบราเซอร์


สำหรับการใช้ javascript ในการตรวจสอบรหัสผ่านว่าตรงกันไหม  เราสามารถศึกษาการใช้ JavaScript Functions ได้ในเว็บนี่้ 

ดูตัวอย่างโค้ดการตรวจสอบรหัสผ่านตรงไหม ด้านล่างนี้

<script> 
	// Function เพื่อตรวจสอบรหัสผ่านว่าตรงกันหรือไม่
	function checkPassword(form) { 
		password1 = form.password1.value; 
		password2 = form.password2.value; 

		// ถ้าช่่องรหัสผ่านไม่ถูกกรอก
		if (password1 == '') 
			alert ("Please enter Password"); 
					
		// ถ้าช่่องยืนยันรหัสผ่านไม่ถูกกรอก
		else if (password2 == '') 
			alert ("Please enter confirm password"); 
						
		//ถ้าทั้งสองช่องไม่ตรงกัน   ให้แจ้งผู้ใช้  และ  return false
		else if (password1 != password2) { 
			alert ("\nPassword did not match: Please try again...") 
			return false; 
			} 

		//ถ้าทั้งสองช่องตรงกัน  return true
		else{ 
			
			alert("Password Match: Welcome to Mindphp!") 
				return true; 
			} 
	} 
</script> 

เมื่อผู้ใช้กรอกรหัสผ่านทั้งสองช่องเหมือนกัน จะมี alert เพื่อแจ้งว่า รหัสผ่านไม่ตรงกัน ลองใหม่อีกครัง ดังภาพ

pass not matching
Alert ไปยังผู้ใช้ว่ารหัสผ่านไม่ตรงกัน

ถ้าหากผู้ใช้กรอกข้อมูลตรงกัน จะมี alert เพื่อแจ้งว่า สำเร็จ ดังภาพ

success
Alert รหัสผ่านตรงกัน

เราสามารถใช้เพื่อป้องกันไม่ให้ผู้ใส่ password มั่วๆ ได้รวมเราสามารถประยุกต์เพิ่มเติมเพื่อกำหนดรูปแบบรหัสผ่านว่าควรมีอะไร a-z หรือ 0-9  ไม่รับภาษาไทยเป็นต้น 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JavaScript

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เทคนิคทำธุรกิจอสังหาอย่างไรให้มีกำไร
โดย Patty Perfume อ 19 ม.ค. 2020 7:12 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
อ 19 ม.ค. 2020 7:12 pm โดย Patty Perfume
ความปลอดภัยด้านสุขภาพ เรื่องที่ทุกคนควรเริ่มต้นใฝ่หา
โดย medalezga อ 19 ม.ค. 2020 4:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
26
อ 19 ม.ค. 2020 4:30 pm โดย medalezga
วิธีการนำชื่อข้อมูลในชื่อในฐานข้อมูล ในไฟล์ XML ของ module joomla
โดย jamepiyawat ส 18 ม.ค. 2020 6:44 pm บอร์ด Joomla Developing Knowledge
0
45
ส 18 ม.ค. 2020 6:44 pm โดย jamepiyawat
วิธีการจัดทำการระบบแจ้้งเตือนใน phpbb
โดย Ittichai_chupol ส 18 ม.ค. 2020 5:42 pm บอร์ด PHP Knowledge
0
15
ส 18 ม.ค. 2020 5:42 pm โดย Ittichai_chupol
Pillow library ปรับขนาดรูปเป็นเปอร์เซ็นเพื่อนำไปใช้งานได้สะดวก
โดย benzas00123 ส 18 ม.ค. 2020 5:25 pm บอร์ด Python Knowledge
0
7
ส 18 ม.ค. 2020 5:25 pm โดย benzas00123
Pillow library Optimize รูปภาพเพื่อให้มีขนาดของข้อมูลที่เล็กลง
โดย benzas00123 ส 18 ม.ค. 2020 2:53 pm บอร์ด Python Knowledge
0
16
ส 18 ม.ค. 2020 2:53 pm โดย benzas00123
ตัวช่วยในการคำนวณแคลอรี่สำหรับผู้ที่รักการออกกำลังกาย
โดย prmindphp ส 18 ม.ค. 2020 11:50 am บอร์ด MindPHP News & Feedback
0
55
ส 18 ม.ค. 2020 11:50 am โดย prmindphp
เราจะเก็บรูปข้อมูลของรูปลง database เราจะใช้ data type อะไรครับ
โดย benzas00123 ส 18 ม.ค. 2020 11:31 am บอร์ด SQL - Database
2
55
ส 18 ม.ค. 2020 1:17 pm โดย benzas00123
อยากทราบวิธีการแก้ไขปัญหาการ อัพโหลดไฟล์ excel แล้วไม่รองรับภาษาไทย
โดย Ittichai_chupol ศ 17 ม.ค. 2020 5:58 pm บอร์ด Programming - PHP
6
43
ส 18 ม.ค. 2020 6:25 pm โดย Ittichai_chupol
ต้องการนับจำนวนอักษรเเละตัดอักษรที่เกิน มีปัญหากับภาษาไทย
โดย thatsawan ศ 17 ม.ค. 2020 5:18 pm บอร์ด Programming - C/C++ & java & Python
0
11
ศ 17 ม.ค. 2020 5:18 pm โดย thatsawan
สอบถามครับ ลูปค่าออกมาแล้วต้องการให้มันเก็บค่าในตัวแปร ต้องทำยังไงครับ
โดย chatee supasand ศ 17 ม.ค. 2020 3:51 pm บอร์ด Programming - C/C++ & java & Python
3
39
ศ 17 ม.ค. 2020 5:19 pm โดย thatsawan
อยากทราบวิธีก่ารเปิด exe ใน ubutu เวอชั่น 14
โดย Ittichai_chupol ศ 17 ม.ค. 2020 2:33 pm บอร์ด Programming - PHP
2
60
ศ 17 ม.ค. 2020 4:14 pm โดย Ittichai_chupol
วิธีการสร้างระบบชำระเงินด้วย omise โดยใช้ php
โดย Ittichai_chupol พฤ 16 ม.ค. 2020 6:53 pm บอร์ด PHP Knowledge
0
57
พฤ 16 ม.ค. 2020 6:53 pm โดย Ittichai_chupol
Pillow library กับการ เปลี่ยนนามสกุล img ทีเดียวหลายๆ file
โดย benzas00123 พฤ 16 ม.ค. 2020 5:45 pm บอร์ด Python Knowledge
0
24
พฤ 16 ม.ค. 2020 5:45 pm โดย benzas00123
Pillow library ในการจัดการและประมวลผลรูปภาพ
โดย benzas00123 พฤ 16 ม.ค. 2020 5:04 pm บอร์ด Python Knowledge
0
59
พฤ 16 ม.ค. 2020 5:04 pm โดย benzas00123
ความแตกต่างระหว่าง visibility: hidden; กับ display: none;
โดย Ittichai_chupol พ 15 ม.ค. 2020 6:44 pm บอร์ด CSS Knowledge
0
96
พ 15 ม.ค. 2020 6:44 pm โดย Ittichai_chupol
ตัวอย่าง การ Query ข้อมูลทีเป็นที่ได้ผลการค้นหา
โดย mindphp พ 15 ม.ค. 2020 6:40 pm บอร์ด Programming - C/C++ & java & Python
0
35
พ 15 ม.ค. 2020 6:40 pm โดย mindphp
สอบถามครับ ทำไมสร้างตารางฐานข้อมูลแล้ว มันไม่ใน ใน pg
โดย chatee supasand พ 15 ม.ค. 2020 5:55 pm บอร์ด Programming - C/C++ & java & Python
4
41
พ 15 ม.ค. 2020 6:07 pm โดย thatsawan
ขอสอบถาม error ของ flask ครับ
โดย benzas00123 พ 15 ม.ค. 2020 10:44 am บอร์ด Programming - C/C++ & java & Python
4
41
พ 15 ม.ค. 2020 10:53 am โดย benzas00123
สอบถาม code ของ Flask หน่อยครับว่ามันเอาไว้ใช้ทำอะไร
โดย benzas00123 อ 14 ม.ค. 2020 4:50 pm บอร์ด Programming - C/C++ & java & Python
3
73
พ 15 ม.ค. 2020 5:54 am โดย mindphp