คำแนะนำการตรวจสอบแบบฟอร์มทั่วไป
1. การตรวจสอบที่จำเป็น
ไม่ว่าจะมีการกรอกข้อมูลแบบฟอร์มเพียงเพิ่มแท็ก HTML5 ที่จำเป็นในองค์ประกอบฟิลด์อินพุต:
คัดลอกรหัสดังนี้: <อินพุต type = "text" ต้องการ />
2. ความยาวขั้นต่ำ
ตรวจสอบว่าความยาวข้อความของอินพุตแบบฟอร์มมีค่ามากกว่าค่าต่ำสุดที่แน่นอนและใช้คำสั่ง ng-minleng = "{number}" บนฟิลด์อินพุต:
คัดลอกรหัสดังนี้: <อินพุต type = "text" ng-minLength = "5" />>
3. ความยาวสูงสุด
ตรวจสอบว่าความยาวข้อความของอินพุตแบบฟอร์มน้อยกว่าหรือเท่ากับค่าสูงสุดที่แน่นอนและใช้คำสั่ง ng-maxLength = "{number}" บนฟิลด์อินพุต:
คัดลอกรหัสดังนี้: <อินพุต type = "text" ng-maxLength = "20" />>>
4. การจับคู่รูปแบบ
ใช้ ng-pattern = "/pattern/" เพื่อให้แน่ใจว่าอินพุตตรงกับนิพจน์ทั่วไปที่ระบุ:
คัดลอกรหัสรหัสดังนี้: <อินพุต type = "text" ng-pattern = "/[a-za-z]/"/>
5. อีเมล
ตรวจสอบว่าเนื้อหาอินพุตเป็นอีเมลเพียงตั้งค่าประเภทอินพุตเป็นอีเมลเช่นด้านล่าง:
คัดลอกรหัสดังนี้: <อินพุต type = "อีเมล" name = "อีเมล" ng-model = "user.email" />
6. ตัวเลข
ตรวจสอบว่าเนื้อหาอินพุตเป็นตัวเลขและตั้งค่าประเภทอินพุตเป็นหมายเลข:
คัดลอกรหัสดังต่อไปนี้: <อินพุต type = "number" name = "อายุ" ng-model = "user.age" />
7. URL
ตรวจสอบว่าเนื้อหาอินพุตเป็น URL และตั้งค่าประเภทอินพุตเป็น URL:
คัดลอกรหัสดังนี้: <อินพุต type = "url" name = "homepage" ng-model = "user.facebook_url" />
ลองทดสอบการตรวจสอบแบบฟอร์มเหล่านี้ในการใช้งานเฉพาะ:
<div> <form role = "form"> <div> <div> <label for = "name"> 1.Required </label> </div> <div> <อินพุต id = "name" type = "text" ต้องการ ng-model = 'user.name'/> </div> ความยาวต่ำสุด = 5 </label> </div> <div> <อินพุต type = "text" id = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> </div> </div> <div> <label for = "minLength"> 3.Maximum length = 20 </ ng-maxLength = "20"/> </div> </div> <div> <div> <label for = "minLength"> 4 การจับคู่รูปแบบ </label> </div> <div> <อินพุต type = "text" id = "minlength" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> </div> อีเมล </label> </div> </div> <div> <label for = "email"> 5 อีเมล </label> </div> <div> <อินพุต type = "อีเมล" id = "อีเมล" ชื่อ = "อีเมล" ng-model = "user.email"/> </div> </div> <div> <div> <dable label for = "อายุ"> 6 หมายเลข </label> </div> <div> <อินพุต type = "number" id = "age" name = "อายุ" ng-model = "user.age"/> </div> </div> <div> <div> <label for = "url"> 7. url </label> </div> </div> </div> <div> <อินพุต type = "ส่ง" value = "ส่ง"/> </div> </dhorm> </div> <div> 1. ฟิลด์ที่ต้องการ: {{user.name}} <br> 2. นาที ความยาว = 5: {{user.minlength}} <br> 3. ความยาวสูงสุด = 20: {{user.maxLength}} <br> 4. การจับคู่รูปแบบ: {{user.pattern}} <br> 5. อีเมล: {{user.email} <br> 7.url: {{user.url}} <br> </div>ในการทดสอบเราพบว่าการผูกสองทางจะดำเนินการแบบเรียลไทม์เฉพาะเมื่อนิพจน์ตอบสนองการตรวจสอบ ในขณะเดียวกันเราก็พบว่าการเรนเดอร์มีดังนี้:
ดูเหมือนว่าจะไม่มีอะไรเกิดขึ้น แต่ถ้าเราพอร์ตมันไปยังเบราว์เซอร์พร้อมกับทีมการตรวจสอบ HTML5 ที่ไม่ดีมากลองทดสอบ [IE9 ในตัวอย่างนี้] ปัญหาคือบางสาขาไม่ได้รับการยืนยันเลย
ในความเป็นจริงในตัวอย่างข้างต้นเราใช้การตรวจสอบ HTML5 และการตรวจสอบของ NG เพื่อรวมเข้าด้วยกัน ไม่รองรับการตรวจสอบ HTML5 แต่การตรวจสอบฟรีของ NG ทำงานได้ดี การแก้ปัญหานั้นง่ายมาก คุณสามารถใช้การจับคู่รูปแบบเพื่อแก้สถานการณ์เหล่านี้หรือคุณสามารถปรับแต่งคำแนะนำการตรวจสอบเพื่อเขียนใหม่หรือกำหนดกฎการตรวจสอบใหม่
บล็อกพฤติกรรมการตรวจสอบเริ่มต้นของเบราว์เซอร์สำหรับแบบฟอร์ม
เพียงเพิ่มแท็ก novalidate ในองค์ประกอบฟอร์ม คำถามคือเราจะรู้ได้อย่างไรว่าสาขาใดในรูปแบบของเราถูกต้องและสิ่งใดที่ผิดกฎหมายหรือไม่ถูกต้อง NG ยังเป็นทางออกที่ยอดเยี่ยมสำหรับสิ่งนี้ คุณสมบัติของแบบฟอร์มสามารถเข้าถึงได้ในวัตถุ $ SCOPE ที่เป็นของมันและเราสามารถเข้าถึงวัตถุ $ SCOPE ได้ดังนั้น JavaScript สามารถเข้าถึงคุณสมบัติของแบบฟอร์มทางอ้อมใน DOM ด้วยคุณสมบัติเหล่านี้เราสามารถตอบสนองแบบเรียลไทม์ในแบบฟอร์ม
คุณสมบัติเหล่านี้สามารถเข้าถึงได้โดยใช้รูปแบบ formname.inputfieldname.property
รูปแบบที่ไม่ได้แก้ไข
คุณสมบัติบูลีนระบุว่าผู้ใช้ได้แก้ไขแบบฟอร์มหรือไม่ ถ้ามันเป็นสิ่งที่หมายความว่ามันยังไม่ได้รับการแก้ไข เท็จหมายความว่าได้รับการแก้ไขแล้ว:
การคัดลอกรหัสมีดังนี้: formName.InputfieldName. $ pristine; แบบฟอร์มดัดแปลง
คุณสมบัติบูลีนถ้าผู้ใช้ได้แก้ไขแบบฟอร์มจริง ไม่ว่าแบบฟอร์มจะถูกตรวจสอบหรือไม่:
การคัดลอกรหัสมีดังนี้: formName.InputfieldName. $ สกปรก
รูปแบบที่ได้รับการตรวจสอบแล้ว
คุณสมบัติบูลีนที่ระบุว่าแบบฟอร์มได้ผ่านการตรวจสอบหรือไม่ หากการตรวจสอบแบบฟอร์มในปัจจุบันจะเป็นจริง:
รหัสคัดลอกมีดังนี้: formName.InputfieldName. $ ถูกต้องรหัสการคัดลอกมีดังนี้: formName.InputfieldName. $ ไม่ถูกต้อง
คุณสมบัติสองประการสุดท้ายมีประโยชน์อย่างยิ่งเมื่อใช้สำหรับการแสดงผลหรือซ่อนองค์ประกอบ DOM ในเวลาเดียวกันพวกเขาก็มีประโยชน์มากหากคุณต้องการตั้งค่าคลาสเฉพาะ
ความผิดพลาด
นี่เป็นคุณสมบัติที่มีประโยชน์อีกอย่างหนึ่งที่จัดทำโดย AngularJS: วัตถุข้อผิดพลาด $ มันมีเนื้อหาการตรวจสอบทั้งหมดของแบบฟอร์มปัจจุบันรวมถึงข้อมูลว่าพวกเขาถูกต้องตามกฎหมายหรือไม่ เข้าถึงคุณสมบัตินี้โดยใช้ไวยากรณ์ต่อไปนี้
การคัดลอกรหัสมีดังนี้: formName.InputfieldName. $ ERROR
หากการตรวจสอบล้มเหลวค่าของคุณสมบัตินี้เป็นจริง หากค่าเป็นเท็จหมายความว่าค่าของฟิลด์อินพุตได้ผ่านการตรวจสอบแล้ว
ด้านล่างเราทดสอบคำแนะนำการตรวจสอบเหล่านี้:
<! doctype html> <html ng-app = "mytest"> <head> <meta name = "viewport" content = "width = device-width"/> <title> ดัชนี </title> <link href = "/content/css/bootstrap.min.css src = "~/javascript/angular.min.js"> </script> <style type = "text/css"> body {padding-top: 30px; } </style> </head> <body ng-controller = "myController"> <div> <form role = "form" name = "myform" ng-submit = "submitform (myform. $ ถูกต้อง) ng-model = 'user.name'/> <span ng-show = "myform.name. $ dirty && myform.name. $ ถูกต้อง"> </span> </div> </div> <div> <div> <darm> <label for "minLength"> 2 ความยาวต่ำสุด = 5 </label> </div> <div> <อินพุต type = "text" id = "minlength" name = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> <span ng-show = "myform.minlength. $ dirty && myform.minlength สำหรับ = "maxlength"> 3.Maximum length = 20 </label> </div> <div> <อินพุต type = "text" id = "maxlength" name = "maxlength" ng-model = "user.maxlength" ng-maxlength = "20"/> <span ng-show = </div> <div> <div> <label for = "pattern"> 4 การจับคู่รูปแบบ </label> </div> <div> <อินพุต type = "text" id = "pattern" name = "pattern" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> <span ng-show = "myform.patter. <label for = "email"> 5 อีเมล </label> </div> <div> <อินพุต type = "อีเมล" id = "อีเมล" ชื่อ = "อีเมล" ng-model = "user.email"/> <span ng-show = "myform.email. $ dirty && myform.email. $ valid" Number </label> </div> <div> <อินพุต type = "number" id = "age" name = "age" ng-model = "user.age"/> <span ng-show = "myform.age. $ dirty && myform.age. $ valid"> </span> id = "url" name = "url" ng-model = "user.url"/> <span ng-show = "myform.url. $ dirty && myform.url. $ ถูกต้อง"> </span> </div> </div> <div> <อินพุต ng-disabled = "myform. $ invalid" {{user.name}} $ pristine [ไม่ได้แก้ไข]: {{myform.name. $ pristine}} $ สกปรก [แก้ไข]: {{myform.name. $ dirty}} $ invalid [การตรวจสอบล้มเหลว]: {{myform.name {{myform.name. $ ถูกต้อง}} ต้องการ: {{myform.name. $ error.Required}} <br> 2. ความยาวขั้นต่ำ = 5: {{user.minlength}} $ pristine [ไม่แก้ไข]: {{myform.minlength {{myform.minlength. $ dirty}} $ ไม่ถูกต้อง【การตรวจสอบล้มเหลว】: {{myform.minlength. $ INVALID}} $ invalid 【การตรวจสอบที่ประสบความสำเร็จ】: {{{{{{{{{{{{{{ ความยาว = 20: {{user.maxLength}} $ pristine 【ไม่ได้รับการแก้ไข】: {{myform.maxLength. $ pristine}} $ สกปรก【แก้ไข】: {{myform.maxlength $ dirty}} $ Invalid 【การตรวจสอบความล้มเหลว ประสบความสำเร็จ】: {{myform.maxLength. $ verid}} $ ข้อผิดพลาด【รายละเอียดข้อผิดพลาด】: {{myform.maxLength. $ error}} <br> 4. การจับคู่รูปแบบ: {{user.pattern}} $ pristine {{myform.pattern. $ dirty}} $ ไม่ถูกต้อง【การตรวจสอบล้มเหลว】: {{myform.pattern. $ INVALID}} $ ไม่ถูกต้อง【การตรวจสอบที่ประสบความสำเร็จ】: {{{{{{{{{{mypatter. {{user.email}} $ pristine 【ไม่ได้รับการแก้ไข】: {{myform.email. $ pristine}} $ สกปรก【แก้ไข】: {{myform.email. $ สกปรก}} $ ไม่ถูกต้อง {{myform.email. $ ถูกต้อง}} $ ข้อผิดพลาด【รายละเอียดข้อผิดพลาด】: {{myform.email. $ ข้อผิดพลาด}} <br> 6. หมายเลข: {{user.age}} $ pristine 【ไม่แก้ไข】: {{myform.age. $ pristine} $ dirty $ ไม่ถูกต้อง【การตรวจสอบล้มเหลว】: {{myform.age. $ ไม่ถูกต้อง}} $ ไม่ถูกต้อง【การตรวจสอบที่ประสบความสำเร็จ】: {{myform.age. $ ถูกต้อง}} $ ข้อผิดพลาด【รายละเอียดข้อผิดพลาด】: {{myform.age. {{myform.url. $ pristine}} $ สกปรก【แก้ไข】: {{myform.url. $ dirty}} $ ไม่ถูกต้อง【การตรวจสอบล้มเหลว】: {{myform.url. $ invalid}} $ ไม่ถูกต้อง {{myform.url. $ error}} <br> </div> </body> </html> <script type = "text/javascript"> angular.module ('mytest', []) .controller ('myController', ฟังก์ชั่น ($ scope) การแจ้งเตือน ('การตรวจสอบล้มเหลว');ผลกระทบมีดังนี้:
ในเวลาเดียวกัน NG ได้ตั้งค่าสไตล์ CSS บางอย่างสำหรับคำแนะนำการตรวจสอบเหล่านี้ในลักษณะเป้าหมาย
รวมถึง:
การคัดลอกรหัสมีดังนี้: .ng-valid {} .ng-invalid {} .ng-pristine {} .ng-dirty {}/ * กฎ CSS ที่เฉพาะเจาะจงจริงๆที่ใช้โดย angular */. ng-invalid-required {} .ng-invalid-minlided
พวกเขาสอดคล้องกับสถานะเฉพาะของฟิลด์อินพุตแบบฟอร์ม
ตัวอย่างเช่นเมื่ออินพุตในฟิลด์ผิดกฎหมายคลาส. NG-Invlid จะถูกเพิ่มลงในฟิลด์นี้ คุณสามารถแก้ไข CS ที่คุณชื่นชอบได้ คุณสามารถปรับแต่งคลาสเหล่านี้เป็นการส่วนตัวเพื่อใช้แอปพลิเคชันสถานการณ์เฉพาะ
อย่างไรก็ตามคำแนะนำการตรวจสอบเริ่มต้นอาจไม่สามารถปฏิบัติตามสถานการณ์แอปพลิเคชันที่แท้จริงของเราได้อย่างสมบูรณ์และฟังก์ชั่นของคำแนะนำการตรวจสอบที่กำหนดเองก็มีให้โดย NG
ก่อนอื่นมาดูตัวอย่างง่ายๆ:
Angular.module ("mytest", []) .directive ('martio -mail', [function () {return {ต้องการ: "ngmodel", ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr, ngmodel) {ถ้า (ngmodel) {var emailsregexp = /^( [[[-z0-9!#$%&'*+//=?^_` {tharpenmelyme---like+@y-z0-9- เหมือนกัน+(/. ngmodel. $ setValidity ("martio -mailtion", ความถูกต้อง);รหัสของหน้า HTML มีดังนี้:
<form role = "form" id = "custom_form" name = "custom_form" novelidate> <div> <dable> อีเมลหลายอีเมล < /label> <div> <อินพุตหลายชื่อชื่อ = "user_email" ng-model = "user.email" placeholder = "การตรวจสอบที่กำหนดเอง </div> </div> <div> <อินพุต ng-disabled = "custom_form. $ unvalid" type = "submit" value = "ส่ง"/> </div> </form>
รหัสนั้นง่ายมากและเอฟเฟกต์มีดังนี้:
รหัสนี้ง่ายมาก แต่เกี่ยวข้องกับคุณสมบัติที่สำคัญหลายประการของ NGModelController $ viewValue
คุณสมบัติ $ viewValue ถือสตริงจริงที่จำเป็นเพื่ออัปเดตมุมมอง
$ modelValue
$ modelValue จัดขึ้นโดยรูปแบบข้อมูล $ modelValue และ $ viewValue อาจแตกต่างกันไปขึ้นอยู่กับว่า $ Parser Pipeline ทำงานอยู่หรือไม่
$ parsers
ค่าของ $ parsers เป็นอาร์เรย์ที่ประกอบด้วยฟังก์ชั่น เมื่อผู้ใช้โต้ตอบกับคอนโทรลเลอร์และเมธอด $ setViewValue () ใน ngmodelcontroller เรียกว่าฟังก์ชั่นใน ngmodelcontroller เรียกว่าทีละคนเมื่อผู้ใช้โต้ตอบกับคอนโทรลเลอร์ ค่าที่อ่านโดย ngmodel จาก DOM จะ ถูกส่งผ่านไปยังฟังก์ชั่นใน $ parsers และประมวลผลโดย parser ตามลำดับ นี่คือการประมวลผลและแก้ไขค่า
หมายเหตุ: ฟังก์ชั่น ngmodel. $ setViewValue () ใช้เพื่อตั้งค่ามุมมองในขอบเขต
ฟังก์ชั่น ngmodel. $ setViewValue () สามารถยอมรับพารามิเตอร์
ค่า (สตริง): พารามิเตอร์ค่าเป็นค่าจริงที่เราต้องการกำหนดให้กับอินสแตนซ์ ngmodel
วิธีนี้จะอัปเดต $ viewValue ท้องถิ่นบนคอนโทรลเลอร์และส่งผ่านค่าไปยังฟังก์ชัน $ parser แต่ละรายการ (รวมถึงตัวตรวจสอบ) เมื่อค่าถูกแยกวิเคราะห์และฟังก์ชั่นทั้งหมดในไปป์ไลน์ $ parser จะถูกเรียกค่าจะถูกกำหนดให้กับคุณสมบัติ $ modelValue และส่งผ่านไปยังนิพจน์ที่จัดทำโดยคุณสมบัติ NG-model ในคำสั่ง ในที่สุดหลังจากขั้นตอนทั้งหมดเสร็จสิ้นผู้ฟังทั้งหมดใน $ ViewChangelisteners จะถูกเรียก โปรดทราบว่าการโทร $ setViewValue () เพียงอย่างเดียวจะไม่ทำให้เกิดการย่อยสลายใหม่ดังนั้นหากคุณต้องการอัปเดตคำสั่งคุณต้องเรียกใช้ Digest ด้วยตนเองหลังจากตั้งค่า $ viewValue วิธี $ setViewValue () เหมาะสำหรับการฟังเหตุการณ์ที่กำหนดเองในคำสั่งที่กำหนดเอง (เช่นการใช้ปลั๊กอิน jQuery พร้อมฟังก์ชั่นการโทรกลับ) เราต้องการตั้งค่า $ viewValue และดำเนินการ Digest Loops เมื่อเรียกกลับ
$ formatters
ค่าของ $ formatters เป็นอาร์เรย์ของฟังก์ชั่นที่เรียกว่าหนึ่งในรูปแบบของไปป์ไลน์เมื่อค่าของโมเดลข้อมูลเปลี่ยนไป มันไม่มีผลกระทบต่อไปป์ไลน์ $ parser และใช้ในการจัดรูปแบบและแปลงค่าเพื่อแสดงในตัวควบคุมด้วยค่านี้
$ ViewChangelisteners
ค่าของ $ viewchangelisteners เป็นอาร์เรย์ของฟังก์ชั่นที่เรียกว่าหนึ่งในรูปแบบของท่อเมื่อค่าในมุมมองเปลี่ยน ด้วย $ viewchangelisteners พฤติกรรมที่คล้ายกันสามารถทำได้โดยไม่ต้องใช้ $ watch เนื่องจากค่าส่งคืนจะถูกละเว้นฟังก์ชั่นเหล่านี้ไม่จำเป็นต้องส่งคืนค่า
$ ข้อผิดพลาด
วัตถุ $ ข้อผิดพลาดเก็บชื่อตัวตรวจสอบที่ไม่ได้ผ่านการตรวจสอบและข้อมูลข้อผิดพลาดที่เกี่ยวข้อง
$ pristine
ค่าของ $ pristine คือบูลีนซึ่งสามารถบอกเราได้ว่าผู้ใช้ได้ปรับเปลี่ยนการควบคุมหรือไม่
$ สกปรก
ค่าของ $ Dirty เป็นสิ่งที่ตรงกันข้ามกับ $ pristine ซึ่งสามารถบอกเราได้ว่าผู้ใช้มีปฏิสัมพันธ์กับการควบคุมหรือไม่
$ ถูกต้อง
ค่า $ ที่ถูกต้องบอกเราว่ามีข้อผิดพลาดในการควบคุมปัจจุบันหรือไม่ ค่าเป็นเท็จเมื่อมีข้อผิดพลาดและค่าเป็นจริงเมื่อไม่มีข้อผิดพลาด
$ ไม่ถูกต้อง
ค่า $ ไม่ถูกต้องบอกเราว่ามีข้อผิดพลาดอย่างน้อยหนึ่งข้อในการควบคุมปัจจุบันและค่าของมันตรงกันข้ามกับ $ ถูกต้องหรือไม่
หลังจากเรียนรู้จุดความรู้พื้นฐานคุณต้องเรียนรู้วิธีการเขียนของการตรวจสอบที่กำหนดเองอย่างลึกซึ้ง หลังจาก NG1.3 ความสะดวกในการใช้คำแนะนำการตรวจสอบได้รับการปรับปรุง
ข้างต้นเป็นคำอธิบายโดยละเอียดของตัวอย่างของการใช้แบบฟอร์มการตรวจสอบ AngularJS ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะช่วยคุณได้ ฉันจะอัปเดตความรู้ที่เกี่ยวข้องของแบบฟอร์มการตรวจสอบ AngularJS ต่อไปในอนาคต โปรดใส่ใจกับเว็บไซต์ Wulin.com!