简单的angular表单验证指令
<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表单验证指令的更多相关文章
- Angular 表单验证类库 ngx-validator 1.0 正式发布
背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库 ngx-validator ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...
- 从浅入深剖析angular表单验证
最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...
- 如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- Angular表单验证
novalidate 去掉html5自带的验证 ng-minlength 规定输入文本的最小长度 ng-maxlength 规定输入文本的最大长度 ng-submit 接收一个方法名 ...
- angular表单验证实例----可用的代码
前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
- angular 表单验证
最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...
- ngVerify - 更高效的 angular 表单验证
ngVerify v1.5.0 a easy Angular Form Validation plugin.简洁高效的__angular表单验证插件__ See how powerful it.看看它 ...
- 简话Angular 05 Angular表单验证
一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证 1. 上源码 <div ng-controller="ExampleController ...
- Angular 表单验证 基础篇
<div class="nav"> <h4>表单验证</h4> <form ng-app="myApp" name=& ...
随机推荐
- 2014 todo list
1. 做好已知的各种项目,争取能成立固定团队2. 横向扩展技术学习,了解各种技术,加强技术素养3. 争取找个妹子4. 加强音律学习5. 继续发展各业余爱好6. 努力摇号 年底看收成.
- js如何判断一个数组
typeof [] 为一个"object" 不能通过此方法判断一个数组 方法 1.instanceof方法,这个方法用的比较多. 2.这个是es5以后推荐的方法,Object.pr ...
- 如何采集QQ群中所有成员QQ号码
安装Google Chrome浏览器 安装Google插件:Regex Scraper 在群成员页面点击Regex 插件, 粘贴上这个代码 text_overflow">([\S\s] ...
- Matlab中函数定义方法
Matlab自定义函数的六种方法 n1.函数文件+调用函数(命令)文件:需单独定义一个自定义函数的M文件: n2.函数文件+子函数:定义一个具有多个自定义函数的M文件: n3.Inline:无需M文件 ...
- 《TCP/IP详解卷1：协议》第1章 概述-读书笔记
章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...
- C# 反射范范的理解下
程序进行时引入程序集.动态的调用方法属性事件. Assembly类. type类.
- 毕向东JAVA基础25天教程目录
视频目录:day01-01-基本常识day01-02-Java的跨平台性day01-03-Java环境搭建(安装)day01-04-Java环境搭建(环境变量配置)day01-05-Java环境搭建( ...
- Jenkins_多项目构建(一)：单独建立一个项目按顺序执行其它job
有A,B,C三个Job,A为服务或web Job,B,C为A依赖的其它Job 单独建个Job,按B,C,A的顺序进行编译 1.安装插件:Multijob plugin 2.新建A,B,C三个J ...
- Elasticsearch静态集群配置
这两天需要将ELK中的单节点运行的ES扩展为双节点,查询了下集群配置,百度搜索结果还是一如既往的坑,基本都是各种转帖,以下记录配置静态集群的步骤: * * * <pre><code& ...
- 利用MVC的自定义过滤器FilterAttribute、IActionFilter、IExceptionFilter实现异常处理等功能
今天在博客园上看了一篇推荐文章,还说得蛮有道理: http://www.cnblogs.com/richieyang/p/4779028.html 项目中确实有各种后台验证过程,最常见的莫过于判空,而 ...