首頁 > 開發者 > JavaScript
如所示，我們需要實現如下這些驗證功能：
控制項都是必輸控制項
都需要控制最大長度
第一次開啟頁面，控制項不能顯示為錯誤狀態
輸入內容再清空後，必輸控制項需要顯示為錯誤狀態
只有所有輸入合法後，發布按鈕才能變為可用狀態
通過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', []);
這樣就好啦。幾個關鍵的地方解釋一下：
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的技術文檔。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
