Angular表单的本地校验和远程校验
AngularJS Form 进阶：远程校验和自定义输入项
表单远程校验
HTML代码：
<!doctype html>
<html ng-app="form-example1">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="../angular-1.0.3/angular.js"></script>
<script src="FormValidation.js"></script>
</head>
<body>
<div>
<form name="myForm" class="css-form" novalidate>
<div>
整数(0-10):
<input type="number" ng-model="size" name="size" min="0" max="10" integer/>
{{size}}
<br/>
<span ng-show="myForm.size.$error.integer">不是合法的整数！</span>
<span ng-show="myForm.size.$error.min || myForm.size.$error.max">
数值必须位于0到10之间！
</span>
</div>
<div>
浮点数:
<input type="text" ng-model="length" name="length" smart-float />
{{length}}
<br/>
<span ng-show="myForm.length.$error.float">不是合法的浮点数！</span>
</div>
<div>
远程校验:
<input type="text" ng-model="remote" name="remote" remote-validation />
{{remote}}
<br/>
<span ng-show="myForm.remote.$error.remote">非法数据！</span>
</div>
</form>
</div>
</body>
</html>
JS代码：
var app = angular.module('form-example1', []);
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)) {
ctrl.$setValidity('integer', true);
return viewValue;
} else {
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;
}
});
}
};
});
app.directive('remoteValidation', function($http) {
return {
require : 'ngModel',
link : function(scope, elm, attrs, ctrl) {
elm.bind('keyup', function() {
$http({method: 'GET', url: 'FormValidation.jsp'}).
success(function(data, status, headers, config) {
if(parseInt(data)==0){
ctrl.$setValidity('remote',true);
}else{
ctrl.$setValidity('remote',false);
}
}).
error(function(data, status, headers, config) {
ctrl.$setValidity('remote', false);
});
});
}
};
});
Angular表单的本地校验和远程校验的更多相关文章
- ngVerify - 更高效的 angular 表单验证
ngVerify v1.5.0 a easy Angular Form Validation plugin.简洁高效的__angular表单验证插件__ See how powerful it.看看它 ...
- Angular 表单(二) - 模板驱动表单
import { Component, OnInit } from '@angular/core'; import { Hero} from '../hero'; @Component({ selec ...
- angular表单经验分享
原文 https://www.jianshu.com/p/af359bd04f32 大纲 1.表单的名字不可以和传入的值的名字相同 2.在模板驱动表单的时候要使用angular表单的验证功能,需要将n ...
- Angular 表单验证类库 ngx-validator 1.0 正式发布
背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库 ngx-validator ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...
- Angular表单 （一）表单简介
Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...
- 如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- angular表单的使用实例
原文 https://www.jianshu.com/p/da1fd5396798 大纲 1.模板驱动表单的创建 2.响应式表单的创建 3.模板驱动型表单的自定义指令 4.响应式表单的自定义指令 5. ...
- angular表单知识点
原文 https://www.jianshu.com/p/c772d143e1fc 大纲 1.对表单的理解 2.模板驱动表单(Template Driven Forms) 3.响应式表单(Reacti ...
- Angular表单验证
novalidate 去掉html5自带的验证 ng-minlength 规定输入文本的最小长度 ng-maxlength 规定输入文本的最大长度 ng-submit 接收一个方法名 ...
随机推荐
- php自定义函数: 文件大小转换成智能形式
function format_byte($filesize) { if($filesize >= 1073741824) { $filesize = round($filesize / 107 ...
- Python3.6全栈开发实例[011]
11.元素分类有如下值li= [11,22,33,44,55,66,77,88,99,90],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {'k ...
- Python3.6全栈开发实例[009]
9.字典dic,dic = {'k1': "v1", "k2": "v2", "k3": [11,22,33]}a.请循 ...
- A SELECT statement that assigns a value to a variable must ... (向变量赋值的 SELECT 语句不能与数据检索操作结合使用 )
A SELECT statement that assigns a value to a variable must ... (向变量赋值的 SELECT 语句不能与数据检索操作结合使用 ) 总结一句 ...
- python调用html内的js方法
这方面资料不多,不懂html,不懂js,略懂python的我,稍微看了点html和js,好几天的摸索,终于测试成功了. PYQT+HTML利用PYQT的webview调用JS内方法 1.python调 ...
- 2015.7.16（小高开忍住没有减仓，大盘涨3.5%，百股涨停——买进中重、中航，指导WXL错误）
1.大智慧轻微高开,按照昨天总结的震荡行情指导操作(pic1) a.震荡行情,开盘5分钟的走势不能指导操作, b.操作一定要等到2峰2谷出现后再做!开盘价不能作为峰.谷! c.只有当通道出现2.0%以 ...
- LeetCode：二叉树的锯齿形层次遍历【103】
LeetCode:二叉树的锯齿形层次遍历[103] 题目描述 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如:给定二叉树 ...
- LeetCode：至少是其他数字两倍的最大数【747】
LeetCode:至少是其他数字两倍的最大数[747] 题目描述 在一个给定的数组nums中,总是存在一个最大元素 . 查找数组中的最大元素是否至少是数组中每个其他数字的两倍. 如果是,则返回最大元素 ...
- jQuery:自学笔记(1)——基础入门
jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...
- Openstak（M版）计算节点安装
#############修改hosts文件 10.0.0.11 controller10.0.0.31 compute110.0.0.32 compute210.0.0.41 block110.0. ...