Tathmini ya formu ya AngularJS

Kabla Fomu ya AngulaJS
Pya API ya AngulaJS

AngularJS inaweza kutathmini data ya kuingia.

Tathmini ya formu

AngularJS inafunza tathmini ya formu kwenye mifumo.

AngularJS inaangalia hali ya formu na kifaa kinachokubadilika (input, textarea, select) na inaonesha ujumbe wa hali wa hivi karibuni kwa msingi wa kifaa kinachokubadilika.

AngularJS inaonyesha taarifa kuhusu wakati walioongezwa au walitokeza kwenye mifano haya.

Unaweza kutumia mafanikio ya HTML5 ya msingi ya tathmini, au kuunda mfunzi wa tathmini wa kufikia.

Tathmini kwenye mifumo inayoweza kumhusika kwa ujenzi wa watu wengi. Tathmini kwenye mifumo inayoweza kumhusika kwa mifumo ya kifaa kinachokubadilika ni muhimu.

required

Tumia mafanikio ya HTML5 required Inaonekana kwamba thamani huu inahitaji kuwa kifaa kinachokubadilika

实例

Mwili huu inahitaji kuwa kifaa kinachokubadilika

  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>Hali ya upokeaji wa inputi ni:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Jifunze kufanya

email

Tumia aina HTML5 email Inaonekana kwamba thamani huu inahitaji kuwa barua pepe

实例

Mwili huuweza kuwa barua pepe

  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>Hali ya upokeaji wa inputi ni:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Jifunze kufanya

Hali ya forma na hali ya inputi

AngularJS inapokea hali za forma na ukia wa inputi kila wakati.

Ukia wa inputi ina hali zifuatavyo:

$untouched Makadi hii inahitaji kutokwa.
$touched Makadi hii inayotokwa.
$pristine Makadi hii inahitaji kutunzwa.
$dirty Makadi hii inayotunzwa.
$invalid Matokeo ya makadi inaathiriwa na uadilifu.
$valid Matokeo ya makadi inaathiriwa na upokeaji.

Zizinaweza kuwa wakati wa hivi au wengine.

Forma ina hali zifuatavyo:

$pristine Hakuna makadi yana uharibifu.
$dirty Makadi yana uharibifu moja au zaidi.
$invalid Matokeo ya forma inaathiriwa na uadilifu.
$valid Matokeo ya forma inaathiriwa na upokeaji.
$subscribed Forma inayotumika inayopokea.

Zizinaweza kuwa wakati wa hivi au wengine.

Waweza kutumia hali hii kumonisha ujumbe maana kwa mtumiaji. Kwa mfano, kama ukia ni lazima na mtumiaji anasafirisha, waweza kumonisha ujumbe wa kichwa:

实例

Kama ukia hii inaelewa na haujafaa, tuoneo ujumbe wa kichwa:

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

Jifunze kufanya

Viwango vya CSS

AngularJS inapokea viwango vya CSS kwa hali ya forma na ukia wa inputi.

Viwango hivi vinatambuliwa katika ukia wa inputi au vinatokwa kufungwa kutoka katika ukia wa inputi:

ng-untouched Makadi hii inahitaji kutokwa.
ng-touched Makadi hii inayotokwa.
ng-pristine Makadi hii inahitaji kutunzwa.
ng-dirty Makadi hii inayotunzwa.
ng-valid Matokeo ya makadi inaathiriwa na upokeaji.
ng-invalid Matokeo ya makadi inaathiriwa na uadilifu.
ng-valid-key Kila upingaji hufanywa kwa chanzo moja. Mfano:ng-valid-requiredina matumizi mengi kama ina viwango vya upokeaji vingi vya upingaji.
ng-invalid-key Mfano:ng-invalid-required

Viwango hivi vinatambuliwa katika forma au vinatokwa kufungwa kutoka katika forma:

ng-pristine Hakuna makadi yana uharibifu.
ng-dirty Makadi yana uharibifu moja au zaidi.
ng-valid Matokeo ya forma inaathiriwa na upokeaji.
ng-invalid Matokeo ya forma inaathiriwa na uadilifu.
ng-valid-key Kila upingaji hufanywa kwa chanzo moja. Mfano:ng-valid-requiredina matumizi mengi kama ina viwango vya upokeaji vingi vya upingaji.
ng-invalid-key Mfano:ng-invalid-required

Kama thamani inayotakiwa na klabu ni: falsekama vinande vya hivi vilingwa, viwanze vilingwa.

Tunungua kwa kuzingatia viwango hivi, kumpeana ukia na ujumbe wa uwanja wa mtandao bora na uonekaji.

实例

Tumia CSS kwenye mtindo wa msingi:

Jifunze kufanya

Inaweza na kumteka mtindo wa forma.

实例

Tumia mtindo wa forma yenye hatua na yenye inayotunzwa:

Jifunze kufanya

自定义验证

创建一个自己的验证函数需要一些技巧；您必须向应用程序添加新指令，并使用某些指定参数处理函数内部的验证。

实例

创建您自己的指令，包含自定义验证函数，并通过使用 my-directive 引用它。

仅当值包含字符 "e" 时，该字段才有效：



</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>

Jifunze kufanya

Example Explained:

在 HTML 中，新指令将通过使用属性 my-directive kumekuja kwa kina kichwani.

katika JavaScript, tunafikia kwanza kumekuja kwa kina kichwani kina jina myDirective kina hali kipya.

ingatilia, wakati unatunua hali, wakati unatunua kina kichwani, kama myDirectiveina hali hii, lakini wakati unatumia, wakati unatumia jina lililotumiwa kwa kina kichwani, kama my-directive.

kisha, kumekuja kwa mkono kina hali ambapo inasema kwamba tunahitaji ngModelni ngModelController.

kumekuja kwa mkono kina maelezo, ambayo ina kumekuja kwa parameteri zaidi, na parameteri nne mCtrl ni ngModelController.

kisha kumekuja kwa mkono, kama hivi karibuni, myValidationina wakati huo, ina kumekuja kwa parameteri moja, ambayo ina wakati huo ni thamani ya kifungu cha input.

tesha kwamba thamani hauwee heri "e", na setisha uwezo wa mwenyekaji wa mawasiliano wa mbinu. true au false.

kisha,mCtrl.$parsers.push(myValidation); hita]} myValidation Funguza kwa mawili ya funi kwa sababu fungu zitaendana kila mara kwa uharibifu wa thamani wa kichaji.

Msingizi wa Tathmini

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>Msingizi wa Tathmini</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Jina la mtumiaji：<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">Jina la mtumiaji inayohitajika.<</span>
  </span>
</p>
<p>Barua pelepo：<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">Barua pelepo inayohitajika.</span>
  <span ng-show="myForm.email.$error.email">Bashara barua pelepo.</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>

Jifunze kufanya

Makina ya fomu ya HTML novalidate Inatumiwa kusimama kwa tathmini ya kifungu cha mbinu.

Mifano ya uainishaji:

Mimada ya AngulaJS ng-model Kuwasilisha kina ya chakula kwa modeli.

Mwana wa modeli ina kina ya pili:user na email.

Kwa sababu ya ng-showinaainishwa na user au email $dirty na $invalid Inapokazwa kwa span inayotaka color:red.

Kabla Fomu ya AngulaJS
Pya API ya AngulaJS

Jadwali ya mafunzo

Mafunzo

实例

Makala ya matokeo

Kilimo cha chaguo

Mambo ya kumtumia:

Tathmini ya formu ya AngularJS