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操作select下拉列表框的代码
Jun 04 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
javascript if条件判断方法小结
May 17 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 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桌面中心(四) 数据显示
2007/03/11 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
python daemon守护进程实现
2016/08/27 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
python简单实例训练(21~30)
2017/11/15 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python将字母转化为数字实例方法
2019/10/04 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
super()与this()的区别
2016/01/17 面试题
个人对照检查材料
2014/02/12 职场文书
《木笛》教学反思
2014/03/01 职场文书
运动会加油稿100字
2014/09/19 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
python turtle绘图命令及案例
2021/11/23 Python
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python