AngularJS Form Validation

AngularJS படிவ சரிபார்ப்பு

AngularJS உள்ளீடு தரவை சரிபார்க்க முடியும்.

படிவ சரிபார்ப்பு

AngularJS கிளையண்ட்-சைடு படிவ சரிபார்ப்பை வழங்குகிறது.

AngularJS படிவம் மற்றும் உள்ளீட்டு புலங்களின் (input, textarea, select) நிலையை கண்காணிக்கிறது, மேலும் தற்போதைய நிலை குறித்து பயனருக்கு தெரிவிக்க உங்களை அனுமதிக்கிறது.

AngularJS அவை தொடப்பட்டனவா, மாற்றப்பட்டனவா அல்லது இல்லையா என்பது குறித்த தகவலையும் வைத்திருக்கிறது.

நீங்கள் உள்ளீட்டை சரிபார்க்க ஸ்டாண்டர்ட் HTML5 பண்புக்கூறுகளைப் பயன்படுத்தலாம், அல்லது உங்கள் சொந்த சரிபார்ப்பு செயல்பாடுகளை உருவாக்கலாம்.

⚠️ முக்கியமான குறிப்பு:

கிளையண்ட்-சைடு சரிபார்ப்பு மட்டுமே பயனர் உள்ளீட்டைப் பாதுகாக்க முடியாது. சர்வர் சைடு சரிபார்ப்பும் அவசியம்.

Required பண்புக்கூறு

உள்ளீட்டுப் புலம் நிரப்பப்பட வேண்டும் எனக் குறிப்பிட 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 type 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	படிவம் சமர்ப்பிக்கப்பட்டது

இந்த நிலைகளைப் பயன்படுத்தி பயனருக்கு அர்த்தமுள்ள செய்திகளைக் காட்டலாம்.

எடுத்துக்காட்டு

புலம் தொடப்பட்டு காலியாக இருந்தால் பிழை செய்தியைக் காட்டவும்:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

CSS வகுப்புகள்

AngularJS படிவங்கள் மற்றும் உள்ளீட்டுப் புலங்களுக்கு அவற்றின் நிலைகளைப் பொறுத்து CSS வகுப்புகளைச் சேர்க்கிறது.

உள்ளீட்டுப் புலங்களுக்கான வகுப்புகள்

CSS வகுப்பு

ng-untouched - புலம் இன்னும் தொடப்படவில்லை

ng-touched - புலம் தொடப்பட்டுள்ளது

ng-pristine - புலம் இன்னும் மாற்றப்படவில்லை

ng-dirty - புலம் மாற்றப்பட்டுள்ளது

ng-valid - புல உள்ளடக்கம் செல்லுபடியாகும்

ng-invalid - புல உள்ளடக்கம் செல்லுபடியாகாது

எடுத்துக்காட்டு CSS

input.ng-invalid {
  background-color: pink;
}
input.ng-valid {
  background-color: lightgreen;
}

படிவங்களுக்கான வகுப்புகள்

CSS வகுப்பு

ng-pristine - எந்த புலமும் இன்னும் மாற்றப்படவில்லை

ng-dirty - ஒன்று அல்லது அதற்கு மேற்பட்ட புலங்கள் மாற்றப்பட்டுள்ளன

ng-valid - படிவ உள்ளடக்கம் செல்லுபடியாகும்

ng-invalid - படிவ உள்ளடக்கம் செல்லுபடியாகாது

எடுத்துக்காட்டு CSS

form.ng-pristine {
  background-color: lightblue;
}
form.ng-dirty {
  background-color: pink;
}

அவை குறிப்பிடும் மதிப்பு false ஆக இருந்தால் வகுப்புகள் அகற்றப்படும்.

இந்த வகுப்புகளுக்கான ஸ்டைல்களைச் சேர்த்து, உங்கள் பயன்பாட்டிற்கு சிறந்த மற்றும் உள்ளுணர்வு பயனர் இடைமுகத்தை வழங்கவும்.

