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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
详解Bootstrap按钮
Jan 04 Javascript
移动端js图片查看器
Nov 17 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
JS实现简单随机3D骰子
Oct 24 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
解决vuex刷新数据消失问题
Nov 12 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php编程每天必学之验证码
2016/03/03 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
javascript中this关键字详解
2016/12/12 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
js实现图片放大展示效果
2017/08/30 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python魔法方法详解
2019/02/13 Python
python中的协程深入理解
2019/06/10 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
python中turtle库的简单使用教程
2020/11/11 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
python中time.ctime()实例用法
2021/02/03 Python
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
文字自荐书范文
2014/02/10 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
小学班主任评语
2014/12/29 职场文书