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

作者: 机智的男票灬
来源: 51数据库
2021-07-12

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

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

html。

<!doctype html>
<html lang="zh-cn" ng-app="ftitapp">
<head>
 <meta charset="utf-8" />
 <title>demo</title>
 <link  rel="stylesheet"/>
 <script src="/scripts/angular.js"></script>
</head>
<body>
 <div class="container body-content">
  <!-- 主要内容区域 -->
  <div class="row main-content">
   <div class="col-md-9">

    <!-- 联系我们表单区域 -->
    <form action="/contact/create" method="post" role="form" name="createcontactform" ng-controller="contactcreatecontroller">
     <!-- username 您的称呼 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createcontactform.username.$pristine && createcontactform.username.$valid, 'has-error' : !createcontactform.username.$pristine && createcontactform.username.$invalid }">
      <label for="username">您的称呼*</label>
      <input type="text" class="form-control" ng-model="username" name="username" autofocus="" required ng-maxlength=30>
      <div ng-show="!createcontactform.username.$pristine && createcontactform.username.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createcontactform.username.$pristine && createcontactform.username.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- usermail 邮箱地址 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createcontactform.usermail.$pristine && createcontactform.usermail.$valid, 'has-error' : !createcontactform.usermail.$pristine && createcontactform.usermail.$invalid }">
      <label for="usermail">邮箱地址*</label>
      <input type="email" class="form-control" ng-model="usermail" name="usermail" required ng-maxlength=30>
      <div ng-show="!createcontactform.usermail.$pristine && createcontactform.usermail.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createcontactform.usermail.$pristine && createcontactform.usermail.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- subject 主题 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createcontactform.subject.$pristine && createcontactform.subject.$valid, 'has-error' : !createcontactform.subject.$pristine && createcontactform.subject.$invalid }">
      <label for="subject">主题*</label>
      <input type="text" class="form-control" ng-model="subject" name="subject" required ng-maxlength=100>
      <div ng-show="!createcontactform.subject.$pristine && createcontactform.subject.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createcontactform.subject.$pristine && createcontactform.subject.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- content 内容 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createcontactform.content.$pristine && createcontactform.content.$valid, 'has-error' : !createcontactform.content.$pristine && createcontactform.content.$invalid }">
      <label for="content">内容*</label>
      <textarea cols="4" rows="5" class="form-control" ng-model="content" name="content" required ng-maxlength=1000></textarea>
      <div ng-show="!createcontactform.content.$pristine && createcontactform.content.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createcontactform.content.$pristine && createcontactform.content.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- 提交按钮 -->
     <div class="form-group">
      <div ng-show="createcontactform.$valid">
       <input type="image" src="/content/images/comment_publish_button.png" onsubmit="submit();" value="发布" ng-disabled='!createcontactform.$valid' />
      </div>
      <div ng-show="!createcontactform.$valid">
       <img src="/content/images/invalid_publish_button.png" />
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
 
 <script src="/scripts/ftit/contactcreatecontroller.js"></script>
</body>
</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的技术文档。