AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能示例
更新時間：2017年10月25日 10:22:57 作者：itsonglin
這篇文章主要介紹了AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能,涉及AngularJS使用ng-blur、ng-focus針對表單事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html ng-app="formExample">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.js"></script>
<script>
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope)
{
$scope.userType = 'guest';
$scope.change = false;
}]);
</script>
</head>
<body>
<form name="myForm" ng-controller="FormController">
userType: <input name="input" ng-model="userType" ng-blur="change=true" ng-focus="change=false" required>
<span class="error" ng-show="myForm.input.$error.required && change">必填項</span><br>
</form>
</body>
</html>
運行效果：
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
高效利用Angular中內(nèi)置服務(wù)$http、$location等
這篇文章主要介紹了如何高效利用Angular中內(nèi)置服務(wù)，大家知道的Angular內(nèi)置服務(wù)有哪些，感興趣的小伙伴們可以參考一下2016-03-03
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
本教程旨在幫助你盡可能快速而有效地學(xué)習(xí)AngularJS。通過該教程你會學(xué)習(xí)到AngularJS的一些基本特性，例如指令、表達(dá)式、過濾器、模塊和控制器等。以及其它所有你需要知道的有關(guān)AngularJS的東西，如事件、DOM節(jié)點、表單、用戶輸入、數(shù)據(jù)驗證、Http對象等。2015-09-09
AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法
這篇文章主要介紹了AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法,結(jié)合實例形式分析了AngularJS基于自定義指令及廣播事件實現(xiàn)監(jiān)聽功能的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
理解AngularJs篇：30分鐘快速掌握AngularJs
這篇文章主要介紹了理解AngularJs篇：30分鐘快速掌握AngularJs，詳細(xì)介紹了AngularJs所涉及的知識點，有興趣的可以了解一下。2016-12-12
最近這兩天公司正在做一個PDF協(xié)議下載的功能，目前的解決方案可以分為完全前端生成和后端生成兩種方式。前端生成PDF有jsPDF 和pdfmake 兩種方式，下面這篇文章就給大家分享下如何在Angular.JS中接收并下載PDF的方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11
angular ngClick阻止冒泡使用默認(rèn)行為的方法
這篇文章主要介紹了angular ngClick阻止冒泡使用默認(rèn)行為的方法,較為詳細(xì)的分析了AngularJS中ngClick事件執(zhí)行原理與阻止冒泡的實現(xiàn)技巧,需要的朋友可以參考下2016-11-11
利用VS Code開發(fā)你的第一個AngularJS 2應(yīng)用程序
這篇文章主要給大家介紹了關(guān)于利用VS Code如何開發(fā)你的第一個AngularJS 2應(yīng)用程序的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友下面來一起看看吧。2017-12-12
AngularJS基礎(chǔ) ng-readonly 指令簡單示例
本文主要介紹AngularJS ng-readonly 指令,這里對ng-readonly指令的資料做了整理，有學(xué)習(xí)AngularJS 指令的同學(xué)可以參考下2016-08-08
下面小編就為大家?guī)硪黄狝ugularjs-起步詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07