angularJs 表单验证指令

最新推荐文章于 2025-08-17 13:02:36 发布

@航空母舰

最新推荐文章于 2025-08-17 13:02:36 发布

阅读量104

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：前端 ViewUI

本文链接：https://blog.youkuaiyun.com/hudeyong926/article/details/99540591

javascript 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了如何使用AngularJS创建自定义验证指令，包括指令的实现逻辑和在表单中的应用，确保用户输入符合预设规则。

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

angularJs 前端验证指令

var rcSubmitDirective = {
  'rcSubmit': function ($parse) {
    return {
      restrict: "A",
      require: [ "rcSubmit", "?form" ],
      controller: function() {
        this.attempted = false;
        var formController = null;
        this.setAttempted = function() {
          this.attempted = true;
        };
        this.setFormController = function(controller) {
          formController = controller;
        };
        this.needsAttention = function(fieldModelController) {
          if (!formController) return false;
          if (fieldModelController) {
            return fieldModelController.$invalid && (fieldModelController.$dirty || this.attempted);
          } else {
            return formController && formController.$invalid && (formController.$dirty || this.attempted);
          }
        };
      },
      compile: function() {
        return {
          pre: function(scope, formElement, attributes, controllers) {
            var submitController = controllers[0];
            var formController = controllers.length > 1 ? controllers[1] : null;
            submitController.setFormController(formController);
            scope.rc = scope.rc || {};
            scope.rc[attributes.name] = submitController;
          },
          post: function(scope, formElement, attributes, controllers) {
            var submitController = controllers[0];
            var formController = controllers.length > 1 ? controllers[1] : null;
            var fn = $parse(attributes.rcSubmit);
            formElement.bind("submit", function(event) {
              submitController.setAttempted();
              if (!scope.$$phase) scope.$apply();
              if (!formController.$valid) return;
              scope.$apply(function() {
                fn(scope, {
                  $event: event
                });
              });
            });
          }
        };
      }
    };
  }
};

验证通过

<form name="loginForm" novalidate
      ng-app="LoginApp" ng-controller="LoginController" rc-submit="login()">
    <div class="form-group"
         ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.username)}">
        <input class="form-control" name="username" type="text"
               placeholder="Username" required ng-model="session.username" />
       <span class="help-block"
             ng-show="rc.form.needsAttention(loginForm.username) &amp;&amp; loginForm.username.$error.required">Required</span>
    </div>
    <div class="form-group"
         ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.password)}">
        <input class="form-control" name="password" type="password"
               placeholder="Password" required ng-model="session.password" />
       <span class="help-block"
             ng-show="rc.form.needsAttention(loginForm.password) &amp;&amp; loginForm.password.$error.required">Required</span>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary pull-right"
                value="Login" title="Login">
            <span>Login</span>
        </button>
    </div>
</form>

样式如下

前端验证通过会调用login()