简单的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=& ...
随机推荐
- 系统升级日记（1）- 升级到SQL Server 2012
最近一段时间在公司忙于将各类系统进行升级,其最主要的目标有两个,一个是将TFS2010升级到TFS2013,另外一个是将SharePoint 2010升级到SharePoint 2013.本记录旨在记 ...
- Windows 10 自动升级画面
- 转一篇Unity客户端与Java服务器的通信
转自:http://www.programering.com/a/MTNxYDMwATQ.html A few days ago a friend asked me about Unity3D ins ...
- [Codevs 1421]秋静叶&秋穣子(最大-最小博弈）
题目:http://codevs.cn/problem/1421/ 分析:有向树上的最大-最小博弈 先手与后手的策略不同: 先手A:让对方取得尽量少的前提下,自己取得尽量大 后手B:让自己取得尽量多的 ...
- [转]oracle数据类型和对应的java类型
地址: http://otndnld.oracle.co.jp/document/products/oracle10g/102/doc_cd/java.102/B19275-03/datacc.htm ...
- Shell脚本_启动停止重启sh脚本
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- swift中的结构体和枚举
Swift 里的结构体非常特殊. 类是面向对象编程语言中传统的结构单元.和结构体相比,Swift 的类支持实现继承,(受限的)反射,析构函数和多所有者. 既然类比结构体强大这么多,为什么还要使用结构体 ...
- 系统间通信（8）——通信管理与RMI 上篇
1.概述 在概述了数据描述格式的基本知识.IO通信模型的基本知识后.我们终于可以进入这个系列博文的重点:系统间通信管理.在这个章节我将通过对RMI的详细介绍,引出一个重要的系统间通信的管理规范RPC, ...
- eclipse下查看jdk源码
打开eclipse,点 "window"-> "Preferences" -> "Java" -> "Insta ...
- 【BZOJ-2299】向量 裴蜀定理 + 最大公约数
2299: [HAOI2011]向量 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1118 Solved: 488[Submit][Status] ...