`
hudeyong926
  • 浏览: 2033157 次
  • 来自: 武汉
社区版块
存档分类
最新评论

angularJs 表单验证指令

 
阅读更多

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()

 
 
 
  • 大小: 23.9 KB
分享到:
评论

相关推荐

    angularjs表单验证Demo

    AngularJS是前端开发流行框架,本Demo展示了表单验证的意义,及实现方法,掌握Angular基础指令,通过不同的指令元素可以拥有不同功能,并通过指令与表单合作验证,从而实现表单验证的敏捷化开发。

    pdx-validation:angularjs 表单验证指令

    angularjs 表单验证指令。 应用程序包含下一个验证指令: “货币” - “12.34”格式 “时间”-“12:34”格式 “整数” - 只有数字 "password = '{{length}}'" - 数字、大小写字母、长度 基于引导程序 3. 运行 $ ...

    AngularJS表单验证

    在AngularJS中,表单验证是一项关键功能,它允许开发者实时检查用户输入的数据,确保其符合预期的格式和规则,从而提高用户体验并减少服务器端的压力。AngularJS的表单验证机制是基于模型驱动的,这使得它在处理复杂...

    基于angularJS的表单验证指令介绍

    但是通过这些片段,我们仍然可以对AngularJS表单验证指令的实现逻辑有一个大致的了解。 此外,在实际开发中,通常还需要考虑表单验证的用户体验问题,例如通过动画、颜色变化等方式来提示用户输入的正确与否,以及...

    AngularJS实现表单验证

    客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有...在AngularJS中,有许多表单验证指令。在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证。

    AngularJS表单和输入验证实例

    2. 表单验证指令: -AngularJS提供了多个内置指令来进行表单验证,如`required`(必须填写)、`email`(邮箱格式验证)、`minlength`(最小长度)、`maxlength`(最大长度)、`pattern`(正则表达式匹配)等。 - ...

    基于angularJS移动端表单验证效果

    在移动应用开发中,前端表单验证是必不可少的一部分,它能确保用户输入的数据符合预期,减少服务器负担,提升用户体验。AngularJS,作为一个强大的MVC框架,提供了强大的数据绑定和指令系统,非常适合构建复杂的...

    AngularJs demo 例子(表单验证) form

    AngularJS 提供了一系列内置的表单验证指令,如`required`、`ngMinlength`、`ngMaxlength`、`ngPattern`等,它们可以直接在输入元素上使用,用于检查输入的有效性。例如: ```html ``` 上述代码要求用户名必填。 ...

    AngularJS 学习笔记(表单验证篇)

    提供的压缩包文件可能包含一个Eclipse工程,方便开发者在IDE中编辑和运行代码,同时也可以直接在浏览器中查看运行结果,这对于学习和调试AngularJS表单验证功能非常有用。 通过学习和实践这些知识点,你将能够熟练...

    AngularJS中的指令全面解析(必看)

    比如,可以创建一个自定义指令来封装某个特定的动画效果、UI组件、自定义表单验证等等。 创建指令的时候,还需注意以下几点: - 当使用注释形式定义指令时,需注意“directive:hello”后必须要有空格。 - 注释形式...

    Angularjs2表单+验证

    3. **表单验证**: - AngularJS2支持客户端验证,即在用户提交表单之前检查输入是否有效。 - 控制器级别的验证通过在FormControl对象上应用验证器实现,例如`formControlName.control.setValidators(Validators....

    AngularJS表单验证功能分析

    首先,了解AngularJS表单验证的基础是理解ngFormController和ngModelController的作用。在AngularJS中,每个表单元素都会关联到一个ngFormController实例,而每个输入元素(例如input, select, textarea等)都会关联...

    AngularJS表单验证功能

    在AngularJS框架中,表单验证功能不仅包含了HTML5的原生表单验证属性,而且还提供了一系列自定义的验证指令,以满足复杂的业务需求。本文将详细解析AngularJS中的表单验证知识点。 1. 表单验证的基本概念:表单验证...

    详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下:&lt;&lt;input type=”text” required /&gt;  2....

    angularjs 表单密码验证自定义指令实现代码

    以上是根据给定的文件信息总结的关于AngularJS表单密码验证自定义指令实现的核心知识点。通过这些知识点的学习,开发者可以创建出更加复杂和符合业务需求的自定义指令,以提升应用的用户体验和数据的准确性。

    AngularJS表单验证中级篇(3)

    为了更深入理解这些表单验证指令,文章给出了一个表单验证的实例。在这个实例中,我们看到了如何通过`ng-model`来绑定数据模型,并通过各种验证指令来规定输入框应遵循的规则。`ng-disabled`指令被用于判断表单的...

    ionic使用angularjs表单验证(模板验证)

    当涉及到使用Ionic框架和AngularJS技术栈时,模板验证成为了实现表单验证的一种便捷方式。模板验证指的是直接在HTML模板中使用AngularJS内置的属性和指令来对用户输入进行验证。 在AngularJS中,模板验证主要依赖于...

Global site tag (gtag.js) - Google Analytics