上一节:
下一节:

  AngularJS 表单验证

  • 表单验证

    AngularJS 提供客户端表单验证。
    AngularJS 监视表单和输入字段（输入框(input)，文本区域(textarea)，选择框(select)）的状态，并让您通知用户当前状态。
    AngularJS 还保存有关是否已对其进行触摸或修改的信息。
    您可以使用标准 HTML5 属性来验证输入，也可以创建自己的验证功能。
    客户端验证不能单独确保用户输入的安全。服务器端验证也是必要的。

  • Required 属性

    使用 required HTML5属性来指定必须填写输入的字段： 
    <form name="myForm">
 <input name="myInput" ng-model="myInput" required>
</form>
<p>输入的有效状态为：</p>
<h1>{{ myForm.myInput.$valid }}</h1>
    尝试一下

  • Email 属性

    使用 HTML5 类型的电子邮件(email)来指定该值必须是电子邮件(email)： 
    <form name="myForm">
  <input name="myInput" ng-model="myInput" type="email">
</form>
<p>输入的有效状态为：</p>
<h1>{{ myForm.myInput.$valid }}</h1>
    尝试一下

  • 表单状态和输入状态

    AngularJS 不断更新表单和输入字段的状态。
    input 输入字段具有以下状态：
    • $untouched 该字段尚未被触及
    • $touched 字段已被触及
    • $pristine 该字段尚未被修改
    • $dirty 字段已被修改
    • $invalid 字段内容无效
    • $valid 字段内容有效
    它们都是 input 输入字段的所有属性，并且返回为 true 或 false。
    form 表单具有以下状态：
    • $pristine 尚未修改任何字段
    • $dirty 一个或多个已被修改
    • $invalid 表单内容无效
    • $valid 表单内容有效
    • $submitted 表格已提交
    它们都是 form 表单的属性，并且返回为 true 或 false。
    您可以使用这些状态向用户显示有意义的消息。 例如，如果需要一个字段，而用户将该字段留空，则应向用户发出警告
    下面示例演示了如果该字段已被触摸并且为空，则显示错误消息： 
    <input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">名称为必填项，不能为空</span>
    尝试一下

  • CSS 类

    AngularJS 根据状态将CSS类添加到表单和输入字段。
    以下类已添加到 input 输入字段或从输入字段中删除：
    • ng-untouched 该字段尚未被触摸
    • ng-touched 该领域已被触摸
    • ng-pristine 该字段尚未被修改
    • ng-dirty 该字段已被修改
    • ng-valid 字段内容有效
    • ng-invalid 字段内容无效
    • ng-valid-key 每个验证一个密钥。示例：ng-valid-required，当必须验证的事物多于一项时很有用
    • ng-invalid-key 示例：ng-invalid-required
    以下类已添加到 form 表单或从表单中删除：
    • ng-pristine 尚未修改任何字段
    • ng-dirty 一个或多个字段已被修改
    • ng-valid 表单内容有效
    • ng-invalid 表单内容无效
    • ng-valid-key 每个验证一个密钥。示例：ng-valid-required，当必须验证的事物多于一项时很有用
    • ng-invalid-key 示例：ng-invalid-required
    如果这些类表示的值为 false，则将其删除。
    为这些类添加样式，以为您的应用程序提供更好，更直观的用户界面。
    下面示例使用标准CSS应用样式： 
    <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() {
       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>
    尝试一下
    示例说明：
    在HTML中，将使用属性 my-directive 引用新指令。
    在JavaScript中，我们首先添加一个名为 myDirective 的新指令。
    请记住，在命名指令时，必须使用驼峰式案例名称 myDirective，但是在调用指令时，必须使用-分隔名称 my-directive。
    然后，返回一个您在其中指定我们需要 ngModel 的对象，即ngModelController。
    创建一个带有一些参数的链接函数，其中第四个参数 mCtrl 是ngModelController，
    然后指定一个函数（在本例中为myValidation），该函数带有一个参数，该参数是输入元素的值。
    测试值是否包含字母 "e"，并将模型控制器的有效性设置为 true或 false。
    最后 mCtrl.$parsers.push(myValidation); 会将myValidation函数添加到其他函数数组中，该函数将在每次输入值更改时执行。

  • 表单验证实例

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <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>
        </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>
    <script>
        var app = angular.module('myApp', []);
        app.controller('validateCtrl', function($scope) {
            $scope.user = 'John Doe';
            $scope.email = 'john.doe@gmail.com';
        });
    </script>
</body>
</html>
    尝试一下
    HTML表单属性novalidate用于禁用默认浏览器验证。
    示例说明：
    AngularJS指令 ng-model 将输入元素绑定到模型。
    模型(model)对象具有两个属性：用户和电子邮件。
    由于 ng-show，只有当用户或电子邮件为 $dirty 被修改时 和 $invalid 无效时，才会显示颜色为红色的错误。
上一节:
下一节: