การตรวจสอบฟอร์ม AngularJS

AngularJS สามารถตรวจสอบข้อมูลการบอกเลข

การตรวจสอบฟอร์ม

AngularJS ให้การตรวจสอบฟอร์มทางกลุ่มบริการ

AngularJS จับตาดูสถานะของฟอร์มและช่องบอกเลข (input, textarea, select) และอนุญาตให้คุณแจ้งสถานะปัจจุบันแก่ผู้ใช้

AngularJS ยังมีข้อมูลเกี่ยวกับว่าพวกเขาได้ถูกสัมผัสหรือแก้ไขหรือไม่

คุณสามารถใช้คุณสมบัติ HTML5มาตรฐานเพื่อตรวจสอบการบอกเลข หรือสร้างฟังก์ชันการตรวจสอบของตัวเอง

การตรวจสอบทางกลุ่มบริการไม่สามารถปกป้องการบอกเลขของผู้ใช้ด้วยตัวเองได้. การตรวจสอบทางเซิร์ฟเวอร์ก็เป็นสำคัญ

required

ใช้คุณสมบัติ HTML5 required ควรกรอกช่องบอกเลขที่กำหนด:

ตัวอย่าง

ช่องบอกเลขนี้เป็นข้อบังคับ:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>สถานะที่เป็นที่สำคัญของการบันทึกคือ:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

ทดลองด้วยตัวเอง

email

ใช้รูปแบบ HTML5 email ค่าที่กำหนดต้องเป็นอีเมล์:

ตัวอย่าง

ค่าของช่องบอกเลขต้องเป็นอีเมล์:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>สถานะที่เป็นที่สำคัญของการบันทึกคือ:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

ทดลองด้วยตัวเอง

สถานะฟอร์มและสถานะช่องข้อมูล

AngularJS จะปรับปรุงสถานะของฟอร์มและช่องข้อมูลต่อไป

ช่องข้อมูลมีสถานะต่อไปนี้:

• $untouched ช่องข้อมูลนี้ยังไม่ถูกสัมผัส
• $touched ช่องข้อมูลนี้ถูกสัมผัส
• $pristine ช่องข้อมูลนี้ยังไม่ถูกแก้ไข
• $dirty ช่องข้อมูลนี้ถูกแก้ไข
• $invalid เนื้อหาช่องข้อมูลไม่ถูกต้อง
• $valid เนื้อหาช่องข้อมูลถูกต้อง

เหล่านี้เป็นคุณสมบัติของช่องข้อมูล สามารถเป็นความจริงหรือเท็จ

ฟอร์มมีสถานะต่อไปนี้:

• $pristine ยังไม่มีการแก้ไขช่องข้อมูลใดๆ
• $dirty หนึ่งหรือหลายช่องข้อมูลถูกแก้ไข
• $invalid เนื้อหาฟอร์มไม่ถูกต้อง
• $valid เนื้อหาฟอร์มถูกต้อง
• $subscribed ฟอร์มถูกส่ง

เหล่านี้เป็นคุณสมบัติของฟอร์ม สามารถเป็นความจริงหรือเท็จ

คุณสามารถใช้สถานะเหล่านี้เพื่อแสดงข้อความที่มีความหมายต่อผู้ใช้ ตัวอย่าง ถ้าช่องข้อมูลเป็นข้อบังคับและผู้ใช้ทิ้งว่าง ควรแจ้งเตือนผู้ใช้:

ตัวอย่าง

ถ้าช่องข้อมูลนี้ถูกสัมผัสและว่างเปล่า แสดงข้อความผิดพลาด:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">ชื่อเป็นข้อบังคับ。</span>

ทดลองด้วยตัวเอง

คลาส CSS

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://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>验证示例</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名：<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">用户名是必填项。<
  </span>
</p>
<p>电子邮件：<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">电子邮件是必填项。</span>
  <span ng-show="myForm.email.$error.email">无效的电子邮件地址。</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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

ทดลองด้วยตัวเอง

คุณสมบัติฟอร์ม HTML novalidate ใช้เพื่อปิดกั้นการตรวจสอบเว็บเบราเซอร์โดยมาตรฐาน

ตัวอย่างการอธิบาย:

AngularJS คำสั่ง ng-model เชื่อมโยงองค์ประกอบอินพุทกับโมดูล

วัตถุโมดูลมีคุณสมบัติสองรายการ:user และ email

เนื่องจาก ng-showเมื่อ user หรือ email มี $dirty และ $invalid เมื่อมีสถานการณ์ จึงจะแสดง spans ที่มีสี red