As shown in the figure above, we need to implement the following verification functions:
Controls are required controls
All need to control the maximum length
The first time the page is opened, the control cannot be displayed as an error state
After the input content is cleared, the required input control needs to be displayed as an error state
The Publish button can only become available after all inputs are valid.
With AngularJS, we can easily implement these requirements, only 1 line of JS code is required. The UI style uses Bootstrap here. Let's start with the sample code:
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> <!-- Main content area--> <div> <div> <!-- Contact us form area--> <form action="/Contact/Create" method="post" role="form" name="createContactForm" ng-controller="ContactCreateController"> <!-- UserName Your name--> <div ng-class="{'has-success' : !createContactForm.UserName.$pristine && createContactForm.UserName.$valid, 'has-error' : !createContactForm.UserName.$pristine && createContactForm.UserName.$invalid }"> <label for="UserName">Your name*</label> <input type="text" ng-model="userName" name="UserName" autofocus="" required ng-maxlength=30> <div ng-show="!createContactForm.UserName.$pristine && createContactForm.UserName.$valid"> <span></span> </div> <div ng-show="!createContactForm.UserName.$pristine && createContactForm.UserName.$invalid"> <span></span> </div> <!-- UserMail Email Address--> <div ng-class="{'has-success' : !createContactForm.UserMail.$pristine && createContactForm.UserMail.$valid, 'has-error' : !createContactForm.UserMail.$pristine && createContactForm.UserMail.$invalid }"> <label for="UserMail">Email Address*</label> <input type="email" ng-model="userMail" name="UserMail" required ng-maxlength=30> <div ng-show="!createContactForm.UserMail.$pristine && createContactForm.UserMail.$valid"> <span></span> </div> <div ng-show="!createContactForm.UserMail.$pristine && createContactForm.UserMail.$invalid"> <span></span> </div> </div> <!-- Subject--> <div ng-class="{'has-success' : !createContactForm.Subject.$pristine && createContactForm.Subject.$valid, 'has-error' : !createContactForm.Subject.$pristine && createContactForm.Subject.$invalid }"> <label for="Subject">Subject*</label> <input type="text" ng-model="subject" name="Subject" required ng-maxlength=100> <div ng-show="!createContactForm.Subject.$pristine && createContactForm.Subject.$valid"> <span></span> </div> <div ng-show="!createContactForm.Subject.$pristine && createContactForm.Subject.$invalid"> <span></span> </div> </div> <!-- Content --> <div ng-class="{'has-success' : !createContactForm.Content.$pristine && createContactForm.Content.$valid, 'has-error' : !createContactForm.Content.$pristine && createContactForm.Content.$invalid }"> <label for="Content">Content*</label> <textarea cols="4" rows="5" ng-model="content" name="Content" required ng-maxlength=1000></textarea> <div ng-show="!createContactForm.Content.$pristine && createContactForm.Content.$valid"> <span></span> </div> <div ng-show="!createContactForm.Content.$pristine && createContactForm.Content.$invalid"> <span></span> </div> <!-- Submit button --> <div> <div ng-show="createContactForm.$valid"> <input type="image" src="/Content/images/comment_publish_button.png" onsubmit="submit();" value="Publish" ng-disabled='!createContactForm.$valid' /> </div> <div ng-show="!createContactForm.$valid"> <img src="/Content/images/invalid_publish_button.png" /> </div> </form> </div> </div> </div> <script src="/Scripts/ftit/ContactCreateController.js"></script></body></html>JS code (it's really only one line)
ContractCreateController.js
var ftitAppModule = angular.module('ftitApp', []);That's fine. A few key points to explain:
ng-class: This tag is used to control the value of class. For example, ng-class="{'has-success' : !createContactForm.Content.$pristine} means that if the value of !createContactForm.Content.$pristine is true, the value of class is has-success.
ng-show: Controls whether the control is displayed.
createContactForm.$valid: After all verification is passed, the value is true, otherwise it is false
createContactForm.Content.$valid: Identifies whether the Content control passes verification, passes true, otherwise it is false
createContactForm.Content.$pristine: Identifies whether the Content control has never been entered. It is never entered as true, otherwise it is false
For more detailed technical issues, please check the AngularJS technical documentation.