AngularJS Form 进阶：远程校验和自定义输入项

表单远程校验

HTML代码：

  1. <!doctype html>
  2. <html ng-app="form-example1">
  3.     <head>
  4.         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.         <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  6.         <script src="../angular-1.0.3/angular.js"></script>
  7.         <script src="FormValidation.js"></script>
  8.     </head>
  9.     <body>
  10.         <div>
  11.             <form name="myForm" class="css-form" novalidate>
  12.                 <div>
  13.                     整数(0-10):
  14.                     <input type="number" ng-model="size" name="size" min="0" max="10" integer/>
  15.                     {{size}}
  16.                     <br/>
  17.                     <span ng-show="myForm.size.$error.integer">不是合法的整数！</span>
  18.                     <span ng-show="myForm.size.$error.min || myForm.size.$error.max">
  19.                         数值必须位于0到10之间！
  20.                     </span>
  21.                 </div>
  22.                 <div>
  23.                     浮点数:
  24.                     <input type="text" ng-model="length" name="length" smart-float />
  25.                         {{length}}
  26.                     <br/>
  27.                     <span ng-show="myForm.length.$error.float">不是合法的浮点数！</span>
  28.                 </div>
  29.                 <div>
  30.                     远程校验:
  31.                     <input type="text" ng-model="remote" name="remote" remote-validation />
  32.                         {{remote}}
  33.                     <br/>
  34.                     <span ng-show="myForm.remote.$error.remote">非法数据！</span>
  35.                 </div>
  36.             </form>
  37.         </div>
  38.     </body>
  39. </html>

JS代码：

  1. var app = angular.module('form-example1', []);
  2. var INTEGER_REGEXP = /^\-?\d*$/;
  3. app.directive('integer', function() {
  4.     return {
  5.         require : 'ngModel',
  6.         link : function(scope, elm, attrs, ctrl) {
  7.             ctrl.$parsers.unshift(function(viewValue) {
  8.                 if (INTEGER_REGEXP.test(viewValue)) {
  9.                     ctrl.$setValidity('integer', true);
  10.                     return viewValue;
  11.                 } else {
  12.                     ctrl.$setValidity('integer', false);
  13.                     return undefined;
  14.                 }
  15.             });
  16.         }
  17.     };
  18. });
  19.  
  20. var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
  21. app.directive('smartFloat', function() {
  22.     return {
  23.         require : 'ngModel',
  24.         link : function(scope, elm, attrs, ctrl) {
  25.             ctrl.$parsers.unshift(function(viewValue) {
  26.                 if (FLOAT_REGEXP.test(viewValue)) {
  27.                     ctrl.$setValidity('float', true);
  28.                     return parseFloat(viewValue.replace(',','.'));
  29.                 } else {
  30.                     ctrl.$setValidity('float', false);
  31.                     return undefined;
  32.                 }
  33.             });
  34.         }
  35.     };
  36. });
  37.  
  38. app.directive('remoteValidation', function($http) {
  39.     return {
  40.         require : 'ngModel',
  41.         link : function(scope, elm, attrs, ctrl) {
  42.             elm.bind('keyup', function() {
  43.                 $http({method: 'GET', url: 'FormValidation.jsp'}).
  44.                 success(function(data, status, headers, config) {
  45.                     if(parseInt(data)==0){
  46.                         ctrl.$setValidity('remote',true);
  47.                     }else{
  48.                         ctrl.$setValidity('remote',false);
  49.                     }
  50.                 }).
  51.                 error(function(data, status, headers, config) {
  52.                     ctrl.$setValidity('remote', false);
  53.                 });
  54.             });
  55.         }
  56.     };
  57. });

