จะใช้การตรวจสอบแบบฟอร์มใน Angular JS ได้อย่างไร?

การตรวจสอบความถูกต้องเป็นวิธีการ รับรองความถูกต้อง ผู้ใช้งาน. มันถูกใช้ในเทคโนโลยีเว็บทั้งหมดเช่น และ . แต่วันนี้เรามุ่งเน้นไปที่การตรวจสอบความถูกต้องใน Angular JS ตามลำดับต่อไปนี้:

• การตรวจสอบแบบฟอร์มคืออะไร?
• การตรวจสอบแบบฟอร์มใน Angular JS
• ขั้นตอนในการตรวจสอบแบบฟอร์ม
• รหัส

Form validation คืออะไร?

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

หากนิพจน์ทั่วไปและค่าฟิลด์เหมือนกันเราสามารถพูดได้ว่าแบบฟอร์มของเราได้รับการตรวจสอบแล้ว ในรูปแบบ HTML มีการตรวจสอบความถูกต้องหลายประเภทเช่น email, required, min, max, password เป็นต้น

การตรวจสอบแบบฟอร์มใน Angular JS

มาดูวิธีตรวจสอบความถูกต้องของฟอร์มใน JS เชิงมุม Angular JS มีคุณสมบัติการตรวจสอบความถูกต้องของรูปแบบต่างๆที่เราสามารถใช้เพื่อตรวจสอบความถูกต้องของฟอร์มหรือรับข้อมูลจากแบบฟอร์ม

• $ ถูกต้อง : คุณสมบัตินี้บอกว่าฟิลด์นั้นถูกต้องหรือไม่โดยใช้กฎที่เหมาะสมกับสิ่งนั้น

• $ ไม่ถูกต้อง : เนื่องจากชื่อระบุว่าสภาพอากาศของไทล์นี้ไม่ถูกต้องฟิลด์ไม่ถูกต้องหรือไม่ได้ขึ้นอยู่กับกฎที่เหมาะสม

• $ บริสุทธิ์ : มันจะคืนค่าจริงในช่องป้อนข้อมูลแบบฟอร์มไม่ได้ใช้

  
  
  

• สกปรก : มันจะส่งคืนจริงในช่องป้อนข้อมูลแบบฟอร์มที่ใช้

• $ สัมผัส : BooleanTrue หากอินพุตเบลอ

ในการเข้าถึงแบบฟอร์ม: .

ในการเข้าถึงอินพุต: ..

ตอนนี้เรามาอธิบายการตรวจสอบความถูกต้องของรูปแบบใน JS เชิงมุมด้วยตัวอย่างก่อนอื่นเราสร้างสองไฟล์หนึ่งคือ app.js และอีกไฟล์หนึ่งคือ index.html ไฟล์ index.htm ของเรามีรูปแบบ HTML อย่างง่ายที่มีการตรวจสอบความถูกต้องเชิงมุมและไฟล์ app.js ของเรามีโค้ดแบ็กเอนด์เพื่อจัดการการตรวจสอบความถูกต้องของฟอร์มในหน้า index.html

index.htmlแบบฟอร์มเนื้อหาของหน้าด้วยNovalidateทรัพย์สินและนั่นหมายความว่าอย่างไรกันแน่?

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

ขั้นตอนในการตรวจสอบแบบฟอร์ม

ในแบบฟอร์มของเราเราได้สร้าง 6 ช่องในรูปแบบของเราซึ่ง ได้แก่ ชื่อนามสกุลอีเมลโทรศัพท์รหัสผ่านและข้อความ

1. ขั้นแรกเราเพิ่มตัวตรวจสอบฟิลด์ที่จำเป็นตัวตรวจสอบนี้จะบอกผู้ใช้ว่าจำเป็นต้องมีฟิลด์เฉพาะ

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

3. เราตั้งค่าความยาวต่ำสุดและสูงสุดในการตรวจสอบรหัสผ่านของเราความยาวต่ำสุดคือ 5 และความยาวสูงสุดคือ 8 เพื่อให้ผู้ใช้สามารถให้รหัสผ่านที่ถูกต้องระหว่าง 5 ถึง 8 อักขระ

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

รหัสสำหรับการตรวจสอบแบบฟอร์มใน Angular JS

index.html

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

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', ฟังก์ชัน ($ scope) {})

เรามาพูดถึงคำสั่งการตรวจสอบความถูกต้องที่ใช้ในรูปแบบ:

c ++ จัดเรียงอาร์เรย์

• ต้องระบุ : สำหรับการระบุฟิลด์ที่ต้องการ
• ng-show : เพื่อแสดงข้อความแสดงข้อผิดพลาดตามเงื่อนไข (ตรวจสอบคุณสมบัติการตรวจสอบความถูกต้อง)
• ของความยาวขั้นต่ำ : สำหรับการระบุความยาวขั้นต่ำ
• ng-maxlength : สำหรับการให้ความยาวสูงสุด
• ของรูปแบบ : เพื่อให้ตรงกับรูปแบบเฉพาะ
• ng-model : ผูกเขตข้อมูลที่มีคุณสมบัติการตรวจสอบความถูกต้องเช่น $ error, $ valid ฯลฯ

ด้วยเหตุนี้เราจึงมาถึงจุดสิ้นสุดของบทความ Validation ใน Angular JS ฉันหวังว่าคุณจะมีความเข้าใจเกี่ยวกับสิ่งต่างๆที่ต้องพิจารณาสำหรับการตรวจสอบแบบฟอร์มใน Angular JS

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Angular framework โปรดดูที่ไฟล์ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้จะช่วยให้คุณเข้าใจ Angular ในเชิงลึกและช่วยให้คุณมีความเชี่ยวชาญในเรื่องนั้น ๆ

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบทความนี้แล้วเราจะติดต่อกลับไป