AngularJS 表单验证

AngularJS 能够验证输入数据。

表单验证

AngularJS 提供客户端表单验证。

AngularJS 监控表单和输入字段（input、textarea、select）的状态，并允许您向用户通知当前状态。

AngularJS 还包含有关它们是否已被触摸或修改的信息。

您可以使用标准 HTML5 属性来验证输入，也可以创建自己的验证函数。

客户端验证不能单独保护用户输入。服务器端验证也是必要的。

required

使用 HTML5 属性 required 指定必须填写输入字段：

实例

此输入字段是必填的：

  
    
</form>  
<p>Shu ru de you xiao zhuang tai shi：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Try it yourself

email

使用 HTML5 类型 email 指定该值必须是电子邮件：

实例

此输入字段必须是电子邮件：

  
  <input naámé "myInput" ng-model="myInput" type="email">  
</form>  
<p>Shu ru de you xiao zhuang tai shi：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Try it yourself

Biao dan zhuang tai he shu ru zhuang tai

AngularJS hui bu ting geng xin biao dan he shu ru yuan zi de zhuang tai.

Shu ru yuan zi you you xia mian zhuang tai:

  • $untouched Zhe ge yuan zi shen wei bei tou chi
  • $touched Zhe ge yuan zi yi jing bei tou chi
  • $pristine Zhe ge yuan zi shen wei bei gai gai
  • $dirty Zhe ge yuan zi yi jing bei gai gai
  • $invalid Yuan zi nei rong wu xiao
  • $valid Yuan zi nei rong you xiao

Tong men dou shi shu ru yuan zi de shu xing, jiao you wei zhen huo fa.

Biao dan you you xia mian zhuang tai:

  • $pristine Shen wei bei gai gai ren he yuan zi
  • $dirty Ge huo duo ge yuan zi bei gai gai
  • $invalid Biao dan nei rong wu xiao
  • $valid Biao dan nei rong you xiao
  • $subscribed Biao dan yi jing bei tui ji

Tong men dou shi biao dan de shu xing, ke yi wei zhen huo fa.

Ni ke yi yong zhe xie zhuang tai xiang yong hu xian shi you yi wei de xiao xi. Li ran, ru guo mou ge yuan zi shi bi xu shu ru de, er yong hu jiang ta liu kong, ze neng ying xiang yong hu fa chu jing xing:

实例

Rugao zhe ge yuan zi yi jing bei tou chi qi wei kong, ze xian shi cuo wu xiao xi:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">Ming cheng shi bi xu shu ru de.</span>

Try it yourself

CSS lei

AngularJS gen ju biao dan he shu ru yuan zi de zhuang tai xiang ta men tian jia CSS lei.

Xia mian zhe ge lei bei tian jia dao shu ru yuan zi huo cong shu ru yuan zi zhong shan chu:

  • ng-untouched Zhe ge yuan zi shen wei bei tou chi
  • ng-touched Zhe ge yuan zi yi jing bei tou chi
  • ng-pristine Zhe ge yuan zi shen wei bei gai gai
  • ng-dirty Zhe ge yuan zi yi jing bei gai gai
  • ng-valid Yuan zi nei rong you xiao
  • ng-invalid Yuan zi nei rong wu xiao
  • ng-valid-key Mei ci yan zheng yi ge mi jian. Li ran:ng-valid-requiredDang you duo ge bi xu yan zheng de nei rong shi fei chang you yong
  • ng-invalid-key Li ran:ng-invalid-required

Xia mian zhe ge lei bei tian jia dao biao dan huo cong biao dan zhong shan chu:

  • ng-pristine Mei you yuan zi shen wei bei gai gai
  • ng-dirty Yi ge huo duo ge yuan zi bei gai gai
  • ng-valid Biao dan nei rong you xiao
  • ng-invalid Biao dan nei rong wu xiao
  • ng-valid-key Mei ci yan zheng yi ge mi jian. Li ran:ng-valid-requiredDang you duo ge bi xu yan zheng de nei rong shi fei chang you yong
  • ng-invalid-key Li ran:ng-invalid-required

Rugao lei dai bi shi de jia zhi wei: falseJi shen zhe ge lei bei shan chu.

Qing wei zhe xie lei tian jia yanshi, wei ni de shi yong xing zhuan ti gao de, you guan de yong hu jie mian.

实例

Shi yong zhong ben de CSS ying yong yanshi:

Try it yourself

Yi ji neng she zhi biao dan de yanshi.

实例

A yin kan fumu (yuan shi) de biao dan he yi gai gai de biao dan ying yong yanshi:

Try it yourself

自定义验证

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

实例

创建您自己的指令，包含自定义验证函数，并通过使用 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>

Try it yourself

Example Explained:

在 HTML 中，新指令将通过使用属性 my-directive 来引用。

在 JavaScript 中，我们首先添加一个名为 myDirective 的新指令。

记住，当命名一个指令时，你必须使用驼峰式命名法，如 myDirective，但调用它时，你必须使用连字符分隔的名称，如 my-directive.

然后，返回一个对象，其中指定我们需要 ngModel，即 ngModelController.

创建一个链接函数，它接受一些参数，其中第四个参数 mCtrl ya aqwal da ngModelController.

sannan kira wani lokaci, a cikin shi, wanda ake kira myValidationwa aqwal da cikakken wanda ya aqwal da sabon abin da ya aqwal da burin cikin abin shirin.

tse ki wanda ta aya bai koyi 'e' ko aya aya, da ta kammala manajanin tsarewa da mCtrl. true tai false.

kwareinmCtrl.$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>

Try it yourself

HTML form attribute novalidate Used to disable the default browser validation.

Example explanation:

AngularJS directives ng-model Bind the input element to the model.

The model object has two properties:user And email.

Due to ng-showOnly when user or email is $dirty And $invalid Only when spans with color:red are displayed.