Angular表单的本地校验和远程校验的更多相关文章

  1. ngVerify - 更高效的 angular 表单验证

    ngVerify v1.5.0 a easy Angular Form Validation plugin.简洁高效的__angular表单验证插件__ See how powerful it.看看它 ...

  2. Angular 表单(二) - 模板驱动表单

    import { Component, OnInit } from '@angular/core'; import { Hero} from '../hero'; @Component({ selec ...

  3. angular表单经验分享

    原文 https://www.jianshu.com/p/af359bd04f32 大纲 1.表单的名字不可以和传入的值的名字相同 2.在模板驱动表单的时候要使用angular表单的验证功能,需要将n ...

  4. Angular 表单验证类库 ngx-validator 1.0 正式发布

    背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库  ngx-validator  ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...

  5. Angular表单 （一）表单简介

    Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...

  6. 如何优雅的使用 Angular 表单验证

    随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

  7. angular表单的使用实例

    原文 https://www.jianshu.com/p/da1fd5396798 大纲 1.模板驱动表单的创建 2.响应式表单的创建 3.模板驱动型表单的自定义指令 4.响应式表单的自定义指令 5. ...

  8. angular表单知识点

    原文 https://www.jianshu.com/p/c772d143e1fc 大纲 1.对表单的理解 2.模板驱动表单(Template Driven Forms) 3.响应式表单(Reacti ...

  9. Angular表单验证

    novalidate   去掉html5自带的验证 ng-minlength    规定输入文本的最小长度 ng-maxlength    规定输入文本的最大长度 ng-submit  接收一个方法名 ...

随机推荐

  1. SharePoint服务器端对象模型 之 使用CAML进行数据查询（Part 4）

    (五)列表查询中的阈值限制 在之前版本的SharePoint 中,如果在查询的时候没有指定返回数目,那么SharePoint将会查找该列表中所有的条目,这可能会造成在SQL表中需要返回大量的条目,极大 ...

  2. JVM 的 Xms 和 Xmx 设置一样大小的内存容量

    4. [推荐]在线上生产环境,JVM 的 Xms 和 Xmx 设置一样大小的内存容量,避免在 GC 后调整堆 大小带来的压力. 现在,我们知道了Elasticsearch所公开的缓存和缓冲区,可以尝试 ...

  3. DevExpress控件-lookupedit的使用方法详解（图文）转http://blog.csdn.net/qq395537505/article/details/50920508

    绑定数据源: lookupedit.Properties.ValueMember = 实际要用的字段; //相当于editvalue lookupedit.Properties.DisplayMemb ...

  4. VCL控件组件大都应该重载TWinControl的虚函数WndProc来进行处理窗口消息的工作

    TWinControl的构造函数中会调用MakeObjectInstance并且传递MainWndProc作为窗口消息处理函数,而MainWndProc则会调用虚函数WndProc来处理窗口消息.留个 ...

  5. ExtJS4 给同一个formpanel不同的url

    formpanel能够这样使用,api上的样例: var panel=Ext.create('Ext.form.Panel', { title: 'Simple Form', bodyPadding: ...

  6. linux 文件和文件夹的ctime,mtime,atime的差别

    多了不再赘述,看以下解释 st_atime            Time when file data was last accessed. Changed by  the            f ...

  7. Activity重要函数

    一.onConfigurationChanged 与 android:configChanges Lists configuration changes that the activity will ...

  8. 20160422 --Switch…case 总结； 递归算法

    13 2016-04-22  11:01:00 Switch…case 总结(网摘) 例题: Console.WriteLine("1.汉堡包"); Console.WriteLi ...

  9. KVM虚拟化虚拟机支持虚拟化

    一.开启的时候需要关闭所有虚拟机: 首先检查 KVM host(宿主机/母机)上的kvm_intel模块是否打开了嵌套虚拟机功能(默认是开启的): 1.modinfo kvm_intel | grep ...

  10. 【鸟哥的Linux私房菜】笔记3

    正确地开机 最好不要使用root账号登陆!GNOME图形界面 View items as a list X WindowShell 文本交互界面bash是Shell的名称,Linux的默认壳程序就是b ...