如何在 AngularJS 中验证数据？

在本文中，我们将了解如何在 Angular JS 中验证数据，并通过示例了解验证数据的各种方法。

AngularJS 允许客户端表单验证。表单验证是必要的，因为它确保表单中的数据是正确的、完整的，并且在提交表单并将详细信息发送到服务器之前以正确的方式输入。为了验证数据，我们需要验证表单和输入字段，并相应地通知用户当前状态。如果用户以错误的格式输入数据，则应通知他相同的信息，而不是提交错误的详细信息。

例如，如果要求用户输入电话号码并且用户输入“abcde”，则应要求用户再次输入电话号码，并应通知该字段仅允许输入数字。通过在客户端执行表单验证，我们确保将正确和完整的数据发送到服务器。

AngularJS 表单中可以使用几个输入控件，如下所示：

• input ：用于通过改变表单的类型从表单中获取文本、密码、电子邮件等各种类型的输入数据。

• select ：用于创建下拉列表。

 
 1 
 2

• button ：它定义了一个可点击的按钮来控制其他元素或执行功能。

Submit

• textarea ：用于获取输入的长文本内容。

AngularJS 包含以下验证指令：

• ng 要求： 它可用于将所需属性放在输入字段上，
• ng-最小长度： 它可用于在输入字段上放置最小长度属性，
• ng-最大长度： 它可用于在输入字段上放置最大长度属性，
• ng 模式： 如果ngModel值与 RegEx 表达式不匹配，它可用于放置模式验证错误键。

示例 1 ：此示例描述了使用验证指令的表单验证

HTML

  

    Data Validation in Angular JS
    
    

  

    Contact Us
    
        Name:
         
        
            Minimum 3 characters required.
         
        Name can have only alphabets.
        
        
        Phone:
         
        Phone number can have only digits.
         
        Minimum 6 characters required.
        
        Minimum 10 characters required.
        
        
        Email:
        
            Email has to be in format [e-mail].
        
        
        Message:
        
         
            Maximum length of message is 100 characters.
            
    

输出：

示例 1

说明：在上面的例子中，我们制作了一个联系我们的表格。表单的名称是“formname”。表单中有四个字段：姓名、电话、电子邮件和消息。我们使用验证指令来验证用户输入的数据。

对于名称，我们使用了ng-required指令，这意味着必须输入名称， ng-pattern具有正则表达式，只允许名称中的字母和空格， ng-minlength确保名称至少包含3 个字符， ng-maxlength为名称中允许的最大字符数。我们使用了指令ng-show指令来相应地显示消息。如果条件为真， ng-show指令会显示一条消息。例如，如果用户输入的名称与ng-pattern指令 formname.name.$error.pattern 中指定的正则表达式不匹配，那么“ng-show=formname.name.$error.pattern”将为真”将打印消息“名称只能有字母”。在这里，我们使用了 $error 对象，其中包含应用于元素的验证属性。同样，所有其他字段：电话、电子邮件、消息都已验证。

在 AngularJS 中有两种验证数据的方法。第一种方法是使用验证控制状态，包括表单状态和输入状态。另一种方法是使用 CSS 类。

表单状态和输入状态：表单的状态和输入字段由 AngularJS 更新，这些状态用于向用户显示有用的消息。

输入字段具有以下状态：

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

表单具有以下状态：

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

这些属性可以是真或假。

示例 2：此示例描述了使用表单和字段状态的表单验证。

HTML

  

    Data Validation in Angular JS
    
    

  

    Contact Us
    
        Name:
        
         
             Name is required and can have only alphabets.
         
        
        Phone:
         
            
                Phone number is required and can have only digits.
            
        
        Email:
         
            
                Email has to be in format [e-mail].
            
        
        Message:
                 
            
Message is required, maximum length of message can be 100 characters.
            
        
         
    

输出：

说明：在上面的示例中，我们使用了字段状态进行验证。对于我们使用的名称 ng-show = “formname.name.$touched && formname.name.$error.required ”，这意味着如果该字段已被触摸但该字段仍为空，则消息“名称是必需的，只能有字母”被打印出来。

对于电话号码，我们使用了 ng-show = “formname.phone.$invalid && formname.phone.$touched”，这意味着如果该字段被触摸并且用户输入的任何内容都无效，则打印所需的消息。同样，我们已经验证了电子邮件和消息字段。

如果条件“formname.$invalid”为真，我们已禁用该按钮，这意味着如果表单中的任何字段包含无效数据，则该按钮将不会被启用。如果在所有字段中输入的数据都有效，则该按钮将被启用。

用于表单验证的 CSS 类：为了允许对表单和控件进行样式设置， ng-model 添加了 CSS 类。

在输入字段中添加或删除以下类：

• ng-untouched : 字段尚未被触及
• ng-touched : 字段已被触及
• ng-pristine : 字段没有被修改
• ng-dirty : 字段已被修改
• ng-valid : 字段内容有效
• ng-invalid : 字段内容无效

