AngularJS lomakkeen validointi

AngularJS voi validoida syötetiedot.

Lomakkeen validointi

AngularJS tarjoaa asiakassivun lomakkeen validoinnin.

AngularJS seuraa lomakkeen ja syöttökenttien (input, textarea, select) tilaa ja mahdollistaa käyttäjän ilmoittamisen nykyisestä tilasta.

AngularJS sisältää tietoa siitä, onko niitä kosketettu tai muutettu.

Voit käyttää standardeja HTML5-ominaisuuksia syötteen validointiin tai luoda oman validointifunktion.

Asiakassivun validointi ei voi yksin suojella käyttäjän syötteitä. Palvelimella tapahtuva validointi on myös välttämätöntä.

required

Käytä HTML5-ominaisuuksia required Määritetty kenttä on pakollinen:

esimerkki

Tämä syöttökenttä on pakollinen:

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

Kokeile itse

email

Käytä HTML5-tyyppiä email Määritetty arvo on sähköpostiosoite:

esimerkki

Tämä syöttökenttä on sähköpostiosoite:

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

Kokeile itse

表单状态和输入状态

AngularJS 会不断更新表单和输入字段的状态。

输入字段有以下状态：

  • $untouched 该字段尚未被触摸
  • $touched 该字段已被触摸
  • $pristine 该字段尚未被修改
  • $dirty 该字段已被修改
  • $invalid 字段内容无效
  • $valid 字段内容有效

它们都是输入字段的属性，要么为真，要么为假。

表单有以下状态：

  • $pristine 尚未修改任何字段
  • $dirty 个或多个字段已被修改
  • $invalid 表单内容无效
  • $valid 表单内容有效
  • $subscribed 表单已被提交

它们都是表单的属性，可以为真或假。

您可以使用这些状态向用户显示有意义的消息。例如，如果某个字段是必填项，而用户将其留空，则应该向用户发出警告：

esimerkki

如果该字段已被触摸且为空，则显示错误消息：

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

Kokeile itse

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，则这些类将被删除。

请为这些类添加样式，为您的应用程序提供更好、更直观的用户界面。

esimerkki

使用标准的 CSS 应用样式：

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

Kokeile itse

也可以设置表单的样式。

esimerkki

应用样式于未修改的（原始的）表单和已修改的表单：

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

Kokeile itse

Mukautettu validointi

Luoda oma validointifunktionsi vaatii taitoa; sinun on lisättävä uusi ohje sovellukseen ja käsiteltävä tiettyjä määritettyjä parametreja validointifunktion sisällä.

esimerkki

Luo oma ohjeesi, joka sisältää mukautetun validointifunktion ja käytä my-directive viitataan siihen.

Käyttökelpoinen vain, jos arvo sisältää kirjaimen "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>

Kokeile itse

Esimerkki selitetty:

HTML:ssä uusi ohje lisätään käyttämällä ominaisuutta my-directive viitataan.

JavaScriptissä lisäämme ensin nimellä myDirective uuden ohjeen.

Muista, että nimittäessäsi ohjeen sinun on käytettävä korsokirjaimia, kuten myDirective，mutta kutsuttaessa sitä sinun on käytettävä yhdistetyn nimen, kuten my-directive.

Sitten palauta objekti, jossa määritellään tarvitsemamme ngModelon ngModelController.

Luo linkki-funktio, joka hyväksyy joitakin parametreja, joista neljäs parametri mCtrl on ngModelController.

Määritä sitten funktio, nimeltään myValidation，se hyväksyy yhden parametrin, joka on syötteen arvo.

Testaa arvo sisältääkö kirjaimen "e" ja aseta mallin valvojan kelvollisuus true tai false.

Lopuksi,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';
});
</script>
</body>
</html>

Kokeile itse

HTML-lomakkeen ominaisuudet novalidate Käytetään oletusarvoisen selaimen vahvistuksen estämiseen.

Esimerkki selityksestä:

AngularJS ohjeet ng-model Sido syöttöelementti malliin.

Malliohjelma on kaksi ominaisuutta:user ja email.

Syyt ng-showvain, kun käyttäjä tai sähköpostiosoite on $dirty ja $invalid Näytetään vain span, jossa on color:red.