การตรวจสอบอินพุต AngularJS
รูปแบบและการควบคุม AngularJS สามารถตรวจสอบข้อมูลอินพุตได้
ป้อนการยืนยัน
ในบทก่อนหน้านี้คุณได้เรียนรู้เกี่ยวกับรูปแบบและการควบคุม AngularJS
แบบฟอร์มและการควบคุม AngularJS สามารถให้ความสามารถในการตรวจสอบและเตือนข้อมูลที่ผิดกฎหมายที่ป้อนโดยผู้ใช้
หมายเหตุ: การตรวจสอบไคลเอ็นต์ไม่สามารถรับรองความปลอดภัยของข้อมูลอินพุตของผู้ใช้ได้ดังนั้นการตรวจสอบข้อมูลบนเซิร์ฟเวอร์ก็จำเป็นเช่นกัน
รหัสแอปพลิเคชัน
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "validatectl" name = "myform" novalidate> <p> ชื่อผู้ใช้: <br> <อินพุต type = "text" name = "user" ng-model = "ผู้ใช้" ต้องการ> <span style = "สีแดง" ng-show = "myform.user. ต้องใช้ชื่อผู้ใช้ </span> </span> </p> <p> อีเมล: <br> <อินพุต type = "อีเมล" name = "อีเมล" ng-model = "อีเมล" ต้องการ> <span style = "สี: สีแดง" ng-show = "myform.email. $ dirty && myform.email. </span> <span ng-show = "myform.email. $ error.email"> ที่อยู่อีเมลที่ผิดกฎหมาย </span> </span> </p> <p> <อินพุต type = "ส่ง" ng-disabled = "myform.user. $ dirty && myform.user. $ ไม่ถูกต้อง || myform.email. $ dirty && myform.email. $ invalid"> </p> ฟังก์ชั่น ($ scope) {$ scope.user = 'John Doe';ผลการทำงาน:
ตัวอย่างการตรวจสอบ
ชื่อผู้ใช้:
จดหมาย:
หมายเหตุ: แอตทริบิวต์ HTML ฟอร์ม Novalidate ใช้เพื่อปิดใช้งานการตรวจสอบเริ่มต้นของเบราว์เซอร์
การวิเคราะห์ตัวอย่าง
Directive โมเดล NG MONDEL ใช้เพื่อผูกองค์ประกอบอินพุตเข้ากับโมเดล
วัตถุโมเดลมีคุณสมบัติสองประการ: ผู้ใช้และอีเมล
เราใช้ NG-Show Directive, Color: สีแดงจะแสดงเฉพาะในกรณีที่ข้อความสกปรก $ หรือ $ ไม่ถูกต้อง
| คุณสมบัติ | อธิบาย |
|---|---|
| $ สกปรก | มีบันทึกสำหรับกรอกแบบฟอร์ม |
| $ ถูกต้อง | เนื้อหาของฟิลด์ถูกกฎหมาย |
| $ ไม่ถูกต้อง | เนื้อหาของฟิลด์ผิดกฎหมาย |
| $ pristine | ไม่มีการกรอกบันทึกในแบบฟอร์ม |
ข้างต้นเป็นการรวบรวมข้อมูลการตรวจสอบอินพุต AngularJS เราจะเสริมในภายหลัง ฉันหวังว่ามันจะช่วยนักเรียนที่เรียน