<!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自定义表单验证器的更多相关文章

  1. Angular5+ 自定义表单验证器

    Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个cont ...

  2. 五十四：WTForms表单验证之自定义表单验证器

    如果想要对表单中的某个字段进行自定义验证,则需要对这个字段进行单独的验证1.定义一个方法,命名规则为:validate_字段名(self, filed)2.在方法中,使用filed.data获取字段的 ...

  3. AngularJS自定义表单验证

    <!doctype html> <html ng-app="myApp"> <head> <script src="G:\\So ...

  4. layui 自定义表单验证的几个实例

    *注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...

  5. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  6. Angular自定义表单验证

    前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...

  7. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  8. angular4 自定义表单验证Validator

    表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...

  9. 在AngularJS中实现自定义表单验证

    除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...

随机推荐

  1. android-UI组件实例大全(六)------ImageView图像视图

    图像视图:ImageView 继承view类,用于在屏幕上显示任何Drawable对象,通常用来显示图片: 这里的话我们介绍一些比较常用的属性: Path 1: android:adjustViewB ...

  2. ural 1090 In the Army Now

    http://acm.timus.ru/problem.aspx?space=1&num=1090 #include <cstdio> #include <cstring&g ...

  3. 一个简单的以User权限启动外部应用程序

    BOOL ExecuteAsUser(LPCWSTR lpszUserName, LPCWSTR lpszPassword, LPCWSTR lpszApplication, LPCWSTR lpsz ...

  4. HttpClient 发送 HTTP、HTTPS 请求的简单封装

    import org.apache.commons.io.IOUtils; import org.apache.http.HttpEntity; import org.apache.http.Http ...

  5. Qt入门（5）——用Qt控件创建一个电话本界面

    具体实现步骤: 一.首先用 Qt Designer 创建一个两张图的对话框,分别保存为listdialog.ui和editdialog.ui文件 要注意其中各个空间对应的名称修改好 二.新建一个Qt应 ...

  6. Palindrome Permutation II 解答

    Question Given a string s, return all the palindromic permutations (without duplicates) of it. Retur ...

  7. C - Critical Links - uva 796（求桥）

    题意:有一些网络通过一些线路连接,求关键的连接,也就是桥,如果删除这个链接那么会产生两个子树 分析:注意一下图不是连通图即可 ************************************* ...

  8. A - Network of Schools - poj 1236(求连通分量)

    题意:学校有一些单向网络,现在需要传一些文件,1,求最少需要向几个学校分发文件才能让每个学校都收到,2,需要添加几条网络才能在任意一个学校分发都可以传遍所有学校. 分析:首先应该求出来连通分量,进行缩 ...

  9. LeetCode 6. ZigZag Conversion Question

    题意:给你一个字符串和行数numRows,要求把该字符串变成一个"之"字形状后,按行数输出该字符串. 例子:"ABCDEFGHIJKLMNO", 4. 该字符串 ...

  10. jquery 滚动条 scroll 和 animate出现的问题总结

    这两天刚刚学习了jquery就想把平时做看到的一些相关效果用新的知识写写看.知识平时看着都懂,实际操作中问题才会层出不穷. <!DOCTYPE html> <html> < ...