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定时器实例
Apr 17 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
js编写选项卡效果
May 23 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python实现上传下载文件功能
2020/11/19 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
用Eclipse写python程序
2018/02/10 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python3 下载网络图片代码实例
2019/08/27 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
PHP笔试题
2012/02/22 面试题
优秀毕业生求职推荐信范文
2013/11/21 职场文书
二手书店创业计划书
2014/01/16 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js