angularjs自定义表单验证ｅｍａｉｌ

最新推荐文章于 2021-04-21 09:01:18 发布

原创最新推荐文章于 2021-04-21 09:01:18 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #form #email

Angularjs 专栏收录该内容

55 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的表单验证示例，详细展示了如何创建自定义的电子邮件格式验证指令，并结合实例说明了如何在表单提交时进行有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
       <script src="bootstrap.min.js"></script>
       <script type="text/javascript">
           var myapp = angular.module("myapp", []);
            myapp.controller("MyController", ['$scope', function($scope) {
                $scope.email = '';
                $scope.submitted = false;
                $scope.submit = function() {
                   $scope.submitted = true;
                   if ($scope.myForm.$invalid) {
                       return;
                   } else {
                       alert("submit..");
                   }
                };
           }]);
           myapp.directive("emailFormat", function() {
                return {
                   restrict : 'A',
                   require : 'ngModel',
                   scope : {},
                   link : function(scope, elem, attrs, ctrl) {
                       var emailRegexp = /^([a-z0-9]*[-_.]?[a-z0-9]+)+@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;

                       //Model变化时执行
                       //初始化指令时BU执行
                       ctrl.$parsers.unshift(function(viewValue) {//push 改变调用顺序
                           //验证通过,myForm.email.$error.emailformat置为false
                           ctrl.$setValidity('emailformat', true);

                           if (viewValue && !emailRegexp.test(viewValue)) {
                               //验证BU通过,myForm.email.$error.emailformat置为true
                               ctrl.$setValidity('emailformat', false);
                           }

                           // $parsers数组中的函数会以流水线的形式被逐个调用。第一个$parse被调用后,执行结果会传递给第二个$parse,以此类推。
                           return viewValue;
                       });

                       //Model变化时执行
                       //初始化指令时执行
                       ctrl.$render = function() {

                       };
                   }
                }
           });
       </script>
       <style type="text/css">
       .invalid {
           color: red;
           font-size: 14px;
       }
       </style>>
    </head>
    <body ng-app="myapp">
        <div class="container" ng-controller="MyController">
            <form name="myForm" class="form-horizontal" ng-submit="submit()" novalidate>
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                       <input type="text" id="inputEmail" name="email" ng-model="email" email-format placeholder="Email" required>
                    </div>
                    <div class="invalid" ng-show="myForm.email.$invalid&&(myForm.email.$dirty||myForm.email.$touched) || submitted">
                       <div ng-show="myForm.email.$error.emailformat">
                           The format of email is incorrect!
                       </div>
                       <div ng-show="myForm.email.$error.required">
                           The format of email is required!
                       </div>
                    </div>
                </div>
                <br/>
                <div class="control-group">
                    <div class="controls">
                       <button type="submit" class="btn">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>