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 输入字段的所有属性,并且返回为 truefalse
    form 表单具有以下状态:
    • $pristine 尚未修改任何字段
    • $dirty 一个或多个已被修改
    • $invalid 表单内容无效
    • $valid 表单内容有效
    • $submitted 表格已提交
    它们都是 form 表单的属性,并且返回为 truefalse
    您可以使用这些状态向用户显示有意义的消息。 例如,如果需要一个字段,而用户将该字段留空,则应向用户发出警告
    下面示例演示了如果该字段已被触摸并且为空,则显示错误消息:
    <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
    创建一个带有一些参数的链接函数,其中第四个参数 mCtrlngModelController
    然后指定一个函数(在本例中为myValidation),该函数带有一个参数,该参数是输入元素的值。
    测试值是否包含字母 "e",并将模型控制器的有效性设置为 truefalse
    最后 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 无效时,才会显示颜色为红色的错误。