歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

AngularJS：一行JS代碼實現控件驗證效果

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

  1. 控件都是必輸控件
  2. 都需要控制最大長度
  3. 第一次打開頁面，控件不能顯示為錯誤狀態
  4. 輸入內容再清空後，必輸控件需要顯示為錯誤狀態
  5. 只有所有輸入合法後，發布按鈕才能變為可用狀態

通過AngularJS，我們可以很輕松的實現這些要求，只需要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">
        <!-- 主要內容區域 -->
        <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', []);

這樣就好啦。幾個關鍵的地方解釋一下：

  1. ng-class：這個標簽用來控制class的值。例如ng-class="{'has-success' : !createContactForm.Content.$pristine}的意思就是，如果!createContactForm.Content.$pristine的值為true，class的值就為has-success。
  2. ng-show：控制是否顯示該控件。
  3. createContactForm.$valid：全部驗證通過後，值為true，否則為false
  4. createContactForm.Content.$valid：標識Content控件是否通過驗證，通過為true，否則為false
  5. createContactForm.Content.$pristine：標識Content控件是否從未輸入過。從未輸入為true，否則為false

更細節的技術問題請查看AngularJS的技術文檔。

AngularJS權威教程 清晰PDF版  http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡，並分享我的工作~帶你走近AngularJS系列：

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡

Linux編程

八大排序算法JS及PHP代碼實現

跳表（skiplist）的代碼實現

Java8讀文件僅需一行代碼

AngularJS 實現輪播圖效果

利用Node.js實現模擬Session驗證的登陸

Android實現刮獎的效果

Android代碼實現控件按下顯示底色效果

Android動畫Animation之Tween用代碼實現動畫效果

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved