<html ng-app="myApp">

<head>

  <meta charset="UTF-8">

  <title>test表单验证</title>

  <script type="text/javascript" src="lib/angular/angular.js"></script>

  <script type="text/javascript">

  var app = angular.module('myApp', []);

  app.controller('testCtrl', function($scope) {

    var _test = function() {

      $scope.canSubmit = false;

      console.log('a');

    };

    var init = function() {

      $scope.model = {

        name: 'happen'

      };

      $scope.canSubmit = true;

      $scope.test = _test;

    };

    init();

  });

  app.directive('testValid', function() {

    return {

      restrict: 'A',

      require: 'ngModel',

      link: function(scope, elem, attrs, ctrl) {

        var init = function() {

          elem.on('blur', function() {

            scope.$apply(function() {

              if (elem.val() === 'happen') {

                ctrl.$setValidity('isHappen', false);

              } else {

                ctrl.$setValidity('isHappen', true);

              }

            });

          });

        };

        init();

      }

    }

  });

  </script>

</head>

<body>

  <form name="myForm">

    <div ng-controller="testCtrl">

      <input type="text" name="test" ng-model="model.name" test-valid required>

      <p ng-show="myForm.test.$error.isHappen">名字是默认值</p>

      <p ng-show="myForm.test.$error.required">名字必填项</p>

      <button ng-disabled="myForm.$invalid || !canSubmit" ng-click="test();" style="width: 200px;height: 20px;"></button>

    </div>

  </form>

</body>

</html>

简单的angular表单验证指令的更多相关文章

  1. Angular 表单验证类库 ngx-validator 1.0 正式发布

    背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库  ngx-validator  ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...

  2. 从浅入深剖析angular表单验证

    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...

  3. 如何优雅的使用 Angular 表单验证

    随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

  4. Angular表单验证

    novalidate   去掉html5自带的验证 ng-minlength    规定输入文本的最小长度 ng-maxlength    规定输入文本的最大长度 ng-submit  接收一个方法名 ...

  5. angular表单验证实例----可用的代码

    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...

  6. angular 表单验证

    最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...

  7. ngVerify - 更高效的 angular 表单验证

    ngVerify v1.5.0 a easy Angular Form Validation plugin.简洁高效的__angular表单验证插件__ See how powerful it.看看它 ...

  8. 简话Angular 05 Angular表单验证

    一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证 1. 上源码 <div ng-controller="ExampleController ...

  9. Angular 表单验证 基础篇

    <div class="nav"> <h4>表单验证</h4> <form ng-app="myApp" name=& ...

随机推荐

  1. EmitMapper的使用

    1.普通的映射. public class UserInfo { public int id { get; set; } public string name { get; set; } public ...

  2. 11-cp 命令总结

  3. RabbitMQ官方中文入门教程(PHP版) 第一部分:Hello World

    RabbitMQ是一个消息代理.它的核心原理非常简单:接收和发送消息.你可以把它想像成一个邮局:你把信件放入邮箱,邮递员就会把信件投递到你的收件人处.在这个比喻中,RabbitMQ是一个邮箱.邮局.邮 ...

  4. linux 下第一个cordova android app

    上篇博客写了linux下 cordova + ionic 环境的搭建 , 今天就来做下第一个app的简单讲解吧 首先昨天已经可以通过命令行的方式创建app了.经过今天好一段时间的研究发现使用 ioni ...

  5. “CEPH浅析”系列之六——CEPH与OPENSTACK

    在 <"Ceph浅析"系列之二--Ceph概况>中即已提到,关注Ceph的原因之一,就是OpenStack社区对于Ceph的重视.因此,本文将对Ceph在OpenSta ...

  6. colpick-jQuery颜色选择器使用说明

      一.demo及下载网址:http://www.htmleaf.com/jQuery/Color-Picker/20141108417.html   二.使用效果   三.使用方法 1.引入js和c ...

  7. flex布局知识点

    flexBox 布局最合适小规模布局,而网格布局适合较大规模布局. float,clear,vertical-align  在flex中不起作用. flex布局中,有两类作用于父节点也子节点的样式,大 ...

  8. 控件（弹出类）: ToolTip, Popup, PopupMenu

    示例1.ToolTip 的示例Controls/FlyoutControl/ToolTipDemo.xaml <Page x:Class="Windows10.Controls.Fly ...

  9. 回合对战制游戏第一篇（初识java）

    回合对战制游戏第一篇 一,所谓的java. java是一门完全面向对象的编程语言,而之前所接触到的C语言是一门面向有一个过程的语音,对于两个的区别应该有一个清楚的认识. java的第一个内容. 类和对 ...

  10. 【BZOJ-1069】最大土地面积 计算几何 + 凸包 + 旋转卡壳

    1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 2707  Solved: 1053[Submit][Sta ...