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表单的本地校验和远程校验的更多相关文章

  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. maven仓库添加本地jar

    一.将jar添加到本地仓库的做法: 以下面pom.xml依赖的jar包为例: 实际项目中pom.xml依赖写法: <dependency> <groupId>org.sprin ...

  2. django database relations

    注意Django的生成的默认api from django.db import models class Place(models.Model): ''' pass class Restaurant( ...

  3. 防sql注入之参数绑定 SQL Injection Attacks and Defense

    http://php.net/manual/zh/pdo.prepared-statements.php 预处理语句与存储过程 很多更成熟的数据库都支持预处理语句的概念.什么是预处理语句?可以把它看作 ...

  4. 实用的 集合工具类 和 String工具类

    集合工具类:CollectionUtil method: 1.isNotEmpty() 不为空 2.isEmpty() 为空 举例:map集合         Map<String,String ...

  5. setlocale(LC_ALL, ""); 取值为空字符串" "（注意，不是NULL），则locale与本地环境所使用的编码方式相同（在本地化时，应该很有用）；

    在C运行库提供的多字节字符-宽字符转换函数:mbstowcs()/wcstombs()中,需要用到全局变量locale( locale encoding ),以指定多字节字符的编码类型 1. 功能: ...

  6. MySQL复制(二):二进制日志、二进制日志的结构和内容

    通常只有即将执行完毕的语句才会写入到二进制日志中.但是一些特殊情况:语句附加的信息或直接代替语句被写入. 二进制日志记录的内容 作用:记录数据库中表的更变,用于复制和PITP(即时恢复) 基于语句SB ...

  7. Django中_Meta 部分用法

    周一了,就不长篇大论了,给大家分享一个很实用的知识点,希望大家周末过得开心,愉快,诗和远方在等着你们.而我还在苦逼的撸代码,只为了应付眼前的苟且! model.UserInfo._meta.app_l ...

  8. Mac 安装Minikube

    环境信息: guoguo-MacBook-Pro-3:~ guoguo$ docker versionClient: Version:    17.12.0-ce API version:    1. ...

  9. sharepoint 2010自定义访问日志列表设置移动终端否和客户端访问系统等计算列的公式

    上个月本人开发和上线了一个在SharePoint 2010上基于HTML5的移动OA网站,后端服务采用自定义的基于AgilePoint工作流引擎的Sharepoint Web服务,前端主要采用Jque ...

  10. iOS Xcode 8 打包上架 配置文件问题 此构建版本无效 推送问题 攻克 刚刚 waiting for review

    煎熬...  本来xcode 7 打包正在审核了 还要修改一处购买问题  此时 xcode已经升级到xcode 8 了 升级后 很神奇 应用没报错 很好的运行 (网上很多说xib storyboard ...