தனிப்பயன் சரிபார்ப்பு

உங்கள் சொந்த சரிபார்ப்பு செயல்பாட்டை உருவாக்குவது சிறிது சிக்கலானது; நீங்கள் உங்கள் பயன்பாட்டில் ஒரு புதிய டைரக்டிவைச் சேர்க்க வேண்டும், மேலும் குறிப்பிட்ட வாதங்களைக் கொண்ட ஒரு செயல்பாட்டிற்குள் சரிபார்ப்பைக் கையாள வேண்டும்.

எடுத்துக்காட்டு

உங்கள் சொந்த டைரக்டிவை உருவாக்கவும், அதில் ஒரு தனிப்பயன் சரிபார்ப்பு செயல்பாட்டைக் கொண்டிருக்கும், மற்றும் 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 = 'john.doe@gmail.com';
});
</script>

</body>
</html>

HTML படிவ novalidate பண்புக்கூறு இயல்புநிலை பிரௌசர் சரிபார்ப்பை முடக்கப் பயன்படுத்தப்படுகிறது.

எடுத்துக்காட்டு விளக்கம்

AngularJS ng-model டைரக்டிவ் உள்ளீட்டு உறுப்புகளை மாடலுடன் இணைக்கிறது.

மாடல் பொருளில் user மற்றும் email ஆகிய இரண்டு பண்புகள் உள்ளன.

ng-show காரணமாக, user அல்லது email $dirty மற்றும் $invalid ஆக இருக்கும்போது மட்டுமே color:red உள்ள spans காட்டப்படும்.

பயிற்சிகள்

❓ புலம் தொடப்பட்டு செல்லாததாக இருந்தால் பிழை செய்தியைக் காட்டுவதற்கு எந்த AngularJS டைரக்டிவ் பயன்படுத்தப்படுகிறது?

ng-if

✗ தவறு! ng-if DOM உறுப்புகளை சேர்த்தல்/நீக்குதல்

ng-hide

✗ தவறு! ng-hide உறுப்புகளை மறைத்தல்

ng-show

✓ சரி! ng-show நிபந்தனையின் அடிப்படையில் உறுப்புகளைக் காட்ட பயன்படுகிறது

ng-class

✗ தவறு! ng-class CSS வகுப்புகளை மாற்றுவதற்காக

💡 பயிற்சியைத் தொடங்கவும்:

AngularJS படிவ சரிபார்ப்பு HTML5 பண்புக்கூறுகள் மற்றும் AngularJS டைரக்டிவ்களை இணைத்து பயன்படுத்துகிறது.

மேலே உள்ள விருப்பங்களில் இருந்து சரியான பதில்களை தேர்வு செய்யவும்.

சிறந்த நடைமுறைகள்

HTML5 சரிபார்ப்பு பண்புக்கூறுகளைப் பயன்படுத்தவும்:

required, type="email", pattern போன்றவற்றைப் பயன்படுத்தி அடிப்படை சரிபார்ப்புகளைச் செய்யுங்கள்.

பயனர் நட்பு பிழை செய்திகளை வழங்கவும்:

பயனர் எளிதாக புரிந்துகொள்ளும் வகையில் பிழை செய்திகளைக் காட்டுங்கள்.

CSS வகுப்புகளைப் பயன்படுத்தி நிலைகளைக் குறிக்கவும்:

ng-valid, ng-invalid போன்ற CSS வகுப்புகளைப் பயன்படுத்தி புல நிலைகளைக் காட்டுங்கள்.

கிளையண்ட்-சைடு சரிபார்ப்பை மட்டுமே நம்ப வேண்டாம்:

எப்போதும் சர்வர்-சைடு சரிபார்ப்பையும் செய்யுங்கள்.

மிகவும் சிக்கலான தனிப்பயன் சரிபார்ப்புகளைத் தவிர்க்கவும்:

முடிந்தவரை ஸ்டாண்டர்ட் HTML5 சரிபார்ப்புகளைப் பயன்படுத்துங்கள்.