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) && 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) && 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()
相关推荐
AngularJS是前端开发流行框架,本Demo展示了表单验证的意义,及实现方法,掌握Angular基础指令,通过不同的指令元素可以拥有不同功能,并通过指令与表单合作验证,从而实现表单验证的敏捷化开发。
angularjs 表单验证指令。 应用程序包含下一个验证指令: “货币” - “12.34”格式 “时间”-“12:34”格式 “整数” - 只有数字 "password = '{{length}}'" - 数字、大小写字母、长度 基于引导程序 3. 运行 $ ...
开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下:<<input type=”text” required /> 2....
能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。...AngularJS提供了很多表单验证指令。 <form name=form novalidate> <label name=email>Your email <input type=email name=
主要介绍了angularjs 表单密码验证自定义指令实现代码,需要的朋友可以参考下
本文实例讲述了AngularJS表单验证功能。分享给大家供大家参考,具体如下: 在AngularJS的管辖下,每个表单form都会创建一个ngFormController的一个实例。在表单里面的每个input都会创建一个在这个实例下的...
下面小编就为大家带来一篇基于angularJS的表单验证指令介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证,为了往模板驱动表单中添加验证机制,你要添加一些验证属性,就像原生的 HTML 表单验证器。 Angular 会用指令来匹配这些具有验证功能的指令。每当...
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证...
常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type=text required /> 2. 最小长度 验证表单输入的文本长度是否大于某个...
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下:<input type=”text” required /> 2. 最小长度 验证表单输入的文本长度...
AngularJS 表单和控件可以验证输入的数据。 输入验证 在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识。 AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。 注意: ...
AngularJS表单验证功能实现代码: ng-model的作用: 1.ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定 2.双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改 3.数据校验 4.ng-model 指令...
基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{form.$invalid}} <span>{{form.$valid}} <span>{{form.$dirty}} <span>{{form.$pristine}} <input ...
客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有...在AngularJS中,有许多表单验证指令。在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证。
本文实例为大家分享了AngularJS实现表单验证功能的具体代码,供大家参考,具体内容如下 <!--实例解析 ng-app 指令定义了 AngularJS 应用。 ng-controller 指令定义了应用控制器。 ng-model 指令绑定了两个 input...
AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng...