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之更有效率的字符串替换
Aug 02 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
原生JS进行前后端同构
Apr 22 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
浅析为什么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
CI(CodeIgniter)框架配置
2014/06/10 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
代码生成器 document.write()
2007/04/15 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
电子商务专业实习生自我鉴定
2013/09/24 职场文书
护士自我评价范文
2014/01/25 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
企业精神口号
2014/06/11 职场文书
邹越演讲观后感
2015/06/15 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
如何在Python中妥善使用进度条详解
2022/04/05 Python