โฮมเพจ » ออกแบบเว็บไซต์ » แนะนำการตรวจสอบข้อ จำกัด HTML5

    แนะนำการตรวจสอบข้อ จำกัด HTML5

    เว็บไซต์และแอปพลิเคชั่นที่ไม่สามารถจินตนาการได้หากไม่มีแบบฟอร์มที่ทำให้เราสามารถ เชื่อมต่อกับผู้ใช้ของเรา, และ รับข้อมูล เราต้องการเพื่อความปลอดภัยในการทำธุรกรรมกับพวกเขา เราต้องการ อินพุตของผู้ใช้ที่ถูกต้อง, อย่างไรก็ตามเราจำเป็นต้องได้รับในลักษณะที่ ไม่รอดพ้น ผู้ใช้ของเรามากเกินไป.

    ในขณะที่เราสามารถปรับปรุงการใช้งานแบบฟอร์มของเราด้วยรูปแบบการออกแบบ UX ที่เลือกสรรมาอย่างชาญฉลาด HTML5 ยังมีกลไกดั้งเดิมสำหรับการตรวจสอบความถูกต้องของข้อ จำกัด ที่ทำให้เราสามารถ ตรวจจับข้อผิดพลาดของอินพุตในส่วนหน้า.

    ในโพสต์นี้เราจะเน้น การตรวจสอบข้อ จำกัด ที่มากับเบราว์เซอร์, และดูว่าผู้พัฒนาส่วนหน้าทำได้อย่างไร การป้อนข้อมูลที่ปลอดภัยของผู้ใช้ที่ถูกต้องโดยใช้ HTML5.

    ทำไมเราต้องการการตรวจสอบอินพุตส่วนหน้า

    การตรวจสอบอินพุต มีสองเป้าหมายหลัก เนื้อหาที่เราต้องได้รับคือ:

    1. มีประโยชน์

    พวกเราต้องการ ข้อมูลที่ใช้งานได้ที่เราสามารถทำงานได้. เราต้องทำให้ผู้คนเข้ามา ข้อมูลจริงในรูปแบบที่ถูกต้อง. ตัวอย่างเช่นไม่มีใครที่มีชีวิตอยู่ในวันนี้เกิดเมื่อ 200 ปีก่อน การรับข้อมูลเช่นนี้อาจดูตลกในตอนแรก แต่ในระยะยาวมันน่ารำคาญและเติมฐานข้อมูลของเราด้วยข้อมูลที่ไร้ประโยชน์.

    2. ปลอดภัย

    เมื่อกล่าวถึงความปลอดภัยหมายความว่าเราจำเป็นต้อง ป้องกันการฉีดเนื้อหาที่เป็นอันตราย - ไม่ว่าจะโดยเจตนาหรือโดยอุบัติเหตุ.

    สามารถรับประโยชน์ (รับข้อมูลที่สมเหตุสมผล) ได้ เฉพาะในฝั่งไคลเอ็นต์, ทีมแบ็กเอนด์ไม่สามารถช่วยเหลือสิ่งนี้มากเกินไป เพื่อให้บรรลุ ความปลอดภัย, ผู้พัฒนาส่วนหน้าและส่วนหลังจำเป็นต้องทำงานร่วมกัน.

    หากนักพัฒนาส่วนหน้าตรวจสอบความถูกต้องของข้อมูลในฝั่งไคลเอ็นต์ ทีมแบ็กเอนด์จะต้องจัดการกับช่องโหว่ที่น้อยกว่ามาก. การแฮ็ก (ไซต์) มักก่อให้เกิด ส่งข้อมูลพิเศษ, หรือ ข้อมูลในรูปแบบที่ไม่ถูกต้อง. นักพัฒนาสามารถต่อสู้กับช่องโหว่ด้านความปลอดภัยเช่นนี้ประสบความสำเร็จในการต่อสู้จากส่วนหน้า.

    ตัวอย่างเช่นคู่มือความปลอดภัย PHP แนะนำให้ตรวจสอบทุกอย่างที่เราสามารถทำได้ในฝั่งไคลเอ็นต์ พวกเขาเน้นความสำคัญของการตรวจสอบอินพุตส่วนหน้าโดยให้ตัวอย่างมากมายเช่น:

    "การตรวจสอบความถูกต้องของข้อมูลทำงานได้ดีที่สุดกับค่าที่ จำกัด อย่างยิ่งเช่นเมื่อบางสิ่งต้องเป็นจำนวนเต็มหรือสตริงตัวอักษรและตัวเลขหรือ URL URL"

    ในการตรวจสอบอินพุต frontend งานของเราคือ กำหนดข้อ จำกัด ที่สมเหตุสมผล ในการป้อนข้อมูลของผู้ใช้ คุณลักษณะการตรวจสอบข้อ จำกัด ของ HTML5 ช่วยให้เราทราบวิธีการดังกล่าว.

    การตรวจสอบข้อ จำกัด HTML5

    ก่อน HTML5 นักพัฒนาส่วนหน้าถูก จำกัด ตรวจสอบการป้อนข้อมูลของผู้ใช้ด้วย JavaScript, ซึ่งเป็นกระบวนการที่น่าเบื่อและผิดพลาดได้ง่าย เพื่อปรับปรุงการตรวจสอบรูปแบบฝั่งไคลเอ็นต์ HTML5 ได้แนะนำ การตรวจสอบข้อ จำกัด อัลกอริทึมที่ทำงานในเบราว์เซอร์สมัยใหม่และ ตรวจสอบความถูกต้องของอินพุตที่ส่ง.

    ในการประเมินผลอัลกอริทึมใช้ คุณลักษณะที่เกี่ยวข้องกับการตรวจสอบความถูกต้องขององค์ประกอบอินพุต, เช่น ,

    maxlength คุณลักษณะ ไม่ส่งคืนข้อความแสดงข้อผิดพลาด, แต่เบราว์เซอร์ไม่อนุญาตให้ผู้ใช้พิมพ์เกินจำนวนอักขระที่ระบุ นั่นเป็นสาเหตุที่สำคัญ แจ้งผู้ใช้เกี่ยวกับข้อ จำกัด, ไม่เช่นนั้นพวกเขาจะไม่เข้าใจว่าทำไมพวกเขาจึงไม่สามารถพิมพ์ต่อไปได้.

    4. แบบแผน สำหรับการตรวจสอบ Regex

    แบบแผน คุณลักษณะช่วยให้เรา ใช้นิพจน์ปกติ ในกระบวนการตรวจสอบอินพุตของเรา การแสดงออกปกติคือ ชุดอักขระที่กำหนดไว้ล่วงหน้า นั่นเป็นรูปแบบที่แน่นอน เราสามารถใช้มันเพื่อค้นหาสตริงที่เป็นไปตามรูปแบบหรือเพื่อบังคับใช้รูปแบบบางอย่างที่กำหนดโดยรูปแบบ.

    กับ แบบแผน คุณลักษณะที่เราสามารถทำได้หลัง - จำกัด ผู้ใช้เพื่อส่งข้อมูลของพวกเขาในรูปแบบที่ ตรงกับการแสดงออกปกติที่กำหนด.

    แบบแผน แอตทริบิวต์มีกรณีการใช้งานมากมาย แต่มันมีประโยชน์อย่างยิ่งเมื่อเราต้องการ ตรวจสอบความถูกต้องของฟิลด์รหัสผ่าน.

    ตัวอย่างด้านล่างกำหนดให้ผู้ใช้ป้อนรหัสผ่านที่มีความยาวอย่างน้อย 8 ตัวอักษรและมีอย่างน้อยหนึ่งตัวอักษรและหนึ่งหมายเลข (แหล่งที่มาของ regex ที่ฉันใช้).

     

    อีกสองสามสิ่ง

    ในบทความนี้เราได้ดูวิธีการใช้ประโยชน์จาก การตรวจสอบความถูกต้องของฟอร์มของเบราว์เซอร์ จัดทำโดยอัลกอริทึมการตรวจสอบข้อ จำกัด พื้นเมือง HTML5 สำหรับการสร้างสคริปต์การตรวจสอบที่กำหนดเองของเราเราจำเป็นต้องใช้ API การตรวจสอบความถูกต้องซึ่งอาจเป็นขั้นตอนต่อไปในการปรับแต่งทักษะการตรวจสอบแบบฟอร์ม.

    แบบฟอร์ม HTML5 สามารถเข้าถึงได้โดยเทคโนโลยีช่วยเหลือดังนั้นเราไม่จำเป็นต้องใช้ เพลงที่จำเป็น คุณลักษณะ ARIA เพื่อทำเครื่องหมายฟิลด์ป้อนข้อมูลที่จำเป็นสำหรับโปรแกรมอ่านหน้าจอ อย่างไรก็ตามยังคงมีประโยชน์ในการเพิ่มการรองรับการเข้าถึงสำหรับเบราว์เซอร์รุ่นเก่า มันเป็นไปได้ที่จะ ยกเลิกการตรวจสอบข้อ จำกัด โดยการเพิ่ม novalidate แอตทริบิวต์บูลีนเพื่อ

    ธาตุ.