Home-theater-designers
JavaScript เป็นหนึ่งในภาษาการเขียนโปรแกรมที่ได้รับความนิยมและใช้งานได้หลากหลายที่สุด ซึ่งคุณสามารถเริ่มต้นได้ตั้งแต่วันนี้ ภาษาการเขียนโปรแกรมนี้ได้รับการกล่าวอย่างถูกต้องว่าเป็นภาษาของเว็บและจำเป็นสำหรับการเพิ่มการโต้ตอบกับเว็บไซต์ของคุณ
องค์ประกอบแบบฟอร์มเป็นหนึ่งในองค์ประกอบ HTML ที่ใช้มากที่สุดบนเว็บไซต์ แบบฟอร์มเหล่านี้รับข้อมูลจากผู้ใช้และประมวลผลในเบราว์เซอร์หรือเซิร์ฟเวอร์ อย่างไรก็ตาม สิ่งสำคัญคือต้องตรวจสอบความถูกต้องของอินพุตเหล่านี้เพื่อจัดการกับปัญหาด้านความปลอดภัยและจุดบกพร่องที่ไม่ต้องการ
ทำความเข้าใจการจัดการ DOM
ก่อนที่เราจะดำเนินการตรวจสอบความถูกต้องของแบบฟอร์มฝั่งไคลเอ็นต์ด้วย JavaScript จำเป็นต้องทำความเข้าใจ Document Object Model หรือที่เรียกกันทั่วไปว่า 'DOM' DOM เป็น API มาตรฐานที่ช่วยให้ JavaScript สามารถโต้ตอบกับองค์ประกอบบนหน้าเว็บ HTML
เรียนรู้เพิ่มเติม: ฮีโร่ที่ซ่อนอยู่ของเว็บไซต์: การทำความเข้าใจ DOM
สำหรับการเพิ่มตัวฟังเหตุการณ์และดึงข้อมูลอินพุตของผู้ใช้ คุณจะต้องเข้าใจพื้นฐานของการจัดการ DOM นี่คือตัวอย่างที่อธิบายวิธีที่คุณสามารถเปลี่ยนเนื้อหาของหน้าเว็บโดยใช้ DOM API และ JavaScript:
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
ในโค้ดด้านบน the
เมื่อคุณเข้าใจพื้นฐานของการจัดการ DOM แล้ว มาดำเนินการตรวจสอบแบบฟอร์มกัน
การตรวจสอบแบบฟอร์มด้วย JavaScript
มีอินพุตหลายประเภทที่คุณสามารถใช้จากผู้ใช้ได้ ประเภทข้อความ ประเภทอีเมล ประเภทรหัสผ่าน ปุ่มตัวเลือก และช่องทำเครื่องหมาย เป็นประเภทที่พบบ่อยที่สุดที่คุณอาจพบ เนื่องจากประเภทอินพุตส่วนใหญ่เหล่านี้ คุณจะต้องใช้ตรรกะที่แตกต่างกันเพื่อตรวจสอบแต่ละประเภท
ก่อนที่จะเจาะลึกการตรวจสอบ ให้เราใช้เวลาสักครู่เพื่อทำความเข้าใจรูปแบบ HTML และความสำคัญของแบบฟอร์ม แบบฟอร์ม HTML เป็นวิธีหลักวิธีหนึ่งที่คุณโต้ตอบกับเว็บไซต์ เนื่องจากช่วยให้คุณป้อนข้อมูล ใช้การเปลี่ยนแปลง เรียกใช้ป๊อปอัป ส่งข้อมูลไปยังเซิร์ฟเวอร์ และอื่นๆ
วิธีย้ายเพลงจาก Google Play ไปยังโทรศัพท์
HTML องค์ประกอบที่ใช้เพื่อสร้างแบบฟอร์มที่ผู้ใช้เผชิญเหล่านี้ วิธีตรวจสอบอินพุตของแบบฟอร์ม HTML มีดังนี้
1. การตรวจสอบอีเมล
ไม่ว่าคุณจะกำลังสร้างระบบการตรวจสอบสิทธิ์หรือเพียงแค่รวบรวมอีเมลผู้ใช้สำหรับจดหมายข่าวของคุณ การตรวจสอบความถูกต้องของอีเมลนั้นเป็นสิ่งสำคัญก่อนที่คุณจะสามารถจัดเก็บไว้ในฐานข้อมูลของคุณหรือประมวลผลได้ หากต้องการตรวจสอบว่าอีเมลตรงตามเงื่อนไขที่กำหนดทั้งหมดหรือไม่ คุณสามารถใช้ a นิพจน์ทั่วไป .
HTML:
จาวาสคริปต์:
const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}2. การตรวจสอบรหัสผ่าน
รหัสผ่านเป็นข้อมูลสำคัญที่ต้องมีการตรวจสอบประเภทพิเศษเพื่อความปลอดภัย พิจารณาแบบฟอร์มลงทะเบียนที่มีสองช่อง: รหัสผ่านและยืนยันรหัสผ่าน หากต้องการตรวจสอบความถูกต้องของอินพุตคู่นี้ คุณจะต้องพิจารณาสิ่งต่อไปนี้
- รหัสผ่านต้องมีความยาวมากกว่า 6 ตัวอักษร
- ค่าของรหัสผ่านและฟิลด์ยืนยันรหัสผ่านต้องเหมือนกัน
HTML:
จาวาสคริปต์:
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}3. การตรวจสอบสัญญาณเข้าวิทยุ
อินพุตวิทยุ HTML เป็นองค์ประกอบการควบคุมแบบกราฟิกชนิดพิเศษที่อนุญาตให้ผู้ใช้เลือกชุดตัวเลือกพิเศษร่วมกันที่กำหนดไว้ล่วงหน้าเพียงชุดเดียว กรณีใช้งานทั่วไปของข้อมูลดังกล่าวจะใช้สำหรับการเลือกเพศ ในการตรวจสอบข้อมูลดังกล่าว คุณจะต้องตรวจสอบว่าได้เลือกอย่างน้อยหนึ่งรายการหรือไม่
สามารถทำได้โดยใช้ ตัวดำเนินการตรรกะ เช่น AND ( && ) และไม่ ( ! ) ตัวดำเนินการในลักษณะนี้:
HTML:
Male
Female
Others
จาวาสคริปต์:
const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!'); 4. เลือก Input Validation
NS องค์ประกอบ HTML ใช้เพื่อสร้างรายการแบบหล่นลง NS แท็กภายใน องค์ประกอบกำหนดตัวเลือกที่มีอยู่ในรายการแบบหล่นลง แต่ละอย่าง แท็กมีค่าแอตทริบิวต์ที่เกี่ยวข้องกับพวกเขา
วิธีสร้างเกม roblox
สำหรับตัวเลือกเริ่มต้นหรือตัวเลือกเริ่มต้น คุณสามารถตั้งค่าให้เป็นสตริงว่างเพื่อให้ถือว่าเป็นตัวเลือกที่ไม่ถูกต้อง สำหรับตัวเลือกอื่นๆ ทั้งหมด ให้ตั้งค่าแอตทริบิวต์ค่าที่เหมาะสม นี่คือตัวอย่างวิธีการตรวจสอบ a องค์ประกอบอินพุต:
HTML:
Select One
Mr
Mrs
Ms
จาวาสคริปต์:
วิธีค้นหาบัญชีอีเมลทั้งหมดในชื่อของฉัน
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. การตรวจสอบช่องทำเครื่องหมาย
องค์ประกอบอินพุตของช่องกาเครื่องหมายประเภทจะแสดงโดยค่าเริ่มต้นเป็นกล่องที่มีการเลือกหรือทำเครื่องหมายเมื่อเปิดใช้งาน ช่องทำเครื่องหมายช่วยให้คุณสามารถเลือกค่าเดียวสำหรับการส่งในแบบฟอร์ม ช่องทำเครื่องหมายเป็นตัวเลือกยอดนิยมสำหรับการป้อนข้อมูล 'ยอมรับข้อกำหนดและเงื่อนไข'
หากต้องการดูว่ามีการทำเครื่องหมายที่ช่องทำเครื่องหมายหรือไม่ คุณสามารถเข้าถึงแอตทริบิวต์ที่เลือกในช่องป้อนข้อมูลได้ นี่คือตัวอย่าง:
HTML:
I agree to the terms and conditionsจาวาสคริปต์:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
การป้องกันดีกว่าการรักษา
ขอแนะนำให้ตรวจสอบข้อมูลทั้งหมดที่คุณได้รับจากผู้เข้าชมเสมอเพื่อมอบประสบการณ์ที่ปลอดภัย แฮกเกอร์มักจะพยายามป้อนข้อมูลที่เป็นอันตรายลงในช่องป้อนข้อมูลเพื่อทำการโจมตีแบบ cross-site scripting และการฉีด SQL
เมื่อคุณเข้าใจวิธีตรวจสอบความถูกต้องของอินพุต HTML ของคุณแล้ว ทำไมไม่ลองใช้มันด้วยการสร้างแบบฟอร์มและนำกลยุทธ์ที่คุณเห็นด้านบนไปใช้
แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีสร้างแบบฟอร์มใน HTMLอนุญาตให้ผู้ใช้ป้อนข้อมูลบนเว็บไซต์ของคุณด้วยแบบฟอร์ม HTML
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- การเขียนโปรแกรม
- HTML
- JavaScript
- การพัฒนาเว็บ
- บทเรียนการเข้ารหัส
Nitin เป็นนักพัฒนาซอฟต์แวร์ตัวยงและเป็นนักศึกษาวิศวกรรมคอมพิวเตอร์ที่พัฒนาเว็บแอปพลิเคชันโดยใช้เทคโนโลยี JavaScript เขาทำงานเป็นนักพัฒนาเว็บอิสระและชอบเขียนสำหรับ Linux และการเขียนโปรแกรมในเวลาว่าง
เพิ่มเติมจาก Nitin Ranganathสมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก