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 相关文章推荐
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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编实现程动态图像的创建代码
2008/09/28 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
Python中文编码那些事
2014/06/25 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Django如何配置mysql数据库
2018/05/04 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python3 kubernetes api的使用示例
2021/01/12 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
区域总监的岗位职责
2013/11/21 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
班组安全员工作职责
2014/02/01 职场文书
产假请假条
2014/04/10 职场文书
行风评议整改报告
2014/11/06 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
中秋节晚会开场白
2015/05/29 职场文书
张思德观后感
2015/06/09 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
JavaScript ES6的函数拓展
2022/01/18 Javascript
JS实现数组去重的11种方法总结
2022/04/04 Javascript