教你用AngularJS框架一行JS代碼實現(xiàn)控件驗證效果

更新時間：2014年06月23日 10:52:03 投稿：hebedich

簡單來說Angular.js是google開發(fā)者設計和開發(fā)的一套前端開發(fā)框架，幫助你簡化前端開發(fā)的負擔。到底能簡化到什么程度呢，今天我們來看下，一行代碼實現(xiàn)控件驗證效果，有木有嚇尿？

如上圖所示，我們需要實現(xiàn)如下這些驗證功能：

控件都是必輸控件
都需要控制最大長度
第一次打開頁面，控件不能顯示為錯誤狀態(tài)
輸入內容再清空后，必輸控件需要顯示為錯誤狀態(tài)
只有所有輸入合法后，發(fā)布按鈕才能變?yōu)榭捎脿顟B(tài)
通過AngularJS，我們可以很輕松的實現(xiàn)這些要求，只需要1行JS代碼。UI樣式這里采用的是Bootstrap。先上示例代碼：

HTML。

<!DOCTYPE html>
<html lang="zh-cn" ng-app="ftitApp">
<head>
 <meta charset="utf-8" />
 <title>Demo</title>
 <link href="/Content/bootstrap.css" rel="stylesheet"/>
 <script src="/Scripts/angular.js"></script>
</head>
<body>
 <div class="container body-content">
  <!-- 主要內容區(qū)域 -->
  <div class="row main-content">
   <div class="col-md-9">

    <!-- 聯(lián)系我們表單區(qū)域 -->
    <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="發(fā)布" 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
更細節(jié)的技術問題請查看AngularJS的技術文檔。

您可能感興趣的文章:

AngularJS

Angular2 組件交互實例詳解
Angular2應用程序實際上是有很多父子組價組成的組件樹，因此，了解組件之間如何通信，特別是父子組件之間，對編寫Angular2應用程序具有十分重要的意義。下面通過本文給大家介紹Angular2 組件交互知識，感興趣的朋友一起看看吧
2017-08-08
AngularJS入門教程之表單校驗用法示例
這篇文章主要介紹了AngularJS表單校驗用法,結合實例形式分析了AngularJS各種常見的表單校驗功能及使用技巧,需要的朋友可以參考下
2016-11-11
angular仿支付寶密碼框輸入效果
本篇文章主要介紹了angular仿支付寶密碼框輸入效果，詳細的介紹了使用ng寫一個密碼框格子支付模塊，具有一定的參考價值，有興趣的可以了解一下。
2017-03-03
Angular 5.0 來了! 有這些大變化
Angular 5.0 來了! 有這些重大變化,這篇文章就為大家介紹了Angular 5.0大變化，感興趣的小伙伴們可以參考一下
2017-11-11
解決Angular4項目部署到服務器上刷新404的問題
今天小編就為大家分享一篇解決Angular4項目部署到服務器上刷新404的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Angular 數(shù)據(jù)請求的實現(xiàn)方法
本篇文章主要介紹了Angular 數(shù)據(jù)請求的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
angularjs2 ng2 密碼隱藏顯示的實例代碼
本篇文章主要介紹了angularjs2 ng2 密碼隱藏顯示的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
利用require.js與angular搭建spa應用的方法實例
這篇文章主要給大家介紹了關于利用require.js與angular搭建spa應用的方法實例，文中通過示例代碼給大家介紹的非常詳細，對大家的理解和學習具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。
2017-07-07
AngularJS實現(xiàn)全選反選功能
這篇文章主要介紹了AngularJS實現(xiàn)全選反選功能，這里用到AngularJS四大特性之二----雙向數(shù)據(jù)綁定，對angularjs實現(xiàn)全選反選相關知識感興趣的朋友一起學習吧
2015-12-12
詳解Angular16如何獲取路由參數(shù)
這篇文章主要為大家介紹了Angular16如何獲得路由參數(shù)的實現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07