`
iceprso
  • 浏览: 685 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

AngularJS自定义URL验证指令

    博客分类:
  • js
阅读更多
define(["../app"], function (app) {
    'use strict';
	app.directive('sshUrl', function($rootScope){
        "use strict";
        return {
            require: "ngModel",
            link: function (scope, element, attr, ngModel) {
                if (ngModel) {
                    var strRegex = /^((https|HTTPS|http|HTTP|ftp|FTP|rtsp|RTSP|mms|MMS)?:\/\/)?(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]$)|([0-9a-zA-Z_!~*'()-]+\.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z]\.[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/;
                }

                var customerUrlCheck = function (value) {
                    var validity = ngModel.$isEmpty(value) || strRegex.test(value);
                    ngModel.$setValidity("sshUrl", validity);
                    return validity ? value : undefined;
                };
                ngModel.$formatters.push(customerUrlCheck);
                ngModel.$parsers.push(customerUrlCheck);
            }
        };
    });
});

<form ng-submit="" id="adTrackForm" name="adTrackForm" novalidate>
        <div class="adtrack_add">
            <ul>
                <li><span>以下信息必须填写:</span></li>
                <li>
                    <span>目标URL<p>(在其媒体投放广告时所指向的URL)</p></span>
                    <div class="adtrack_add_input">*
                        <input ssh-url id="targetUrl" name="targetUrl" ng-model="urlconfig.targetUrl" placeholder="www.mydomain/product.html" required/>
                    </div>&nbsp;&nbsp;&nbsp;
                    <span style="color:red" ng-show="adTrackForm.targetUrl.$dirty && adTrackForm.targetUrl.$invalid">
                        <span ng-show="adTrackForm.targetUrl.$error.required">请输入目标URL</span>
                        <span ng-show="adTrackForm.targetUrl.$error.sshUrl">您设置的目标URL格式错误</span>
                    </span>
                </li>
			</ul>
		</div>
		<input class="btn btn-info timechange_button" ng-disabled="adTrackForm.targetUrl.$dirty && adTrackForm.targetUrl.$invalid" type="submit" value="提交"/>
</form>
分享到:
评论

相关推荐

    angularjs自定义正则表达校验指令directive

    总之,AngularJS自定义指令为我们提供了强大的能力,用于创建复杂的表单校验逻辑。通过结合正则表达式,我们可以轻松地实现http链接、纯数字等格式的验证,提升应用的用户体验。在实际项目中,可以根据需求不断扩展...

    angularjs自定义指令directive正则表达校验

    总结,AngularJS自定义指令为我们提供了一种灵活的方式,通过结合正则表达式,可以在前端实现高效的数据校验,提高用户体验并减少服务器端的负担。通过以上示例,你可以了解到如何创建和使用自定义指令进行HTTP地址...

    AngularJS自定义表单验证功能实例详解

    本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证...

    mastering-angularjs-directives:有关AngularJS自定义指令的示例

    本项目“mastering-angularjs-directives”显然是一个专注于讲解和展示AngularJS自定义指令实践的资源库。下面将详细探讨AngularJS自定义指令的相关知识点。 1. **自定义指令的基本概念** AngularJS的自定义指令是...

    AngularJS实现表单验证

    总结起来,AngularJS的表单验证通过结合HTML5的特性、自定义指令和模型绑定,提供了强大的验证功能。`ngMessages`模块进一步提升了用户体验,使错误消息显示更加直观和整洁。通过熟练掌握这些概念和实践,开发者可以...

    AngularJS表单验证功能

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

    2018 AngularJS 菜鸟 离线教程 导航直接跳转

    9. **表单处理**:AngularJS提供了内置的表单验证和管理机制,如`ng-model`、`ng-required`等,使表单验证变得简单。 10. **指令的生命周期**:理解指令的创建、编译、链接等阶段对于开发复杂的自定义指令至关重要...

    AngularJS 中文API参考手册

    6. 指令(Directives):指令是AngularJS的自定义HTML标签或属性,用于扩展HTML的功能,例如ng-repeat用于循环渲染数据。 二、AngularJS API详解 1. $scope:每个控制器都有一个关联的$scope对象,它是模型和视图...

    AngularJS学习 chm 文件

    8. **表单验证**:AngularJS 提供了内置的表单验证机制,可以轻松实现客户端验证,提高用户体验。 通过"AngularJS学习笔记.chm"文件,你可以系统地学习AngularJS的基本概念、核心特性和实践技巧。文件中的章节可能...

    angularJs权威和精通angularjs

    通过自定义指令,开发者可以创建高度可复用的UI组件。 **5. Expressions和Filters:** AngularJS表达式允许在HTML中嵌入JavaScript代码,用于动态渲染数据。而过滤器则可以对数据进行格式化,如日期格式化、数组...

    精通AngularJS part1

    编写自定义验证指令的单元测试233 实现自定义验证指令235 88创建一个异步模型验证器235 模拟用户服务236 为异步验证编写测试代码237 实现异步验证指令238 89包装jQueryUIdatepicker指令239 为包装组件指令...

    Learning AngularJS.pdf (0分下载网)

    - **指令系统**:AngularJS允许开发者定义自定义指令,这些指令可以用来扩展HTML的功能,使其更适合表达应用程序的逻辑。 - **服务**:AngularJS提供了一系列内置的服务,如$http用于发送HTTP请求,$resource用于...

    angularJS技术

    AngularJS的指令系统扩展了HTML,使得可以定义自定义的DOM元素和属性,用于封装复杂的交互逻辑。常见的内置指令如`ng-repeat`用于数据循环,`ng-if`用于条件渲染,`ng-click`处理用户点击事件等。开发者可以通过...

    AngularJs简介及例子

    7. 表单验证:AngularJS提供了内置的表单验证机制,通过`ng-minlength`、`ng-maxlength`等指令可以轻松实现客户端验证。 8. 测试支持:AngularJS有良好的测试工具集,如 Karma 和 Jasmine,支持单元测试和端到端...

    AngularJS开发指南.pdf

    4. 指令(Directives):AngularJS允许开发者自定义HTML标签或属性,并给予它们新的功能,这是实现动态视图的关键特性之一。 5. 过滤器(Filters):过滤器用于对数据进行格式化,以便在视图中显示。 6. 表单控件...

    angularJS中文API帮助文档

    9. **表单验证**:AngularJS提供了内置的表单验证机制,通过`ngForm`和`ngModel`指令,以及`required`、`minlength`、`maxlength`等属性实现客户端验证。 10. **Scope**:Scope是AngularJS中的核心概念,它充当了...

    Pro AngularJS 英文版 源代码

    9. **表单处理**:AngularJS提供了一套完整的表单处理机制,包括表单验证、模型绑定和提交处理。 10. **指令扩展**:开发者可以创建自定义指令来增强HTML,如实现复杂交互、动画效果或第三方库集成。 通过《Pro ...

    AngularJS学习笔记

    - **7.5 表单控件**:AngularJS提供了丰富的表单控件指令,如`ng-model`用于双向数据绑定,`ng-required`、`ng-minlength`等用于验证表单输入。 #### 8. 模板中的过滤器 - **8.1 排序orderBy**:使用`orderBy`过滤...

    精通angularjs pdf 和 源码

    AngularJS的模板语言允许开发者自定义指令,扩展HTML的功能。例如,`ng-repeat`用于迭代数组,`ng-if`用于条件渲染,`ng-class`和`ng-style`用于动态设置CSS类和样式。 **4. 路由与模块** `$routeProvider`或`$...

    AngularJS中实现用户访问的身份认证和表单验证功能

    还可以自定义验证规则,通过创建自定义指令扩展验证功能。 综上所述,AngularJS中的身份验证和表单验证功能是通过结合服务、指令、事件监听和拦截器等多种手段实现的。正确实施这些功能可以提升用户体验,同时增强...

Global site tag (gtag.js) - Google Analytics