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 ਫਾਰਮ ਅਤੇ ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਸਥਿਤੀ ਦੇ ਅਧਾਰ 'ਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਸੀਐੱਸਐੱਸ ਵਰਗ ਜੋੜਦਾ ਹੈ。

ਨਿਮਨ ਵਰਗ ਇਨਪੁਟ ਫੀਲਡ ਵਿੱਚ ਜੋੜੇ ਗਏ ਹਨ ਜਾਂ ਇਨਪੁਟ ਫੀਲਡ ਤੋਂ ਹਟਾਏ ਗਏ ਹਨ:

• 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ਤਾਂ ਇਨ੍ਹਾਂ ਵਰਗਾਂ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਜਾਵੇਗਾ。

ਇਨ੍ਹਾਂ ਵਰਗਾਂ ਲਈ ਸਟਾਈਲ ਜੋੜੋ, ਆਪਣੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਅਤੇ ਸਰਲ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਪ੍ਰਦਾਨ ਕਰੋ。

نمونہ

ਮਿਆਰੀ ਸੀਐੱਸਐੱਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਟਾਈਲ ਲਾਗੂ ਕਰੋ:

<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() {
  ورٹا {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      فنکشن myValidation(ورتا) {
        اگر (ورتا کا 'e' کا واپسی -1 سے زیادہ ہو) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        };
        ورٹا واپس لائیں;
      };
      mCtrl.$parsers.push(myValidation);
    };
  };
});

亲自试一试

جس میں، نئی آئیچی، اس کا استعمال اس طریقے سے کیا جائے گا، my-directive کا استعمال کرتا ہوں

جس میں، میں ابتدا میں 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';
});

亲自试一试

HTML 表单属性 novalidate 用于禁用默认的浏览器验证。

例子解释：

AngularJS 指令 ng-model 将输入元素绑定到模型。

模型对象有两个属性：user 和 email。

由于 ng-show，只有当 user 或 email 为 $dirty 和 $invalid 时，才会显示带有 color:red 的 spans。