AngularJS自定义表单验证器
<!doctype html>
<html ng-app="myApp">
<head>
<script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
var INTEGER_REGEXP = /^\-?\d*$/;
app.directive('integer', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (INTEGER_REGEXP.test(viewValue)) {
// it is valid
ctrl.$setValidity('integer', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('integer', false);
return undefined;
}
});
}
};
});
var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (FLOAT_REGEXP.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', '.'));
} else {
ctrl.$setValidity('float', false);
return undefined;
}
});
}
};
});
</script>
</head>
<body>
<div>
<form name="form" class="css-form" novalidate>
<div>
Size (integer 0 - 10):
<input type="number" ng-model="size" name="size"
min="0" max="10" integer />
<span ng-show="form.size.$error.integer">This is not valid integer!</span>
<span ng-show="form.size.$error.min || form.size.$error.max">
The value must be in range 0 to 10!
</span>
</div>
<div>
Length (float):
<input type="text" ng-model="length" name="length" smart-float />
<span ng-show="form.length.$error.float">
This is not a valid float number!
</span>
</div>
</form>
</div>
</body>
</html>
AngularJS自定义表单验证器的更多相关文章
- Angular5+ 自定义表单验证器
Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个cont ...
- 五十四：WTForms表单验证之自定义表单验证器
如果想要对表单中的某个字段进行自定义验证,则需要对这个字段进行单独的验证1.定义一个方法,命名规则为:validate_字段名(self, filed)2.在方法中,使用filed.data获取字段的 ...
- AngularJS自定义表单验证
<!doctype html> <html ng-app="myApp"> <head> <script src="G:\\So ...
- layui 自定义表单验证的几个实例
*注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- Angular自定义表单验证
前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- angular4 自定义表单验证Validator
表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...
- 在AngularJS中实现自定义表单验证
除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...
随机推荐
- 四句话表明JSON格式定义
(1):并列的数据之间使用逗号(",")分割: (2):键值对的映射用冒号(":")表示: (3):并列数据的集合(数组)用方括号("[]" ...
- Cracking the coding interview--Q2.1
原文: Write code to remove duplicates from an unsorted linked list.FOLLOW UPHow would you solve this p ...
- Linux下快速静态编译Qt以及Qt动态/静态版本共存
Qt下静态编译Qt,根据我的经验,如果按照Windows下那种直接拿官方sdk安装之后的文件来编译是行不通的,需要直接下载Qt的source包,目前诺基亚的源码叫做qt-everywhere-open ...
- Leetcode：Largest Number详细题解
题目 Given a list of non negative integers, arrange them such that they form the largest number. For e ...
- hdu-1598
思路: 首先如果想到了Kruskal算法,那么下一步我们可能马上会想:那我们就从头开始写这个算法吧.然后一写就很容易发现一个问题——如果按照正常的Kruskal算法来做,那么start到end的舒适度 ...
- 在Build时使用NuGet自动下载缺失的包
现在使用.net编程,不可避免的总会使用到NuGet去下载引用第三方的dll,而且vs2012也直接默认就会安装上NuGet了.NuGet的确也给我们带来了一些方便,但是也带来了一些问题,比如:一般程 ...
- HDU 1501 & POJ 2192 Zipper(dp记忆化搜索)
题意:给定三个串,问c串是否能由a,b串任意组合在一起组成,但注意a,b串任意组合需要保证a,b原串的顺序 例如ab,cd可组成acbd,但不能组成adcb. 分析:对字符串上的dp还是不敏感啊,虽然 ...
- exit和abort都是用来终止程序的函数
exit会做一些释放工作:释放所有的静态的全局的对象,缓存,关掉所有的I/O通道,然后终止程序.如果有函数通过atexit来注册,还会调用注册的函数.不过,如果atexit函数扔出异常的话,就会直接调 ...
- Log4Qt 使用（一）
一.下载 http://sourceforge.net/projects/log4qt/develop 二.Log4Qt介绍 Log4Qt 是Apache Log4J 的Qt移植版,所以看Log4J的 ...
- Vi操作技巧
Vi操作技巧: :nu 显示当前所在行的行号 :set nu 显示全部行号 :set nonu 取消显示行号 /字符串 查询字符串,按n查询下一个,按N查询上一个 持续 ...