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>
<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自定义指令为我们提供了强大的能力,用于创建复杂的表单校验逻辑。通过结合正则表达式,我们可以轻松地实现http链接、纯数字等格式的验证,提升应用的用户体验。在实际项目中,可以根据需求不断扩展...
总结,AngularJS自定义指令为我们提供了一种灵活的方式,通过结合正则表达式,可以在前端实现高效的数据校验,提高用户体验并减少服务器端的负担。通过以上示例,你可以了解到如何创建和使用自定义指令进行HTTP地址...
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证...
本项目“mastering-angularjs-directives”显然是一个专注于讲解和展示AngularJS自定义指令实践的资源库。下面将详细探讨AngularJS自定义指令的相关知识点。 1. **自定义指令的基本概念** AngularJS的自定义指令是...
总结起来,AngularJS的表单验证通过结合HTML5的特性、自定义指令和模型绑定,提供了强大的验证功能。`ngMessages`模块进一步提升了用户体验,使错误消息显示更加直观和整洁。通过熟练掌握这些概念和实践,开发者可以...
在AngularJS框架中,表单验证功能不仅包含了HTML5的原生表单验证属性,而且还提供了一系列自定义的验证指令,以满足复杂的业务需求。本文将详细解析AngularJS中的表单验证知识点。 1. 表单验证的基本概念:表单验证...
9. **表单处理**:AngularJS提供了内置的表单验证和管理机制,如`ng-model`、`ng-required`等,使表单验证变得简单。 10. **指令的生命周期**:理解指令的创建、编译、链接等阶段对于开发复杂的自定义指令至关重要...
6. 指令(Directives):指令是AngularJS的自定义HTML标签或属性,用于扩展HTML的功能,例如ng-repeat用于循环渲染数据。 二、AngularJS API详解 1. $scope:每个控制器都有一个关联的$scope对象,它是模型和视图...
8. **表单验证**:AngularJS 提供了内置的表单验证机制,可以轻松实现客户端验证,提高用户体验。 通过"AngularJS学习笔记.chm"文件,你可以系统地学习AngularJS的基本概念、核心特性和实践技巧。文件中的章节可能...
通过自定义指令,开发者可以创建高度可复用的UI组件。 **5. Expressions和Filters:** AngularJS表达式允许在HTML中嵌入JavaScript代码,用于动态渲染数据。而过滤器则可以对数据进行格式化,如日期格式化、数组...
编写自定义验证指令的单元测试233 实现自定义验证指令235 88创建一个异步模型验证器235 模拟用户服务236 为异步验证编写测试代码237 实现异步验证指令238 89包装jQueryUIdatepicker指令239 为包装组件指令...
- **指令系统**:AngularJS允许开发者定义自定义指令,这些指令可以用来扩展HTML的功能,使其更适合表达应用程序的逻辑。 - **服务**:AngularJS提供了一系列内置的服务,如$http用于发送HTTP请求,$resource用于...
AngularJS的指令系统扩展了HTML,使得可以定义自定义的DOM元素和属性,用于封装复杂的交互逻辑。常见的内置指令如`ng-repeat`用于数据循环,`ng-if`用于条件渲染,`ng-click`处理用户点击事件等。开发者可以通过...
7. 表单验证:AngularJS提供了内置的表单验证机制,通过`ng-minlength`、`ng-maxlength`等指令可以轻松实现客户端验证。 8. 测试支持:AngularJS有良好的测试工具集,如 Karma 和 Jasmine,支持单元测试和端到端...
4. 指令(Directives):AngularJS允许开发者自定义HTML标签或属性,并给予它们新的功能,这是实现动态视图的关键特性之一。 5. 过滤器(Filters):过滤器用于对数据进行格式化,以便在视图中显示。 6. 表单控件...
9. **表单验证**:AngularJS提供了内置的表单验证机制,通过`ngForm`和`ngModel`指令,以及`required`、`minlength`、`maxlength`等属性实现客户端验证。 10. **Scope**:Scope是AngularJS中的核心概念,它充当了...
9. **表单处理**:AngularJS提供了一套完整的表单处理机制,包括表单验证、模型绑定和提交处理。 10. **指令扩展**:开发者可以创建自定义指令来增强HTML,如实现复杂交互、动画效果或第三方库集成。 通过《Pro ...
- **7.5 表单控件**:AngularJS提供了丰富的表单控件指令,如`ng-model`用于双向数据绑定,`ng-required`、`ng-minlength`等用于验证表单输入。 #### 8. 模板中的过滤器 - **8.1 排序orderBy**:使用`orderBy`过滤...
AngularJS的模板语言允许开发者自定义指令,扩展HTML的功能。例如,`ng-repeat`用于迭代数组,`ng-if`用于条件渲染,`ng-class`和`ng-style`用于动态设置CSS类和样式。 **4. 路由与模块** `$routeProvider`或`$...
还可以自定义验证规则,通过创建自定义指令扩展验证功能。 综上所述,AngularJS中的身份验证和表单验证功能是通过结合服务、指令、事件监听和拦截器等多种手段实现的。正确实施这些功能可以提升用户体验,同时增强...