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 lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
range 标准化之获取
Aug 28 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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/07/17 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php生成QRcode实例
2014/09/22 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
ThinkPHP路由详解
2015/07/27 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python生成不重复随机值的方法
2015/05/11 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
python3 使用traceback定位异常实例
2020/03/09 Python
如何将整数int转换成字串String
2014/03/21 面试题
上海微创软件面试题
2012/06/14 面试题
高中军训感言1000字
2014/03/01 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
实习介绍信范文
2015/05/05 职场文书
python中的random模块和相关函数详解
2022/04/22 Python
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers