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>

  

时间: 2025-01-12 00:29:02

AngularJS自定义表单验证器的相关文章

Angular5+ 自定义表单验证器

Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个controller值相等)(equalTo) 怎样反向监听(先输入"再次输入密码",后输入设置密码) 解决思路: 第一个问题,可以通过[AbstractControl].root.get([targetName])来取得指定的controller,然后比较他们的值. 第二个,可以通过[targe

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>

基于angularJS的表单验证练习

今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa"> <form novalidate name="loginForm"> <div> <label>用户名</label> <input type="text" name="nText"

JavaScript 之表单验证(表单验证器的封装)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>        

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

jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 http://www.51xuediannao.com/js/jquery/jquery_validate/ ======================================================== //扩展验证规则 //邮箱 表单验证规则jQuery.validator.

自定义表单验证

1.引入必要的文件 <link href="~/Content/easyui/themes/default/easyui.css" rel="stylesheet" /><link href="~/Content/easyui/themes/icon.css" rel="stylesheet" /> <script src="~/Content/easyui/js/jquery.min.

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

除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属性可以在其所属的$scope对象中访问到,而我们又可以访问$scope对象,因此JavaScript可以间接地访问DOM中的表单属性.借助这些属性,我们可以对表单做出实时响应.可以使用下面这样的格式来访问这些属性: formName.inputFileldName.property 未修改的表单 f

angularjs的表单验证问题

angularjs表单验证问题 1 可以使用angularjs自带验证,(必填项.email.url)使用方法: 通过myForm.personEmail.$valid是否为true 即可判断是否通过验证.具体是哪类错误可以通过demo: <input type="text" required />  必填 <input type="text" ng-minlength="5" /> 最小长度 <input type

angularJS 过滤器 表单验证

过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)Date(3)Filter子串匹配用来处理一个数组,可以过滤出含有某个子串的元素,作为一个字数组来返回.通常用来过滤需要展示的元素.可以是字符串数字,对象或是一个用来从数组中选择元素的函数.字符串:返回所有包含这个字符串的元素对象:将待过滤对象的属性同这个对象中的同名属性进行对比,如果属性值是字符串就