教你用AngularJS框架一行JS代码实现控件验证效果_AngularJS

如上图所示，我们需要实现如下这些验证功能：

控件都是必输控件
都需要控制最大长度
第一次打开页面，控件不能显示为错误状态
输入内容再清空后，必输控件需要显示为错误状态
只有所有输入合法后，发布按钮才能变为可用状态
通过AngularJS，我们可以很轻松的实现这些要求，只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码：

HTML。

  
  

   


    
    

     
     

      您的称呼*
      

       
      
      

       
      
     
     
     

      邮箱地址*
      

       
      
      

       
      
     
     
     

      主题*
      

       
      
      

       
      
     
     
     

      内容*
      

       
      
      

       
      
     
     
     

      

       

      

       

     
    
   
  
 
 
 

JS代码（真的只有一行哟）

ContractCreateController.js

var ftitAppModule = angular.module('ftitApp', []);

这样就好啦。几个关键的地方解释一下：

ng-class：这个标签用来控制class的值。例如ng-class="{'has-success' : !createContactForm.Content.$pristine}的意思就是，如果!createContactForm.Content.$pristine的值为true，class的值就为has-success。
ng-show：控制是否显示该控件。
createContactForm.$valid：全部验证通过后，值为true，否则为false
createContactForm.Content.$valid：标识Content控件是否通过验证，通过为true，否则为false
createContactForm.Content.$pristine：标识Content控件是否从未输入过。从未输入为true，否则为false
更细节的技术问题请查看AngularJS的技术文档。