码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS自定义表单验证器

时间:2015-07-05 23:47:26      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

<!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自定义表单验证器

标签:

原文地址:http://www.cnblogs.com/chengshuiqiang/p/4623208.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!