教你用AngularJS框架一行JS代碼實現(xiàn)控件驗證效果
如上圖所示,我們需要實現(xiàn)如下這些驗證功能:
控件都是必輸控件
都需要控制最大長度
第一次打開頁面,控件不能顯示為錯誤狀態(tài)
輸入內(nè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"> <!-- 主要內(nèi)容區(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 內(nèi)容 --> <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">內(nèi)容*</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', []);
這樣就好啦。幾個關(guān)鍵的地方解釋一下:
ng-class:這個標(biāo)簽用來控制class的值。例如ng-class="{'has-success' : !createContactForm.Content.$pristine}的意思就是,如果!createContactForm.Content.$pristine的值為true,class的值就為has-success。
ng-show:控制是否顯示該控件。
createContactForm.$valid:全部驗證通過后,值為true,否則為false
createContactForm.Content.$valid:標(biāo)識Content控件是否通過驗證,通過為true,否則為false
createContactForm.Content.$pristine:標(biāo)識Content控件是否從未輸入過。從未輸入為true,否則為false
更細(xì)節(jié)的技術(shù)問題請查看AngularJS的技術(shù)文檔。
相關(guān)文章
Angularjs實現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實現(xiàn)帶查找篩選功能的select下拉框的詳細(xì)過程及示例代碼,文中通過示例介紹的很詳細(xì),相信會對大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價值,有需要的朋友們可以一起來看看。2016-10-10AngularJS深入探討scope,繼承結(jié)構(gòu),事件系統(tǒng)和生命周期
這篇文章主要介紹了AngularJS的scope,繼承結(jié)構(gòu),事件系統(tǒng)和生命周期,較為詳細(xì)的分析了scope的作用域、層次結(jié)構(gòu)、繼承及生命周期相關(guān)概念與使用技巧,需要的朋友可以參考下2016-11-11AngularJS對動態(tài)增加的DOM實現(xiàn)ng-keyup事件示例
這篇文章主要介紹了AngularJS對動態(tài)增加的DOM實現(xiàn)ng-keyup事件示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解
基于流的前端自動化構(gòu)建工具,利用gulp可以提高前端開發(fā)效率,特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包的相關(guān)資料,需要的朋友可以參考下。2017-07-07AngularJS 監(jiān)聽變量變化的實現(xiàn)方法
今天小編就為大家分享一篇AngularJS 監(jiān)聽變量變化的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10