以下类被添加到表单中或从表单中删除：

• ng-pristine : 没有字段尚未修改
• ng-dirty : 一个或多个字段已被修改
• ng-valid : 表单内容有效
• ng-invalid : 表单内容无效

示例 3：在此示例中，我们使用 CSS 类向表单和字段添加样式。

HTML

  

    Data Validation in Angular JS
    
    
    
        input.ng-invalid,
        textarea.ng-invalid {
            background-color: red;
        }
          
        input.ng-untouched,
        textarea.ng-untouched input.ng-pristine,
        textarea.ng-pristine {
            background-color: pink;
        }
          
        input.ng-touched,
        textarea.ng-touched {
            background-color: red;
        }
          
        input.ng-valid,
        textarea.ng-valid {
            background-color: green;
        }
          
        form {
            padding: 40px;
        }
          
        form.ng-invalid {
            background-color: #ed98a5;
        }
          
        form.ng-valid {
            background-color: #98edaf;
        }
    

  

    Contact Us
    
        Name:
        
            
               Minimum 3 characters required.
            
            
               Name can have only alphabets.
            
        
        Phone:
         
            
                Phone number can have only digits.
             
            
                Minimum 6 characters required.
           
           
                Minimum 10 characters required.
           
        
        Email:
         
            
                Email has to be in format [e-mail].
            
        
        Message:
        
                 
            
                Maximum length of message is 100 characters.
             
    

输出：

说明：在上面的例子中，我们使用 CSS 类来为输入控件和表单添加样式。最初，表单的颜色是红色。对于输入字段，如果用户输入了无效的数据，输入控件的颜色将变为红色。如果用户没有触摸或修改该字段，其颜色将保持为粉红色。如果用户触摸了该字段但没有输入任何内容，则其颜色将变为红色。如果用户输入有效的数据，其颜色将变为绿色。当所有字段都有有效的数据时，表单的颜色将变为绿色。

示例 4：在此示例中，我们通过指定不同的验证检查来创建注册表单。

HTML

  

    Data Validation in Angular JS
    
    
  
        input.ng-dirty {
            background-color: lightblue;
        }
          
        input.ng-valid {
            background-color: lightgreen;
        }
          
        span,
        p {
            color: red;
        }
          
        table {
            border-collapse: collapse;
            margin-bottom: 20px;
            margin-top: 10px;
        }
          
        tr,
        td,
        th {
            border: 1px solid black;
        }
    

  

    Registration Form
    
        First Name:
        
            
                Name is required.
             
            
                Minimum 3 characters required.
            
            
                Name can have only alphabets.
            
        
        Last Name
         
            
                Name is required.
             
            
                Minimum 3 characters required.
             
            
                Name can have only alphabets.
            
        
        Gender:
        
        
        Male
        
        Female
        
        Password
         
            
                Password is required.
            
            
                Minimum 6 characters required.
             
            
                Minimum 10 characters required.
            
        
        Phone
        
            
                Phone is required.
             
            
                Minimum 6 characters required.
             
            
                Phone number can have only digits.
             
            
                Minimum 10 characters required.
            
        
        Email:
         
            
                Email is required.
             
            
                Email has to be in format [e-mail].
            
        
        
            Select city
            {{x}}
        
        
            Select a city
        
        
        Select technologies
        
        
        HTML
        
        
        CSS
        
        
        JavaScript
        
        
        PHP
        
        
                Select a technology
        
  
        
    
    
    
        
            
            
        
    {{x.key}}{{x.value}}
    
        var app = angular.module('myApp', []);
        app.controller('myctrl', function($scope) {
            $scope.value = 0;
            $scope.firstname = '';
            $scope.city = "Select city";
            $scope.citylist = ["Mumbai", "Jaipur", "Pune"];
            $scope.calculate = function() {
                $scope.value += 1;
                $scope.list1 = [];
                if($scope.checkboxvalue1) 
                    $scope.list1.push(formname.option1.value);
                if($scope.checkboxvalue2) 
                    $scope.list1.push(formname.option2.value);
                if($scope.checkboxvalue3) 
                    $scope.list1.push(formname.option3.value);
                if($scope.checkboxvalue4) 
                    $scope.list1.push(formname.option4.value);
                $scope.list2 = $scope.list1.toString();
                $scope.list = [{
                    "key": "First name",
                    "value": $scope.firstname
                }, {
                    "key": "last name",
                    "value": $scope.lastname
                }, {
                    "key": "Gender",
                    "value": $scope.gender
                }, {
                    "key": "Phone",
                    "value": $scope.phone
                }, {
                    "key": "Email",
                    "value": $scope.email
                }, {
                    "key": "City",
                    "value": $scope.city
                }, {
                    "key": "Selected Technologies",
                    "value": $scope.list2
                }];
            }
        });
    

输出：