AngularJS表单和输入验证实例

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

注意：客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

1、HTML 控件

以下 HTML input 元素被称为 HTML 控件:input 元素、select 元素、button 元素、textarea 元素。

2、HTML 表单

 AngularJS 表单是输入控件的集合。HTML 表单通常与 HTML 控件同时存在。

 
 
 
 
 
 
 
 
 
  
 
form = {{user }}
 
 
master = {{master}}
 
 
 
 
 

3、输入验证

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

 
 
 
 
 
 
 
 
验证实例 
 
 
 
 

AngularJS ng-model 指令用于绑定输入元素到模型中。模型对象有两个属性： user 和 email。我们使用了 ng-show指令，color:red 在邮件是 $dirty 或 $invalid 才显示。

没用初始值的输入验证：注意ng-app=""，ng-app有值就必须连接到代码模块，利用angular.module 函数来创建模块。
 

  
 
 
 
 
 
 
 
验证实例 
 
 
 

4、ng-disabled实例

5、ng-submit实例

6、maxlength和minlength实例

7、ng-class实例

 
 
   
     
     
     
     
    .deleted { 
     text-decoration: line-through; 
    } 
    .bold { 
     font-weight: bold; 
    } 
    .red { 
     color: red; 
    } 
    .error { 
     color: red; 
     background-color: yellow; 
    } 
    .base-class { 
     transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    } 
    .base-class.my-class { 
     color: red; 
     font-size:3em; 
    } 
     
   
   
   
   
     
   
   
 
 

8、ng-if实例

 
 
   
     
     
     
     
    .animate-if { 
     width:400px; 
     border:2px solid yellowgreen; 
     border-radius: 10px; 
     padding:10px; 
     display: block; 
    }  
     
   
   
   
   
     
   
   
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。