编程 Javascript

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实现的获取焦点及失去焦点时的表单验证功能示例

- Author -

itsonglin

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery Tips(4) 一些关于提高JQuery性能的Tips

Dec 19 Javascript

js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

Feb 11 Javascript

javascript实现unicode与ASCII相互转换的方法

Dec 10 Javascript

javascript作用域、作用域链(菜鸟必看)

Jun 16 Javascript

JS常用字符串方法(推荐)

Jan 15 Javascript

jquery自定义表单验证插件

Oct 12 Javascript

jquery实现拖动效果（代码分享）

Jan 25 Javascript

JavaScript中最常见的三个面试题解析

Mar 04 Javascript

JavaScript函数中的this四种绑定形式

Aug 15 Javascript

JavaScript中 ES6变量的结构赋值

Jul 10 Javascript

VUE-Table上绑定Input通过render实现双向绑定数据的示例

Aug 27 Javascript

js面向对象封装级联下拉菜单列表的实现步骤

Feb 08 Javascript

浅析为什么a="abc" 不等于 a=new String("abc")

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