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 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
javascript FormatNumber函数实现方法
Dec 30 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 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
APMServ使用说明
2006/10/23 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
js活用事件触发对象动作
2008/08/10 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
学习python 之编写简单乘法运算题
2016/02/27 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python Series从0开始索引的方法
2018/11/06 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python区分不同数据类型的方法
2019/10/14 Python
python几种常用功能实现代码实例
2019/12/25 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
行政管理专业推荐信
2013/11/02 职场文书
绩效工资实施方案
2014/03/15 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
Python字符串的转义字符
2022/04/07 Python