快捷導(dǎo)航

AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能示例

更新時(shí)間：2017年10月25日 10:22:57 作者：itsonglin

這篇文章主要介紹了AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能,涉及AngularJS使用ng-blur、ng-focus針對(duì)表單事件監(jiān)聽(tīng)相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yà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">必填項(xiàng)</span><br>
</form>
</body>
</html>

運(yùn)行效果：

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

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