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中,表单验证是一项关键功能,它允许开发者实时检查用户输入的数据,确保其符合预期的格式和规则,从而提高用户体验并减少服务器端的压力。AngularJS的表单验证机制是基于模型驱动的,这使得它在处理复杂...
但是通过这些片段,我们仍然可以对AngularJS表单验证指令的实现逻辑有一个大致的了解。 此外,在实际开发中,通常还需要考虑表单验证的用户体验问题,例如通过动画、颜色变化等方式来提示用户输入的正确与否,以及...
客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有...在AngularJS中,有许多表单验证指令。在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证。
2. 表单验证指令: -AngularJS提供了多个内置指令来进行表单验证,如`required`(必须填写)、`email`(邮箱格式验证)、`minlength`(最小长度)、`maxlength`(最大长度)、`pattern`(正则表达式匹配)等。 - ...
在移动应用开发中,前端表单验证是必不可少的一部分,它能确保用户输入的数据符合预期,减少服务器负担,提升用户体验。AngularJS,作为一个强大的MVC框架,提供了强大的数据绑定和指令系统,非常适合构建复杂的...
AngularJS 提供了一系列内置的表单验证指令,如`required`、`ngMinlength`、`ngMaxlength`、`ngPattern`等,它们可以直接在输入元素上使用,用于检查输入的有效性。例如: ```html ``` 上述代码要求用户名必填。 ...
提供的压缩包文件可能包含一个Eclipse工程,方便开发者在IDE中编辑和运行代码,同时也可以直接在浏览器中查看运行结果,这对于学习和调试AngularJS表单验证功能非常有用。 通过学习和实践这些知识点,你将能够熟练...
比如,可以创建一个自定义指令来封装某个特定的动画效果、UI组件、自定义表单验证等等。 创建指令的时候,还需注意以下几点: - 当使用注释形式定义指令时,需注意“directive:hello”后必须要有空格。 - 注释形式...
3. **表单验证**: - AngularJS2支持客户端验证,即在用户提交表单之前检查输入是否有效。 - 控制器级别的验证通过在FormControl对象上应用验证器实现,例如`formControlName.control.setValidators(Validators....
首先,了解AngularJS表单验证的基础是理解ngFormController和ngModelController的作用。在AngularJS中,每个表单元素都会关联到一个ngFormController实例,而每个输入元素(例如input, select, textarea等)都会关联...
在AngularJS框架中,表单验证功能不仅包含了HTML5的原生表单验证属性,而且还提供了一系列自定义的验证指令,以满足复杂的业务需求。本文将详细解析AngularJS中的表单验证知识点。 1. 表单验证的基本概念:表单验证...
开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下:<<input type=”text” required /> 2....
以上是根据给定的文件信息总结的关于AngularJS表单密码验证自定义指令实现的核心知识点。通过这些知识点的学习,开发者可以创建出更加复杂和符合业务需求的自定义指令,以提升应用的用户体验和数据的准确性。
为了更深入理解这些表单验证指令,文章给出了一个表单验证的实例。在这个实例中,我们看到了如何通过`ng-model`来绑定数据模型,并通过各种验证指令来规定输入框应遵循的规则。`ng-disabled`指令被用于判断表单的...
当涉及到使用Ionic框架和AngularJS技术栈时,模板验证成为了实现表单验证的一种便捷方式。模板验证指的是直接在HTML模板中使用AngularJS内置的属性和指令来对用户输入进行验证。 在AngularJS中,模板验证主要依赖于...