AngularJS ສາມາດກວດສອບຄວາມຈິງຂອງຄວາມນຳໃຊ້.

ການກວດສອບຟອມ

AngularJS ສະໜອງການກວດສອບຟອມຢູ່ບັນຊີ.

AngularJS ກວດສອບສະຖານະຂອງຟອມແລະບົດສະຫຼຸບ (input, textarea, select) ແລະອະນຸຍາດທ່ານໃຫ້ບອກຜູ້ນຳໃຊ້ກັບສະຖານະປະຈຸບັນ.

AngularJS ຍັງມີຂໍ້ມູນກ່ຽວກັບບໍ່ແມ່ນຫົວໜ້າທີ່ຖືກສົ່ງຫາຫຼືຖືກດັດແປງ.

ທ່ານສາມາດນຳໃຊ້ບັດຮູບແບບ HTML5 ທີ່ມີການກວດສອບຄວາມຈິງຫຼືສ້າງຫົວວິທີກວດສອບຂອງທ່ານ.

ການກວດສອບຢູ່ບັນຊີບໍ່ສາມາດປ້ອງກັນຄວາມເຂົ້າຂອງຜູ້ນຳໃຊ້ດ້ວຍອິດສະຫຼະ. ການກວດສອບຢູ່ທີ່ຜູ້ບໍລິຫານກໍ່ມີຄວາມຫຼາຍຄວາມສຳຄັນ.

required

ນຳໃຊ້ບັດຮູບແບບ HTML5 required ບົດສະຫຼຸບຕ້ອງການຖືກຄົ້ນຫາ:

ຄວາມມີປະສິດທິພາບທີ່ສະເພາະ

ບົດສະຫຼຸບນີ້ຕ້ອງໄດ້ຖືກຄົ້ນຫາ:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
输入的有效状态是：
  
{{myForm.myInput.$valid}}

ຕື່ມຕົວຕອນມາດັງ

email

ນຳໃຊ້ຮູບແບບ HTML5 email ຄວາມຕ້ອງການຂອງບົດສະຫຼຸບນີ້ຕ້ອງແມ່ນອີເມວ:

ຄວາມມີປະສິດທິພາບທີ່ສະເພາະ

ຄວາມເຂົ້າຂອງບົດສະຫຼຸບນີ້ຕ້ອງແມ່ນອີເມວ:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
输入的有效状态是：
  
{{myForm.myInput.$valid}}

ຕື່ມຕົວຕອນມາດັງ

表单状态和输入状态

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); will be myValidation Function added to the array of other functions, which will be executed each time the input value changes.

Validation Example

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

ຕື່ມຕົວຕອນມາດັງ

ການຕັ້ງມາຂອງ HTML ການເຮັດງານບົດສະຫຼະການ novalidate ສະໜອງການປິດການກວດສອບຄວາມສາມາດຂອງການເບິ່ງຂອງບັນຊາບັນຍາບັນຍາ.

ຄຳກ່າວອິດສະຫຼະການ:

ຄຳສັ່ງ AngularJS ng-model ມັດການປະຕິບັດບັນຍາວ່າປະຕິບັດບັນຍາ.

ອຸປະກອນຍິງບັນຍາມີສອງທີ່ປະໂຫຍດ:user ແລະ email.

ຍ້ອນ ng-showພຽງແຕ່ເວລາ ຜູ້ນຳ ຫຼື ອີເມວ ແມ່ນ $dirty ແລະ $invalid ຈະສະແດງ span ທີ່ມີ ສາຍສະທ້ອນ: color:red.