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

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

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

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

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

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

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

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

2. ปลอดภัย

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

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

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

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

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

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

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

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

ในการประเมินผลอัลกอริทึมใช้ คุณลักษณะที่เกี่ยวข้องกับการตรวจสอบความถูกต้องขององค์ประกอบอินพุต, เช่น , </code>, และ <code><select></code>. หากคุณต้องการทราบวิธีการตรวจสอบข้อ จำกัด เกิดขึ้นทีละขั้นตอนในเบราว์เซอร์ตรวจสอบเอกสาร WhatWG นี้.</p> <p>ด้วยคุณสมบัติการตรวจสอบข้อ จำกัด ของ HTML5 เราสามารถดำเนินการทั้งหมดได้ <strong>ภารกิจการตรวจสอบอินพุตมาตรฐาน</strong> ในฝั่งไคลเอ็นต์ <strong>ไม่มี JavaScript โดยใช้ HTML5 เพียงอย่างเดียว</strong>.</p> <p>ในการทำงานที่เกี่ยวข้องกับการตรวจสอบที่ซับซ้อนยิ่งขึ้น HTML5 มอบ a. ให้กับเรา <strong>API การตรวจสอบข้อ จำกัด JavaScript</strong> เราสามารถใช้เพื่อตั้งค่าสคริปต์ตรวจสอบที่กำหนดเองของเรา.</p> <h4>ตรวจสอบกับประเภทสัญญาณความหมาย</h4> <p>HTML5 ได้เปิดตัว <strong>ชนิดอินพุตแบบ semantic</strong> ที่ - นอกเหนือจากการระบุความหมายขององค์ประกอบสำหรับตัวแทนผู้ใช้ - ยังสามารถใช้ในการ <strong>ตรวจสอบการป้อนข้อมูลของผู้ใช้</strong> โดย จำกัด ผู้ใช้ในรูปแบบอินพุตที่แน่นอน.</p> <p>นอกจากประเภทอินพุตที่มีอยู่ก่อนหน้า HTML5 แล้ว (<code>ข้อความ</code>, <code>รหัสผ่าน</code>, <code>เสนอ</code>, <code>รีเซ็ต</code>, <code>วิทยุ</code>, <code>ช่องทำเครื่องหมาย</code>, <code>ปุ่ม</code>, <code>ซ่อนเร้น</code>) เรายังสามารถใช้ต่อไปนี้ <strong>ประเภทอินพุต HTML5 semantic</strong>: <code>อีเมล</code>,<code>โทร</code>,<code>URL</code>,<code>จำนวน</code>,<code>เวลา</code>,<code>วันที่</code>,<code>วันเวลา</code>,<code>วันที่และเวลาท้องถิ่น</code>, <code>เดือน</code>,<code>สัปดาห์</code>, <code>พิสัย</code>, <code>ค้นหา</code>,<code>สี</code>.</p> <p>เราสามารถใช้ประเภทอินพุต HTML5 กับเบราว์เซอร์รุ่นเก่าได้อย่างปลอดภัยเนื่องจากมันจะทำงานเป็น <code><input type="text"></code> ในเบราว์เซอร์ที่ไม่รองรับ.</p> <p>มาดูกันว่าจะเกิดอะไรขึ้นเมื่อผู้ใช้ป้อนประเภทอินพุตผิด สมมติว่าเราได้สร้างช่องป้อนอีเมลด้วยรหัสต่อไปนี้:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">อีเมลของคุณ:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>เมื่อผู้ใช้พิมพ์สตริงที่ไม่ได้ใช้รูปแบบอีเมลอัลกอริทึมการตรวจสอบข้อ จำกัด <strong>ไม่ส่งแบบฟอร์ม</strong>, และ <strong>ส่งคืนข้อความแสดงข้อผิดพลาด</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>กฎเดียวกันนี้ใช้กับประเภทอินพุตอื่นเช่นกัน <code>พิมพ์ = "URL"</code> ผู้ใช้สามารถส่งอินพุตที่เป็นไปตามรูปแบบ URL เท่านั้น (เริ่มต้นด้วยโปรโตคอลเช่น <code>http: //</code> หรือ <code>ftp: //</code>).</p> <p>อินพุตบางชนิดใช้การออกแบบที่ <strong>ไม่อนุญาตให้ผู้ใช้ป้อนรูปแบบการป้อนที่ไม่ถูกต้อง</strong>, ตัวอย่างเช่น <code>สี</code> และ <code>พิสัย</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">สีพื้นหลัง:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>ถ้าเราใช้ <code>สี</code> ประเภทอินพุตที่ผู้ใช้มีข้อ จำกัด ในการเลือกสีจากเครื่องมือเลือกสีหรือใช้สีดำเป็นค่าเริ่มต้น ช่องป้อนข้อมูลคือ <strong>ถูก จำกัด ด้วยการออกแบบ</strong>, ดังนั้นจึงไม่ปล่อยให้โอกาสมากสำหรับข้อผิดพลาดของผู้ใช้.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>เมื่อเหมาะสมก็ควรพิจารณาใช้ <code><select></code> แท็ก HTML ที่ทำงานคล้ายกับประเภทอินพุตที่ จำกัด โดยการออกแบบเหล่านี้ มันช่วยให้ผู้ใช้เลือกจากรายการแบบเลื่อนลง.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">ผลไม้ที่คุณชอบ:</label> <select name="fruit"> <option value="apple">แอปเปิ้ล</option> <option value="pear">ลูกแพร์</option> <option value="orange">ส้ม</option> <option value="raspberry">ราสเบอร์รี่</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>ใช้คุณสมบัติการตรวจสอบของ HTML5</h4> <p>การใช้ประเภทอินพุตแบบ semantic จะกำหนดข้อ จำกัด บางประการเกี่ยวกับสิ่งที่ผู้ใช้ได้รับอนุญาตให้ส่ง แต่ในหลาย ๆ กรณีเราต้องการที่จะเพิ่มขึ้นอีกเล็กน้อย นี่คือเมื่อ <strong>แอตทริบิวต์ที่เกี่ยวข้องกับการตรวจสอบ</strong> ของ <code><input></code> แท็กสามารถช่วยเราออก.</p> <p>แอตทริบิวต์ที่เกี่ยวข้องกับการตรวจสอบความถูกต้องเป็นของประเภทอินพุตบางอย่าง (ไม่สามารถใช้งานได้ <em>ทั้งหมด</em> ประเภท) ที่พวกเขากำหนดข้อ จำกัด เพิ่มเติม.</p> <h5>1. <code>จำเป็นต้องใช้</code> สำหรับการรับอินพุตที่ถูกต้องโดยวิธีการทั้งหมด</h5> <p> <code>จำเป็นต้องใช้</code> คุณลักษณะเป็นคุณลักษณะการตรวจสอบ HTML ที่รู้จักกันดีที่สุด มันคือ <strong>แอตทริบิวต์บูลีน</strong> ซึ่งหมายความว่ามัน <strong>ไม่รับค่าใด ๆ</strong>, เราเพียงแค่ต้องวางไว้ภายใน <code><input></code> แท็กถ้าเราต้องการใช้:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>หากผู้ใช้ลืมที่จะป้อนค่าลงในช่องป้อนข้อมูลที่จำเป็นเบราว์เซอร์ <strong>ส่งคืนข้อความแสดงข้อผิดพลาด</strong> ที่เตือนพวกเขาให้กรอกในช่องและพวกเขา <strong>ไม่สามารถส่งแบบฟอร์ม</strong> จนกว่าพวกเขาจะให้ข้อมูลที่ถูกต้อง นั่นเป็นเหตุผลที่สำคัญเสมอ <strong>ทำเครื่องหมายด้วยสายตา</strong> เขตข้อมูลที่จำเป็นให้กับผู้ใช้.</p> <p> <code>จำเป็นต้องใช้</code> คุณลักษณะสามารถ <strong>ใช้ร่วมกับประเภทอินพุตต่อไปนี้</strong>: <code>ข้อความ</code>, <code>ค้นหา</code>, <code>URL</code>, <code>โทร</code>, <code>อีเมล</code>, <code>รหัสผ่าน</code>, <code>วันที่</code>, <code>วันเวลา</code>, <code>วันที่และเวลาท้องถิ่น</code>, <code>เดือน</code>, <code>สัปดาห์</code>,<code>เวลา</code>, <code>จำนวน</code>, <code>ช่องทำเครื่องหมาย</code>, <code>วิทยุ</code>, <code>ไฟล์</code>, บวกกับ <code><textarea></code>และ <code><select></code> แท็ก HTML.</p> <h5>2. <code>นาที</code>, <code>สูงสุด</code> และ <code>ขั้นตอน</code> สำหรับการตรวจสอบหมายเลข</h5> <p> <code>นาที</code>, <code>สูงสุด</code> และ <code>ขั้นตอน</code> คุณลักษณะช่วยให้เราสามารถ <strong>ใส่ข้อ จำกัด ลงในช่องใส่หมายเลข</strong>. พวกเขาสามารถใช้ร่วมกับ <code>พิสัย</code>, <code>จำนวน</code>, <code>วันที่</code>, <code>เดือน</code>, <code>สัปดาห์</code>, <code>วันเวลา</code>, <code>วันที่และเวลาท้องถิ่น</code>, และ <code>เวลา</code> ประเภทอินพุต.</p> <p> <code>นาที</code> และ <code>สูงสุด</code> คุณลักษณะให้วิธีที่ดีในการได้อย่างง่ายดาย <strong>ยกเว้นข้อมูลที่ไม่สมเหตุสมผล</strong>. ตัวอย่างเช่นตัวอย่างด้านล่างบังคับให้ผู้ใช้ส่งอายุระหว่าง 18 ถึง 120.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">อายุของคุณ:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>เมื่ออัลกอริทึมการตรวจสอบข้อ จำกัด กระแทกเข้ากับผู้ใช้ที่มีขนาดเล็กกว่า <code>นาที</code>, หรือใหญ่กว่า <code>สูงสุด</code> ค่ามันจะป้องกันไม่ให้เข้าถึงส่วนแบ็คเอนด์และส่งกลับข้อผิดพลาด.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p> <code>ขั้นตอน</code> คุณลักษณะ <strong>ระบุช่วงเวลาที่เป็นตัวเลข</strong> ระหว่างค่าทางกฎหมายของช่องใส่ตัวเลข ตัวอย่างเช่นหากเราต้องการให้ผู้ใช้เลือกเฉพาะจากปีอธิกสุรทินเราสามารถเพิ่ม <code>ขั้นตอน = "4"</code> คุณลักษณะไปที่สนาม ในตัวอย่างด้านล่างฉันใช้ <code>จำนวน</code> ประเภทอินพุตเนื่องจากไม่มี <code>type = "ปี"</code> ใน HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">ปีกระโดดที่คุณชื่นชอบ:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>ด้วยข้อ จำกัด ที่กำหนดไว้ล่วงหน้าผู้ใช้สามารถเลือกได้จากปีอธิกสุรทินระหว่างปีพ. ศ. 2515 และ 2559 หากพวกเขาใช้ลูกศรขึ้นเล็ก ๆ ที่มาพร้อมกับ <code>จำนวน</code> ประเภทอินพุต พวกเขายังสามารถพิมพ์ค่าด้วยตนเองลงในช่องใส่ แต่ในกรณีที่มันไม่เป็นไปตามข้อ จำกัด เบราว์เซอร์จะกลับข้อผิดพลาด.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maxlength</code> สำหรับการตรวจสอบความยาวข้อความ</h5> <p> <code>maxlength</code> คุณลักษณะทำให้มันเป็นไปได้ <strong>ตั้งค่าความยาวอักขระสูงสุด</strong> สำหรับช่องใส่ข้อความ มันสามารถใช้ร่วมกับ <code>ข้อความ</code>, <code>ค้นหา</code>, <code>URL</code>, <code>โทร</code>, <code>อีเมล</code> และ <code>รหัสผ่าน</code> ประเภทอินพุตและด้วย <code><textarea></code> แท็ก HTML.</p> <p> <code>maxlength</code> แอตทริบิวต์อาจเป็นโซลูชันที่ยอดเยี่ยมสำหรับฟิลด์หมายเลขโทรศัพท์ที่ไม่มีอักขระเกินจำนวนที่กำหนดหรือสำหรับแบบฟอร์มการติดต่อที่เราไม่ต้องการให้ผู้ใช้เขียนมากกว่าความยาวที่แน่นอน.</p> <p>ข้อมูลโค้ดด้านล่างแสดงตัวอย่างสำหรับส่วนหลังซึ่ง จำกัด ข้อความของผู้ใช้ไว้ที่ 500 ตัวอักษร. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">ข้อความ (สูงสุด 500 ตัวอักษร):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

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

 
 * รหัสผ่านของคุณ: