AngularJS ใช้การตรวจสอบแบบฟอร์ม

แม้ว่าฉันจะไม่ได้เป็นโปรแกรมเมอร์ส่วนหน้า แต่ฉันเข้าใจว่าการทำงานของการตรวจสอบอย่างดีนั้นสำคัญแค่ไหน

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

AngularJS ให้ฟังก์ชั่นการตรวจสอบรูปแบบที่สะดวกมากบันทึกไว้ที่นี่

เริ่มต้นด้วยรหัสต่อไปนี้

การคัดลอกรหัสมีดังนี้:

<form ng-app = "myapp" ng-controller = "validationcontroller" name = "mainform" novalidate>

<p> อีเมล:

<input type = "email" name = "email" ng-model = "อีเมล" ที่จำเป็น>

<span style = "color: red" ng-show = "mainform.email. $ dirty && mainform.email. $ ไม่ถูกต้อง">

<span ng-show = "mainform.email. $ error.urequired"> อีเมลจำเป็นต้องใช้ </span>

<span ng-show = "mainform.email. $ error.email"> ที่อยู่อีเมลที่ไม่ถูกต้อง </span>

</span>

</p>

<p>

<อินพุต type = "ส่ง" ng-disabled = "mainform. $ ไม่ถูกต้อง">

</p>

</form>

<script>

Angular.module ('myapp', [])

.Controller ('ValidationController', ['$ scope', ฟังก์ชั่น ($ scope) {

$ scope.user = 'kavlez';

$ scope.email = '[email protected]';

-

</script>

ตัวเลือกการตรวจสอบบางอย่างสำหรับแท็กอินพุตมักใช้กับแท็ก HTML5

ที่จำเป็น

<อินพุต type = "text" ต้องการ />

ความยาว

ใช้ directive ng-minlength/ng-maxlength

<input type = "text" ng-minLength = "5" />

รูปแบบเฉพาะ

ตัวอย่างเช่นอีเมล, URL และหมายเลขเพียงแค่ตั้งค่าประเภทเป็นประเภทที่เกี่ยวข้องเช่น:

การคัดลอกรหัสมีดังนี้:

<input type = "email" name = "email" ng-model = "user.email" /> >>

<อินพุต type = "number" name = "age" ng-model = "user.age" />>>

<อินพุต type = "url" name = "homepage" ng-model = "user.facebook_url" />

การจับคู่รูปแบบ

ใช้ Directive NG-Pattern ตัวอย่างเช่น:

การคัดลอกรหัสมีดังนี้:

<อินพุต type = "text" ng-pattern = "[az]" />

คุณสมบัติแบบฟอร์มคุณสมบัติเหล่านี้ทำให้การใช้งานได้ง่ายขึ้นในรูปแบบ

บริสุทธิ์/สกปรก

ระบุว่ามีการแก้ไขหรือไม่เช่น

การคัดลอกรหัสมีดังนี้:

<form name = "mainform" ng-controller = "OrderController">

<input type = "email" name = "userEmail" ng-model = "myEmail" />>>>>

{{mainform.useremail. $ pristine}}

{{mainform.useremail. $ dirty}}

</form>

เข้าถึงใน formname.fieldName. $ โหมด Pristine อินพุตต้องมีการประกาศแบบจำลอง NG

การคัดลอกรหัสมีดังนี้:

ถูกต้อง/ไม่ถูกต้อง

ระบุว่าผ่านการตรวจสอบหรือไม่

การคัดลอกรหัสมีดังนี้:

$ ข้อผิดพลาด

ข้อมูลการตรวจสอบแบบฟอร์มและข้อมูลที่เกี่ยวข้องจะถูกส่งคืนหากการตรวจสอบล้มเหลว

AngularJS ให้คลาส CSS ตามสถานะฟอร์ม

การคัดลอกรหัสมีดังนี้:

.ng-pristine

.ng-dirty

. ng-valid

.ng-invalid

ตัวอย่างเช่นให้การตรวจสอบผ่านสีเขียวและล้มเหลวสีแดง:

การคัดลอกรหัสมีดังนี้:

input.ng-valid {

สี: สีเขียว;

-

input.ng-invalid {

สี: สีเขียว;

-

ในตัวอย่างที่ได้รับการตรวจสอบอีเมลเพียงครั้งเดียวจะถูกเขียนขึ้นมาก หากคุณเพิ่มฟิลด์ไม่กี่ฟิลด์เพิ่มพรอมต์ที่แตกต่างกันสองสามรายการและเพิ่มเหตุการณ์สองสามรายการรหัสจะยุ่ง

ในความเป็นจริงไม่แนะนำให้ทำเช่นนี้เรามีวิธีที่ดีกว่า

มันคือการใช้ Angular-messages.js

ก่อนอื่นอย่าลืมสองขั้นตอนนี้

การคัดลอกรหัสมีดังนี้:

<script src = "angular-messages.js"> </script>

Angular.Module ('MyApp', ['ngmessages'])))

ตกลงก่อนอื่นแทนที่รายการที่ซ้ำกันด้วย NG-Messages และ NG-Message และตัวอย่างข้างต้นจะกลายเป็น:

การคัดลอกรหัสมีดังนี้:

<form ng-controller = "ValidationController" name = "MainForm">

<p> อีเมล:

<อินพุต

type = "email" name = "email" ng-model = "myemail" ng-minLength = "3" ng-maxLength = "50" ที่ต้องการ />

<div style = "color: red" ng-messages = "mainform.email. $ error" ng-messages-multiple>

<p ng-message = "จำเป็น"> อีเมลจำเป็นต้องใช้ </p>

<p ng-message = "อีเมล"> ที่อยู่อีเมลที่ไม่ถูกต้อง </p>

<p ng-message = "minlength"> ความยาวนาที 10 </p>

<p ng-message = "maxlength"> ความยาวสูงสุด 50 </p>

</div>

</p>

<p>

<อินพุต type = "ส่ง" ng-disabled = "mainform. $ ไม่ถูกต้อง" />>

</p>

</form>

ไม่มีการเปลี่ยนแปลงในฟังก์ชั่นเพียงแค่ลบรหัสที่ซ้ำกันแล้ว

ให้ความสนใจกับความแตกต่างระหว่าง NG-Messasges และ NG-Messages รู้สึกเหมือน () หรือไม่? NG-messages-multiple ที่อยู่ด้านหลังมันถูกใช้เพื่อให้หลายพรอมต์ปรากฏขึ้นในเวลาเดียวกัน

แต่นี่ก็ยังไม่ดีพอ แม้ว่าเนื้อหาใน NG-message จะถูกละเว้น แต่ก็จะยังคงมีการทำซ้ำเมื่อมีการตรวจสอบที่จำเป็นในหลายฟิลด์

ยิ่งไปกว่านั้นจะมีการตรวจสอบซ้ำมากขึ้นเรื่อย ๆ หากแบบฟอร์มในหน้าต่างๆเกี่ยวข้องกับเนื้อหาเดียวกัน

เพื่อแก้ปัญหานี้เราสามารถใช้คำสั่ง NG-Messages-include

คำสั่งนี้ใช้เพื่ออ้างอิงเทมเพลตตัวอย่างเช่นตัวอย่างข้างต้นกลายเป็น:

การคัดลอกรหัสมีดังนี้:

<form ng-controller = "ValidationController" name = "MainForm">

<p> อีเมล:

<อินพุต

type = "email" name = "email" ng-model = "myemail" ng-minLength = "3" ng-maxLength = "50" ที่ต้องการ />

<div style = "color: red" ng-messages = "mainform.email. $ error" ng-messages-multiple ng-messages-include = "validateTemplate/email.html">

</div>

</p>

<p>

<อินพุต type = "ส่ง" ng-disabled = "mainform. $ ไม่ถูกต้อง" />>

</p>

</form>

มันไม่ซับซ้อนมาเพิ่มอะไรบางอย่าง

เพื่อที่จะทำให้พรอมต์เป็นมิตรมากขึ้น (?) เราพยายามที่จะบรรลุผลของพรอมต์ที่ปรากฏหลังจากเคอร์เซอร์ออก

ในเวลานี้มันจะสะดวกกว่าในการใช้คำสั่ง ที่นี่ก่อนอื่นเราเกี่ยวข้องกับข้อมูลบางอย่างที่เกี่ยวข้องกับคำแนะนำ

เรียกใช้ก่อนแล้วพูดคุยเกี่ยวกับเรื่องนี้:

การคัดลอกรหัสมีดังนี้:

var myapp = angular.module ('myapp', [])

.Controller ('ValidationController', ['$ scope', ฟังก์ชั่น ($ scope) {

$ scope.user = 'kavlez';

$ scope.email = '[email protected]';

-

.Directive ('Hintonblur', [function () {

กลับ {

ต้องการ: 'ngmodel'

ลิงค์: ฟังก์ชัน (ขอบเขต, องค์ประกอบ, attrs, ctrl) {

ctrl.focused = false;

element.bind ('โฟกัส', ฟังก์ชั่น (evt) {

ขอบเขต. $ apple (function () {ctrl.focused = true;});

}). ผูก ('เบลอ', ฟังก์ชั่น (evt) {

ขอบเขต. $ apple (function () {ctrl.focused = false;});

-

-

-

-

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

แบบฟอร์มจะเปลี่ยนไปดังนี้:

การคัดลอกรหัสมีดังนี้:

<form ng-controller = "ValidationController" name = "MainForm">

<p> อีเมล:

<input type = "email" name = "email" ng-model = "myemail" ng-minLength = "3" ng-maxLength = "50" ที่จำเป็น

<div style = "color: red" ng-messages = "mainform.email. $ error" ng-show = "! mainform.email.focused" ng-messages-messages ng-messages-include = "validateTemplate/email.html">>

</div>

</p>

<p>

<อินพุต type = "ส่ง" ng-disabled = "mainform. $ ไม่ถูกต้อง" />>

</p>

</form>

เพิ่มการตัดสินของการมุ่งเน้นใน NG-show และพรอมต์จะปรากฏขึ้นเมื่อเท็จ

ดูเหมือนว่าตอนนี้

ปรับแต่งวิธีการตรวจสอบและความถูกต้องซึ่งใช้คำสั่ง

ตรวจสอบว่าอีเมลที่คุณกรอกนั้นมีอยู่ นี่คือการจำลองแบบง่าย ๆ :

การคัดลอกรหัสมีดังนี้:

.directive ('isalreadytaken', function () {

กลับ {

ต้องการ: 'ngmodel'

ลิงค์: ฟังก์ชั่น (ขอบเขต, ele, attrs, ctrl) {

ctrl. $ parsers.push (ฟังก์ชั่น (val) {

ctrl. $ setValidity ('emailavailable', false);

var emailTable = [

'[email protected]'

'[email protected]'

'[email protected]'

'[email protected]'

'[email protected]'

'[email protected]'];

สำหรับ (var i = 0; i <emailtable.length; i+= 1)

ถ้า (val == emailTable [i])

กลับ;

ctrl. $ setValidity ('emailavailable', true);

กลับมาวาล;

-

-

-

-

เพิ่มแอตทริบิวต์ IS-Taken ลงในองค์ประกอบอินพุตและเพิ่ม NG-Message อื่น:

การคัดลอกรหัสมีดังนี้:

<p ng-message = "emailavailable"> ใช้เวลาแล้ว! ลองใช้ที่อยู่อีเมลอื่น ๆ ! </p>