ตรวจสอบรูปแบบ JavaScript

ตรวจสอบรูปแบบ JavaScript

JavaScript สามารถนำมาใช้ก่อนที่จะถูกส่งไปยังเซิร์ฟเวอร์ในข้อมูลในแบบฟอร์มการตรวจสอบ HTML ป้อนข้อมูลเหล่านี้

ข้อมูลฟอร์มมักจะต้องใช้ JavaScript ในการตรวจสอบความถูกต้อง:


  • ตรวจสอบว่าข้อมูลในแบบฟอร์มที่ว่างเปล่า?

  • ตรวจสอบว่ามีการป้อนข้อมูลที่อยู่อีเมลที่ถูกต้องหรือไม่

  • ตรวจสอบวันที่เข้ามาถูกต้องหรือไม่

  • ตรวจสอบการป้อนข้อมูลรูปแบบคือประเภทที่เป็นตัวเลข?


ที่ต้องการ (หรือบังคับ) โครงการ

ฟังก์ชั่นดังต่อไปนี้จะใช้ในการตรวจสอบว่าผู้ใช้จะต้องกรอกแบบฟอร์ม (หรือบังคับ) โครงการ ถ้าจำเป็นต้องใช้หรือตัวเลือกที่จำเป็นว่างแล้วกล่องเตือนจะปรากฏขึ้นและค่าตอบแทนการทำงานที่เป็นเท็จมิฉะนั้นค่าตอบแทนการทำงานที่เป็นความจริง (ไม่มีปัญหาหมายความว่าข้อมูล):

function validateForm()
{
	var x=document.forms["myForm"]["fname"].value;
	if (x==null || x=="")
	{
		alert("姓必须填写");
		return false;
	}
}

ฟังก์ชั่นดังกล่าวข้างต้นจะถูกเรียกเมื่อส่งแบบฟอร์มรูปแบบ:

ตัวอย่าง

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

ลอง»


ตรวจสอบ E-mail

ฟังก์ชั่นการตรวจสอบว่าข้อมูลที่ป้อนไปตามไวยากรณ์พื้นฐานต่อไปนี้ของที่อยู่อีเมล

พระองค์คือจุดที่ข้อมูลของท่านจะต้องมีสัญลักษณ์ @ และจุด (.) ในขณะเดียวกัน @ ไม่ได้เป็นที่อยู่อีเมลของตัวอักษรตัวแรกหลังจากที่ @ และความจำเป็นเป็นเวลาอย่างน้อยจำนวนของจุดที่:

function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
		return false;
	}
}

ต่อไปนี้เป็นรหัสที่สมบูรณ์พร้อมกับรูปแบบ HTML:

ตัวอย่าง

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>

ลอง»