<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. 20160205 - Windows 10 家庭版没有组策略

    问题描述:买笔电自带的正版系统,有一个需要使用gpedit.msc,发现并不存在. 解决办法:升级到 Windows 10 专业版

  2. tr命令

    tr命令是linux下一个字符处理命令,用途:    字符替换    字符删除    字符压缩形式:tr [OPTION]... SET1 [SET2]接口:输入输出都是标准流,所以要通过管道来调用这 ...

  3. Go--避免SQL注入

    避免SQL注入 什么是SQL注入 SQL注入攻击(SQL Injection),简称注入攻击,是Web开发中最常见的一种安全漏洞.可以用它来从数据库获取敏感信息,或者利用数据库的特性执行添加用户,导出 ...

  4. 【原创·总结】影响sql查询性能的因素

     1.表定义 (1)如果字符串字段是经常需要用到的,可以冗余,否则不要冗余 (2)经常需要作为where的查询条件的字段,可以建索引:但是过多的索引会影响写入时的性能 (3)合理定义字段的数据类型 ( ...

  5. Linux基础知识集锦

    查看当前进程ID与当前进程的父进程ID $$ echo $PPID shell脚本之for循环 for ((i=0;i<10;++i)) do echo "hello",$i ...

  6. C#反射设置属性值和获取属性值

    /// /// 获取类中的属性值 /// /// /// /// public string GetModelValue(string FieldName, object obj) { try { T ...

  7. android图片的异步加载和双缓存学习笔记——DisplayImageOptions （转）

    转的地址:http://hunankeda110.iteye.com/blog/1897961 1 //设置图片在下载期间显示的图片 2 showStubImage(R.drawable.ic_lau ...

  8. Jenkins_多项目构建(二)：使用Maven聚集关系

        一.假设有四个Maven项目 1.soa-dub-parent:父项目 1 2 3 4 5 <modules>         <module>../soa-dub-f ...

  9. 【BZOJ 4547】【HDU 5157】小奇的集合

    http://www.lydsy.com/JudgeOnline/problem.php?id=4547 本蒟蒻并不会矩乘求Fibonacci数列前缀和,所以果断分块打表,常数竟然比矩乘要小! PS: ...

  10. mysql5.5的安装与配置（亲测版）

    mysql5.5.x的编译安装 说明:5.5和5.1差不多,只是在编译时增加了一个cmake,其他基本一样,mysql5.5默认编码是utf-8,在使用mysql5.5配置lnmp或者lamp后安装d ...