การตรวจสอบแบบฟอร์ม AngularJS
AngularJS สามารถตรวจสอบข้อมูลที่ป้อนได้
การตรวจสอบแบบฟอร์ม
AngularJS เสนอการตรวจสอบแบบฟอร์มฝั่งไคลเอ็นต์
AngularJS ตรวจสอบสถานะของฟอร์มและฟิลด์อินพุต (อินพุต, textarea, select) และให้คุณแจ้งผู้ใช้เกี่ยวกับสถานะปัจจุบัน
AngularJS ยังมีข้อมูลเกี่ยวกับว่าพวกเขาได้รับการสัมผัสหรือแก้ไขหรือไม่
คุณสามารถใช้แอตทริบิวต์ HTML5 มาตรฐานเพื่อตรวจสอบความถูกต้องของข้อมูลป้อนเข้า หรือสร้างฟังก์ชันการตรวจสอบความถูกต้องของคุณเองก็ได้
การตรวจสอบฝั่งไคลเอ็นต์ไม่สามารถรักษาความปลอดภัยอินพุตของผู้ใช้เพียงคนเดียวได้ การตรวจสอบฝั่งเซิร์ฟเวอร์ก็จำเป็นเช่นกัน
ที่จำเป็น
ใช้แอตทริบิวต์ HTML5 requiredเพื่อระบุว่าต้องกรอกข้อมูลในฟิลด์อินพุต:
ตัวอย่าง
ฟิลด์อินพุตจำเป็น:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
อีเมล
ใช้ประเภท HTML5 emailเพื่อระบุว่าค่าต้องเป็นอีเมล:
ตัวอย่าง
ช่องป้อนข้อมูลจะต้องเป็นอีเมล:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
สถานะแบบฟอร์มและสถานะอินพุต
AngularJS อัปเดตสถานะของทั้งแบบฟอร์มและช่องใส่อย่างต่อเนื่อง
ฟิลด์อินพุตมีสถานะดังต่อไปนี้:
$untouchedยังไม่ได้แตะสนาม$touchedสัมผัสสนามแล้ว$pristineฟิลด์ยังไม่ได้แก้ไข$dirtyฟิลด์ได้รับการแก้ไข$invalidเนื้อหาของฟิลด์ไม่ถูกต้อง$validเนื้อหาของฟิลด์ถูกต้อง
สิ่งเหล่านี้เป็นคุณสมบัติทั้งหมดของฟิลด์อินพุต และเป็นอย่างใดอย่างหนึ่งtrue
หรือfalse
แบบฟอร์มมีสถานะดังต่อไปนี้:
$pristineยังไม่มีการแก้ไขช่อง$dirtyมีการเปลี่ยนแปลงอย่างน้อยหนึ่งรายการ$invalidเนื้อหาแบบฟอร์มไม่ถูกต้อง$validเนื้อหาแบบฟอร์มถูกต้อง$submittedส่งแบบฟอร์มแล้ว
เป็นคุณสมบัติทั้งหมดของแบบฟอร์ม และเป็นอย่างใดอย่างหนึ่งtrue
หรือfalse
คุณสามารถใช้สถานะเหล่านี้เพื่อแสดงข้อความที่มีความหมายต่อผู้ใช้ ตัวอย่าง หากจำเป็นต้องระบุฟิลด์ และผู้ใช้เว้นว่างไว้ คุณควรให้คำเตือนแก่ผู้ใช้:
ตัวอย่าง
แสดงข้อความแสดงข้อผิดพลาดหากฟิลด์ถูกแตะและว่างเปล่า:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
CSS Classes
AngularJS เพิ่มคลาส CSS ให้กับฟอร์มและฟิลด์อินพุตขึ้นอยู่กับสถานะ
คลาสต่อไปนี้ถูกเพิ่มหรือลบออกจากฟิลด์อินพุต:
ng-untouchedยังไม่ได้แตะสนามng-touchedสัมผัสสนามแล้วng-pristineฟิลด์ยังไม่ได้แก้ไขng-dirtyฟิลด์ได้รับการแก้ไขng-validเนื้อหาของฟิลด์ถูกต้องng-invalidเนื้อหาของฟิลด์ไม่ถูกต้องng-valid-keyหนึ่งคีย์สำหรับการตรวจสอบแต่ละครั้ง ตัวอย่าง:ng-valid-requiredมีประโยชน์เมื่อมีมากกว่าหนึ่งสิ่งที่ต้องตรวจสอบng-invalid-keyตัวอย่าง:ng-invalid-required
คลาสต่อไปนี้ถูกเพิ่มหรือลบออกจากฟอร์ม:
ng-pristineยังไม่มีช่องที่ยังไม่ได้แก้ไขng-dirtyมีการแก้ไขอย่างน้อยหนึ่งช่องng-validเนื้อหาแบบฟอร์มถูกต้องng-invalidเนื้อหาแบบฟอร์มไม่ถูกต้องng-valid-keyหนึ่งคีย์สำหรับการตรวจสอบแต่ละครั้ง ตัวอย่าง:ng-valid-requiredมีประโยชน์เมื่อมีมากกว่าหนึ่งสิ่งที่ต้องตรวจสอบng-invalid-keyตัวอย่าง:ng-invalid-required
คลาสจะถูกลบออกหากค่าที่แสดงfalseเป็น
เพิ่มสไตล์สำหรับคลาสเหล่านี้เพื่อให้แอปพลิเคชันของคุณมีอินเทอร์เฟซผู้ใช้ที่ดีและใช้งานง่ายยิ่งขึ้น
ตัวอย่าง
ใช้สไตล์โดยใช้ CSS มาตรฐาน:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
แบบฟอร์มยังสามารถจัดรูปแบบได้:
ตัวอย่าง
ใช้สไตล์สำหรับแบบฟอร์มที่ไม่ได้แก้ไข (เดิม) และสำหรับแบบฟอร์มที่แก้ไขแล้ว:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
การตรวจสอบความถูกต้อง
การสร้างฟังก์ชันตรวจสอบความถูกต้องของคุณเองนั้นค่อนข้างยุ่งยาก คุณต้องเพิ่มคำสั่งใหม่ให้กับแอปพลิเคชันของคุณและจัดการกับการตรวจสอบภายในฟังก์ชันด้วยอาร์กิวเมนต์ที่ระบุ
ตัวอย่าง
สร้างคำสั่งของคุณเอง ซึ่งมีฟังก์ชันการตรวจสอบความถูกต้องที่กำหนดเอง และอ้างอิงโดยmy-directiveใช้
ฟิลด์นี้จะใช้ได้ก็ต่อเมื่อค่ามีอักขระ "e":
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
ตัวอย่างที่อธิบาย:
ใน HTML คำสั่งใหม่จะถูกอ้างอิงโดยใช้
my-directiveแอตทริบิวต์
ใน JavaScript เราเริ่มต้นด้วยการเพิ่มคำสั่งใหม่ชื่อmyDirective.
โปรดจำไว้ว่า เมื่อตั้งชื่อคำสั่ง คุณต้องใช้ชื่อตัวพิมพ์อูฐ
myDirectiveแต่เมื่อเรียกใช้ คุณต้องใช้-ชื่อแยก
my-directive.
จากนั้น ส่งคืนอ็อบเจ็กต์ที่คุณระบุว่าเราต้องการ ngModelซึ่งก็คือ ngModelController
สร้างฟังก์ชันการเชื่อมโยงซึ่งรับอาร์กิวเมนต์ โดยที่อาร์กิวเมนต์ที่สี่mCtrl, คือngModelController,
จากนั้นระบุฟังก์ชัน ในกรณีนี้คือ ชื่อmyValidationซึ่งรับหนึ่งอาร์กิวเมนต์ อาร์กิวเมนต์นี้คือค่าขององค์ประกอบอินพุต
ทดสอบว่าค่ามีตัวอักษร "e" หรือไม่ และตั้งค่าความถูกต้องของตัวควบคุมรุ่นเป็นอย่างใดอย่างหนึ่งtrueหรือfalse
สุดท้ายmCtrl.$parsers.push(myValidation);จะเพิ่ม
myValidationฟังก์ชันไปยังอาร์เรย์ของฟังก์ชันอื่นๆ ซึ่งจะดำเนินการทุกครั้งที่มีการเปลี่ยนแปลงค่าอินพุต
ตัวอย่างการตรวจสอบ
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user"
required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username
is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
แอตทริบิวต์novalidate ของแบบฟอร์ม HTML ใช้เพื่อปิดการตรวจสอบเบราว์เซอร์เริ่มต้น
ตัวอย่างที่อธิบาย
AngularJS directive ng-modelเชื่อมโยงองค์ประกอบอินพุตเข้ากับโมเดล
ออบเจ็กต์โมเดลมีคุณสมบัติสอง ประการ: userและemail
เนื่องจากng-showช่วงที่มี color:red จะแสดงก็ต่อเมื่อผู้ใช้หรืออีเมลคือ$ dirtyและ$invalid