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获取和设置属性的方法
Feb 20 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 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 strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
php for 循环使用的简单实例
2016/06/02 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
node.js开机自启动脚本文件
2014/12/24 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
python控制台显示时钟的示例
2014/02/24 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
一看就懂得Python的math模块
2018/10/21 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
幼儿园教师岗位职责
2014/03/17 职场文书
文案策划求职信
2014/03/18 职场文书
社区工作者演讲稿
2014/05/23 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2015年度物流工作总结
2015/04/30 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
2016年寒假生活小结
2015/10/10 职场文书
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android