这次，学习angularjs的表单的验证，angularjs提供上表几种状态验证：

状态	描述
$invalid	未通过验证
$valid	经过验证
$pristine	未修改过
$dirty	修改
$error	错误

 

另外，AngularJS内置的验证器：

验证器	描述
required	必需的
ng-required	基于控制器布尔条件标记输入字段为必需
ng-minlength	最小长度
ng-maxlength	最大长度
ng-pattern	指定的正则表达式模式进行检查
type=”email”	电子邮件验证
type=”number”	数字验证
type=”date”	如果浏览器支持，显示一个HTML日期选择器。否则，默认为一个文本输入
type=”url”	验证URL文本输入

 

下面Insus.NET分别举个例子进行实践与说明：

 第一种情形，文本框必须填写，还要求字符串的最小长度和最大长度。

 

第二种情形，必填字段，使用type=number来限制输入字符为数字。

 

第三种情形，必填字段，验证用户输入日期。

第四种情形，字段域验证用户输入的邮箱地址格式是否正确

 

第五种情形，对文本框限制只能输入数字，而且有数值范围，最小值为7，最大值为109：

第六种情形，验证用户输入网址格式字符串

第七种情形，使用pattern正则来验证用户输入的数据，下面是只能输入英文字母大小写。

 

实时操作演示：

 

 

 

      
        
       
            Item                        
       
                
                            Text请求值。                                
                            Text最小长度为4个字符。                                
                            Text最大长度为13个字符。                            
       
        
       
        
       
            Number                        
       
                
                            Number请求值。                                
                            Number必须为数字。                            
       
        
       
        
       
            Date                        
       
                
                            Date请求值。                                
                            Date必须为日期。                            
       
        
       
        
       
            Email                        
       
                
                            email请求值。                                
                            email必须为邮箱地址。                            
       
        
       
        
       
            Range                        
       
                
                            Range请求值。                                
                            Range必须为数字。                                
                            Range最小值为7。                                
                            Range最大值为109。                            
       
        
       
        
       
            url                        
       
                
                            url请求值。                                
                            url必须为url格式。                            
       
        
       
        
       
            pattern                        
       
                
                            pattern请求值。                                
                            pattern必须大小写字符。                            
       
        
       
    
      

 

var cvApp = angular.module('CustomValidationApp', []);        cvApp.controller('cvController', function ($scope, $http) {        });