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入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

詳解AngularJs中$sce與$sceDelegate上下文轉(zhuǎn)義服務(wù)
這篇文章給大家詳細介紹了AngularJs提供的嚴(yán)格上下文轉(zhuǎn)義服務(wù)$sce與$sceDelegate，文中介紹的很詳細，有需要的朋友們可以參考借鑒。
2016-09-09
angular雙向綁定模擬探索
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
Angular實現(xiàn)的敏感文字自動過濾與提示功能示例
這篇文章主要介紹了Angular實現(xiàn)的敏感文字自動過濾與提示功能,結(jié)合實例形式分析了AngularJS針對字符串的輸入判定及實時顯示相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
Angular.js中angular-ui-router的簡單實踐
本篇文章主要介紹了Angular.js中angular-ui-router的簡單實踐，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
AngularJS2中一種button切換效果的實現(xiàn)方法（二）
這篇文章主要介紹了AngularJS2中一種button切換效果的實現(xiàn)方法（二）,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
angular5 httpclient的示例實戰(zhàn)
本篇文章主要介紹了angular5 httpclient的示例實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN含義解析
這篇文章主要為大家介紹了Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN的含義解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-10-10
angularJs提交文本框數(shù)據(jù)到后臺的方法
今天小編就為大家分享一篇angularJs提交文本框數(shù)據(jù)到后臺的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
Angular 4依賴注入學(xué)習(xí)教程之FactoryProvider配置依賴對象（五）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之FactoryProvider配置依賴對象的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-06-06
Angular.Js中過濾器filter與自定義過濾器filter實例詳解
Angularjs過濾器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定義過濾器，所以下面這篇文章主要給大家介紹了Angular.Js中過濾器filter與自定義過濾器filter的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-05-05