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 相关文章推荐
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
浅析为什么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
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
htm调用JS代码
2007/03/15 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
Js组件的一些写法
2010/09/10 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
js+css实现打字效果
2020/06/24 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
python变量赋值方法(可变与不可变)
2019/01/12 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
学习党课思想汇报
2013/12/29 职场文书
师德师风演讲稿
2014/05/05 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
单位委托书
2014/10/15 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
护士自我推荐信范文
2015/03/24 职场文书
学校百日安全活动总结
2015/05/07 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
开业典礼致辞
2015/07/29 职场文书
初中英语教学随笔
2015/08/15 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js