คำแนะนำสำหรับผู้เริ่มต้นที่เป็นมิตรเกี่ยวกับวิธีการตรวจสอบรายละเอียดผู้ใช้บนแบบฟอร์มหน้าเว็บโดยใช้ JAVASCRIPT
Hi.
คุณอาจอ่านบทความนี้เพราะคุณต้องการเริ่มใช้งาน JavaScript โดยเริ่มจากพื้นฐาน (ซึ่งรวมถึงการตรวจสอบความถูกต้องของแบบฟอร์ม) และคุณต้องการคำแนะนำโดยย่อ บางที คุณมาถูกที่แล้วรอก่อน นี่ไม่ใช่เพราะฉันเป็นมืออาชีพด้าน JavaScript แต่คุณจะเห็นว่า จนกระทั่งสองสามคืนก่อน ฉันได้ต่อสู้อย่างรุนแรงกับการทำความเข้าใจและการเขียน JS และในช่วงเวลาที่เข้มข้นของการพยายามทำความเข้าใจ ฉันก็เปิดออก แฮ็กด่วนบางอย่าง แม้ว่าฉันจะเข้าใจปัญหาของคุณได้โดยสิ้นเชิง แต่ฉันก็สามารถช่วยคุณด้วยวิธีง่ายๆ (หวังว่า) เพื่อช่วยให้คุณเข้าใจ JS ได้ดีขึ้น
ในบทความนี้ ฉันจะแสดงให้คุณเห็น (ผ่านกระบวนการทีละขั้นตอน) วิธีตรวจสอบรายละเอียดผู้ใช้บนแบบฟอร์มหน้าเว็บของคุณผ่านการใช้ลูป คำสั่ง if/else แท็กอ็อบเจ็กต์ และการเปรียบเทียบ
อยู่กับฉัน
ก่อนที่เราจะดำเนินการตามขั้นตอนในการแก้ปัญหาของเรา ฉันคิดว่าเป็นการดีที่สุดที่เราจะพูดถึง 'ปัญหา' ที่เราต้องแก้ไข
ประการแรก การตรวจสอบความถูกต้องของแบบฟอร์มใน JavaScript นั้นเป็นเรื่องเกี่ยวกับการค้นหาวิธีการตรวจสอบข้อมูลของแบบฟอร์มบนคอมพิวเตอร์ไคลเอนต์เป็นหลัก ก่อนที่จะส่งไปยังเว็บเซิร์ฟเวอร์
การตรวจสอบแบบฟอร์มมีสองหน้าที่หลัก
การตรวจสอบขั้นพื้นฐาน — ในที่นี้ จะต้องตรวจสอบแบบฟอร์มเพื่อให้แน่ใจว่ามีการป้อนข้อมูลลงในแต่ละช่องของแบบฟอร์มที่ต้องการ ตัวอย่างนี้คือการที่คุณป้อนชื่อผู้ใช้ของคุณในแบบฟอร์มลงทะเบียน
อย่างไรก็ตาม ใน การตรวจสอบรูปแบบข้อมูล ซึ่งเป็นครั้งที่สอง ข้อมูลที่ป้อนจะต้องตรวจสอบรูปแบบและค่าที่ถูกต้อง ตัวอย่างนี้คือ คุณพยายามสมัครบัญชี Spotify และชื่อผู้ใช้ของคุณต้องมีอักขระไม่เกินหกตัว ซึ่งในจำนวนนี้ต้องมีอักขระตัวพิมพ์ใหญ่หนึ่งตัวและสัญลักษณ์หนึ่งตัว สิ่งนี้จะต้องใช้ตรรกะเพิ่มเติมเพื่อทดสอบความถูกต้องของข้อมูล
เราจะมาถึงวิธีแก้ปัญหาของเราโดยใช้ขั้นตอนง่ายๆ เหล่านี้
- การใช้คำสั่งพร้อมต์เพื่อยอมรับรายละเอียดผู้ใช้
- การใช้วัตถุเพื่อเก็บรายละเอียดผู้ใช้
- กำลังตรวจสอบรายละเอียดผู้ใช้
ขั้นตอนที่ 1 (การแจ้งชื่อผู้ใช้)
ฉันจะถือว่าคุณได้แทรกแท็ก ‹script› ของคุณในไฟล์ 'index.html' เพื่อเชื่อมโยงไฟล์ HTML ของคุณกับไฟล์ 'index.js' ของคุณแล้ว
ขั้นตอนแรกคือการออกคำสั่งพร้อมท์ในไฟล์ JS ของคุณ จุดมุ่งหมายคือการสร้างป๊อปอัปที่แจ้งให้ผู้ใช้ป้อนรายละเอียด
คุณสามารถสร้างคำสั่งพร้อมท์สำหรับชื่อผู้ใช้โดยการป้อน;
ให้ชื่อผู้ใช้ =พร้อมท์ (“ป้อนชื่อผู้ใช้ของคุณ”)
หมายเหตุ [คุณสามารถตรวจสอบว่ารหัสของคุณทำงานอยู่หรือไม่โดยป้อน console.log (ชื่อผู้ใช้)]
ขั้นตอนที่ 2 (การตรวจสอบความถูกต้องของชื่อผู้ใช้)
หลังจากป้อนข้อความแจ้งและตรวจสอบเพื่อดูว่ารหัสของคุณทำงานอย่างถูกต้องหรือไม่ คุณสามารถดำเนินการตรวจสอบชื่อผู้ใช้ต่อไปได้ เกณฑ์สำหรับการตรวจสอบนี้คือชื่อผู้ใช้ต้องมีอักขระน้อยกว่า 8 ตัว ชื่อผู้ใช้ใดๆ ที่มากกว่าจำนวนอักขระที่ระบุจะทำให้รหัสของคุณอ่านเป็นเท็จ
ขั้นตอนแรกคือการเขียนการประกาศ Function แบบง่ายๆ
ฟังก์ชัน ตรวจสอบชื่อผู้ใช้ (ชื่อผู้ใช้){
ถ้า (ชื่อผู้ใช้ == null){
ส่งคืนเท็จ
}
ถ้า (ชื่อผู้ใช้.ความยาว›8){
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
ตรวจสอบรหัสของคุณด้วย:console.log(validateUsername(username))
ขั้นตอนที่ 3 (การแจ้งและยืนยันรหัสผ่าน)
หลังจากแจ้งและตรวจสอบชื่อผู้ใช้แล้ว สิ่งที่ตามมาคือรหัสผ่าน เนื่องจากโค้ดของคุณต้องมีโครงสร้างแบบอนุกรม รหัสผ่านไม่ควรน้อยกว่า 7 หลัก
ตอนนี้ โค้ดของคุณควรมีลักษณะเช่นนี้ ('//**' เป็นความคิดเห็นที่มีจุดมุ่งหมายเพื่อเป็นแนวทางแก่คุณ)
ให้ชื่อผู้ใช้ =พร้อมท์ (“ป้อนชื่อผู้ใช้ของคุณ”) //**พร้อมท์รายละเอียด
validateUsername(ชื่อผู้ใช้) //**การตรวจสอบ
ให้รหัสผ่าน =พร้อมท์ (“ป้อนรหัสผ่านของคุณ”) //*พร้อมท์รหัสผ่าน
ตรวจสอบรหัสผ่าน (รหัสผ่าน) //**การตรวจสอบ
ฟังก์ชัน ตรวจสอบชื่อผู้ใช้(ชื่อผู้ใช้){
ถ้า (ชื่อผู้ใช้ == null){
ส่งคืนเท็จ
}
ถ้า (ชื่อผู้ใช้.ความยาว›8){
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
//*ฟังก์ชันตรวจสอบชื่อผู้ใช้
ฟังก์ชัน ValidatePassword(รหัสผ่าน){
ถ้า (รหัสผ่าน == null) {
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
ถ้า (password.length ‹7) {
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
//*ฟังก์ชันตรวจสอบรหัสผ่าน
ขั้นตอนที่ 4 (การสร้างข้อผิดพลาด/การแจ้งเตือนความสำเร็จ)
จะเกิดอะไรขึ้นหากผู้ใช้ป้อนรหัสผ่านหรือชื่อผู้ใช้ที่ต่ำกว่าเกณฑ์ที่คุณตั้งไว้ แม้ว่าจะอ่านค่าเท็จบนคอนโซลอย่างแน่นอน แต่คุณต้องการให้ผู้ใช้ได้รับการแจ้งเตือนข้อผิดพลาดและข้อความแจ้งให้ป้อนรายละเอียดที่ถูกต้อง คุณสามารถทำได้โดยการเพิ่ม “While Loop” ลงในโค้ดของคุณ
หมายเหตุด่วน:ใน JavaScript ลูปถูกใช้เพื่อทำงานซ้ำตามเงื่อนไข
ในขณะที่ (ตรวจสอบความถูกต้องของชื่อผู้ใช้ (ชื่อผู้ใช้) ==false){
}
ชื่อผู้ใช้=พร้อมท์ (“ชื่อผู้ใช้ไม่ถูกต้อง โปรดป้อนชื่อผู้ใช้ของคุณอีกครั้ง”)
นี่คือลักษณะโค้ดของคุณควรมีลักษณะดังนี้:
ในขณะที่ (ตรวจสอบความถูกต้องของชื่อผู้ใช้ (ชื่อผู้ใช้) ==false){
}
ชื่อผู้ใช้=Prompt (“ชื่อผู้ใช้ไม่ถูกต้อง โปรดป้อนชื่อผู้ใช้ของคุณอีกครั้ง”) //**แสดงข้อผิดพลาดสำหรับชื่อผู้ใช้
ในขณะที่ (ตรวจสอบรหัสผ่าน (รหัสผ่าน) ==false){
}
password=Prompt (“รหัสผ่านไม่ถูกต้อง กรุณากรอกรหัสผ่านอีกครั้ง”) //**แสดงข้อผิดพลาดในการขอรหัสผ่าน
ให้ชื่อผู้ใช้ =Prompt (“ป้อนชื่อผู้ใช้ของคุณ”) //**พร้อมท์ให้ป้อนชื่อผู้ใช้
ให้รหัสผ่าน =พร้อมท์ (“ป้อนรหัสผ่านของคุณ”) //**พร้อมท์ให้ป้อนรหัสผ่าน
ฟังก์ชัน ตรวจสอบชื่อผู้ใช้(ชื่อผู้ใช้){
ถ้า (ชื่อผู้ใช้ == null){
ส่งคืนเท็จ
}
ถ้า (ชื่อผู้ใช้.ความยาว›8){
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
//*ฟังก์ชันตรวจสอบชื่อผู้ใช้
ฟังก์ชัน ValidatePassword(รหัสผ่าน){
ถ้า (รหัสผ่าน == null) {
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
ถ้า (password.length ‹7) {
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
//**ฟังก์ชันตรวจสอบรหัสผ่าน
หากต้องการให้ป๊อปอัปสำเร็จเมื่อสิ้นสุดการดำเนินการ คุณสามารถใส่รหัสแจ้งเตือนได้
alert(“คุณลงชื่อเข้าใช้แล้ว”)
นี่คือลักษณะโค้ดของคุณควรมีลักษณะเช่นนี้
ในขณะที่ (ตรวจสอบความถูกต้องของชื่อผู้ใช้ (ชื่อผู้ใช้) ==false){
}
ชื่อผู้ใช้=Prompt (“ชื่อผู้ใช้ไม่ถูกต้อง โปรดป้อนชื่อผู้ใช้ของคุณอีกครั้ง”) //**แสดงข้อผิดพลาดสำหรับชื่อผู้ใช้
ในขณะที่ (ตรวจสอบรหัสผ่าน (รหัสผ่าน) ==false){
}
password=Prompt (“รหัสผ่านไม่ถูกต้อง กรุณากรอกรหัสผ่านอีกครั้ง”) //**แสดงข้อผิดพลาดในการขอรหัสผ่าน
ให้ชื่อผู้ใช้ =Prompt (“ป้อนชื่อผู้ใช้ของคุณ”) //**พร้อมท์ให้ป้อนชื่อผู้ใช้
ให้รหัสผ่าน =พร้อมท์ (“ป้อนรหัสผ่านของคุณ”) //**พร้อมท์ให้ป้อนรหัสผ่าน
alert(“คุณลงชื่อเข้าใช้แล้ว”) //**ป๊อปอัปแจ้งเตือน
ฟังก์ชัน ตรวจสอบชื่อผู้ใช้(ชื่อผู้ใช้){
ถ้า (ชื่อผู้ใช้ == null){
ส่งคืนเท็จ
}
ถ้า (ชื่อผู้ใช้.ความยาว›8){
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
//*ฟังก์ชันตรวจสอบชื่อผู้ใช้
ฟังก์ชัน ValidatePassword(รหัสผ่าน){
ถ้า (รหัสผ่าน == null) {
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
ถ้า (password.length ‹7) {
ส่งคืนเท็จ
}อย่างอื่น{
คืนค่าจริง
}
//**ฟังก์ชันตรวจสอบรหัสผ่าน
ที่นั่น! แบบฟอร์มการลงชื่อเข้าใช้ของคุณได้รับการตรวจสอบและทำงานได้อย่างราบรื่น หากคุณพบข้อผิดพลาดหรือมีข้อเสนอแนะ กรุณาแสดงความคิดเห็น T เพื่อขอบคุณ!
