แม้ว่าฉันจะไม่ได้เป็นโปรแกรมเมอร์ส่วนหน้า แต่ฉันเข้าใจว่าการทำงานของการตรวจสอบอย่างดีนั้นสำคัญแค่ไหน
เพราะด้วยวิธีนี้แบ็กเอนด์สามารถหายใจได้มากขึ้นและเปรียบเทียบกับแบ็กเอนด์ส่วนหน้าสามารถปรับปรุงความสุขของผู้ใช้ได้อย่างแน่นอน
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 = [
สำหรับ (var i = 0; i <emailtable.length; i+= 1)
ถ้า (val == emailTable [i])
กลับ;
ctrl. $ setValidity ('emailavailable', true);
กลับมาวาล;
-
-
-
-
เพิ่มแอตทริบิวต์ IS-Taken ลงในองค์ประกอบอินพุตและเพิ่ม NG-Message อื่น:
การคัดลอกรหัสมีดังนี้:
<p ng-message = "emailavailable"> ใช้เวลาแล้ว! ลองใช้ที่อยู่อีเมลอื่น ๆ ! </p>