Validation ng Form ng AngularJS

Ang AngularJS ay may kakayahang valdyuhin ang datos ng input.

Validation ng Form

Nagbibigay ang AngularJS ng validation client-side sa form.

Nagmamasid ang AngularJS sa estado ng form at input field (input, textarea, select) at pinahihintulutan ang pagbabigay ng mga abiso sa user sa kasalukuyang estado.

Naglalaman din ang AngularJS ng impormasyon kung kung sino ang napindot o binago ang mga ito.

Maaari mong gamitin ang standard HTML5 attribute para sa validation, o gumawa ng sariling function ng validation.

Ang validation client-side ay hindi nagbababagong proteksyon sa input ng user. Ang validation server-side ay kinakailangan din.

required

Ginagamit ang HTML5 attribute required Ang aming tinukoy ay dapat magpili ng input field:

instance

Ang aming input field ay dapat magiging wika:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>The valid state of the input is:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

亲自试一试

email

Ginagamit ang HTML5 type email Ang aming tinukoy na halaga ay dapat maging e-mail:

instance

Ang aming input field ay dapat maging e-mail:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>The valid state of the input is:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

亲自试一试

Form State and Input State

AngularJS continuously updates the state of the form and input fields.

The input field has the following states:

$untouched This field has not been touched
$touched This field has been touched
$pristine This field has not been modified yet
$dirty This field has been modified
$invalid Field content is invalid
$valid Field content is valid

They are all properties of the input field, either true or false.

The form has the following states:

$pristine No fields have been modified yet
$dirty One or more fields have been modified
$invalid The form content is invalid
$valid The form content is valid
$subscribed The form has been submitted

They are all properties of the form, which can be either true or false.

You can use these states to display meaningful messages to the user. For example, if a field is required and the user leaves it blank, a warning should be issued to the user:

instance

If the field has been touched and is empty, display an error message:

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

亲自试一试

CSS Classes

AngularJS adds CSS classes to the form and input fields based on their state.

The following classes have been added to or removed from the input field:

ng-untouched This field has not been touched
ng-touched This field has been touched
ng-pristine This field has not been modified yet
ng-dirty This field has been modified
ng-valid Field content is valid
ng-invalid Field content is invalid
ng-valid-key Validate each key every time. For example:ng-valid-requiredIt is very useful when there are multiple required validations.
ng-invalid-key For example:ng-invalid-required

The following classes have been added to or removed from the form:

ng-pristine No fields have been modified yet
ng-dirty One or more fields have been modified
ng-valid The form content is valid
ng-invalid The form content is invalid
ng-valid-key Validate each key every time. For example:ng-valid-requiredIt is very useful when there are multiple required validations.
ng-invalid-key For example:ng-invalid-required

If the class represents a value that is falseIf these classes represent a value that is to be deleted.

Please add styles to these classes to provide a better and more intuitive user interface for your application.

instance

Apply standard CSS styles:

<style>
input.ng-invalid {
  background-color: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

亲自试一试

You can also set the form's style.

instance

Apply styles to both the unmodified (original) form and the modified form:

<style>
form.ng-pristine {
  background-color: lightblue;
};
form.ng-dirty {
  background-color: pink;
};
</style>

亲自试一试

Custom Validation

Ang paglikha ng iyong sariling validation function ay nangangailangan ng ilang kasanayan; dapat mo idagdag ang bagong directive sa application, at gamitin ang ilang tinukoy na parameter upang hawakan ang validation sa loob ng function.

instance

Lumikha ng iyong sariling directive, na may custom validation function, at sa pamamagitan ng paggamit ng my-directive Tukuyin ito.

Valid ang laro lamang kapag ang halaga ay naglalaman ng titik '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) {
        kung ang value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        };
        return value;
      };
      mCtrl.$parsers.push(myValidation);
    };
  };
});

亲自试一试

Example Explained:

Sa HTML, ang bagong directive ay maipapakita sa pamamagitan ng paggamit ng attribute my-directive upang istrukturahin.

Sa JavaScript, unang magdagdag naming ng pangalan na myDirective ng bagong directive.

Tandaan, kapag pinangalan ang isang directive, dapat gamitin mo ang camelCase naming, tulad ng myDirective， ngunit kapag tinatawag mo ito, dapat gamitin mo ang pangalan na may hyphen separated, tulad ng my-directive。

Pagkatapos, ibalik ang isang bagay na may mga pagtutukoy sa mga bagay na kailangan naming ngModel， na ngModelController。

Lumikha ng isang link function, na tumanggap ng ilang parameter, kung saan ang pang-apat na parameter mCtrl ay ngModelController。

Pagkatapos, tukuyin ang isang function, sa halip ng ito, na tinatawag na myValidation，na tumanggap ng isang parameter, ang halaga ng input element.

Test kung ang halaga ay naglalaman ng titik 'e', at itatag ang katibayang pagiging wasto ng model controller na true o false。

Sa wakas,mCtrl.$parsers.push(myValidation); will be myValidation Function to add to an 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 a required field.<
  </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 a required field.</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';
});

亲自试一试

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

例子解释：

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

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

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

Kahon ng Kurso

Tuturial

instance

Manwal ng Pakikitungo

Pangunahing Kurso

Rekomendasyon ng Kurso:

Validation ng Form ng AngularJS