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入门教程(7) History历史对象
Jan 31 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
原生JS实现pc端轮播图效果
Dec 21 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php统计数组元素个数的方法
2015/07/02 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
javascript 函数式编程
2007/08/16 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
javascript数组的定义及操作实例
2019/11/10 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
Python模块的加载讲解
2019/01/15 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
什么是URL
2015/12/13 面试题
实习护士自我鉴定
2013/10/13 职场文书
幼儿园长自我鉴定
2013/10/17 职场文书
水务局局长岗位职责
2013/11/28 职场文书
工程质量承诺书范文
2014/03/27 职场文书
预备党员公开承诺书
2014/05/28 职场文书
2016年母亲节广告语
2016/01/28 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
Python函数对象与闭包函数
2022/04/13 Python