AngularJS实现的获取焦点及失去焦点时的表单验证功能示例


Posted in Javascript onOctober 25, 2017

本文实例讲述了AngularJS实现的获取焦点及失去焦点时的表单验证功能。分享给大家供大家参考,具体如下:

<!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>

运行效果:

AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
深入理解js数组的sort排序
May 28 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 #Javascript
vue语法之拼接字符串的示例代码
Oct 25 #Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 #Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 #Javascript
浅谈Node.js之异步流控制
Oct 25 #Javascript
AngularJS 实现购物车全选反选功能
Oct 24 #Javascript
React Native时间转换格式工具类分享
Oct 24 #Javascript
You might like
PHP 数组遍历顺序理解
2009/09/09 PHP
php 抽象类的简单应用
2011/09/06 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php编程每天必学之验证码
2016/03/03 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
js select常用操作控制代码
2010/03/16 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python多线程下载文件的方法
2015/07/10 Python
python @classmethod 的使用场合详解
2019/08/23 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
机关门卫制度
2014/02/01 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
ktv好的活动方案
2014/08/17 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
医院党建工作总结2015
2015/05/26 职场文书
西游降魔篇观后感
2015/06/15 职场文书
单独二胎证明
2015/06/24 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
你需要掌握的20个Python常用技巧
2022/02/28 Python
python中数组和列表的简单实例
2022/03/25 Python