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 弹出框 替代浏览器的弹出框
Oct 29 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
javascript数据类型验证方法
Dec 31 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
vue实现前端列表多条件筛选
Oct 26 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
Terran剧情介绍
2020/03/14 星际争霸
Home Coffee Roasting
2021/03/03 咖啡文化
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
python复制文件代码实现
2013/12/23 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python程序如何进行保存
2020/07/03 Python
python中的测试框架
2020/11/13 Python
重构Python代码的六个实例
2020/11/25 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
RealTek面试题
2016/06/28 面试题
自考生毕业自我鉴定
2013/10/10 职场文书
工作检讨书怎么写
2014/10/10 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
少年雷锋观后感
2015/06/10 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
Android studio 简单计算器的编写
2022/05/20 Java/Android