ล่าสุดการพัฒนาเว็บบทเรียน
 

AngularJSตรวจสอบรูปแบบ

❮ก่อนหน้า ถัดไปบท❯

AngularJS สามารถตรวจสอบข้อมูลของท่าน

ตรวจสอบรูปแบบ

AngularJS มีการตรวจสอบรูปแบบฝั่งไคลเอ็นต์

AngularJS ตรวจสอบสถานะของรูปแบบและใส่เขตข้อมูล (input, textarea เลือก) และช่วยให้คุณสามารถแจ้งให้ผู้ใช้เกี่ยวกับสถานะปัจจุบัน

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>
ลองตัวเอง»

E-mail

ใช้ชนิด HTML5 email เพื่อระบุว่าค่าที่จะต้องเป็น E-mail:

ตัวอย่าง

ช่องใส่จะต้องมี E-mail:

<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

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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 สั่ง NG-รุ่นผูกองค์ประกอบป้อนข้อมูลไปยังรูปแบบ

รูปแบบวัตถุมีสองคุณสมบัติ: ผู้ใช้และอีเมล์

เนื่องจากการ NG-แสดงช่วงที่มีสี: สีแดงจะปรากฏเฉพาะเมื่อผู้ใช้หรืออีเมลคือ $ $ สกปรกและไม่ถูกต้อง


❮ก่อนหน้า ถัดไปบท❯