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自定义指令对 ECharts 2 的雷达图进行封装,以便在项目中可以重复调用。
使用AngularJS自定义指令对 ECharts 2 的折线图进行封装,以便在项目中可以重复调用。
angularjs自定义指令directive,用做http地址校验和数字校验,仅供学习参考使用
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证...
主要介绍了AngularJS 自定义指令,这里整理了详细的资料及简单实例代码,有需要的小伙伴可以参考下
使用 AngularJS 的自定义指令对 ECharts 2 的柱状图进行封装,以便在页面重复调用。
引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素。 AngularJS提供支持,以下列元素的类型来创建自定义指令。 Element...
简单的angularjs指令下拉框。源代码
angularjs自定义select组件,自定义option选项,并支持搜索查找功能。
AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用。默认值为false不能使用嵌套,true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。 代码示例:...
主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下
暂时有http的校验 和 纯数字的校验,代码共享
本文实例讲述了AngularJS实现自定义指令及指令配置项的方法。分享给大家供大家参考,具体如下: AngularJS自定义指令有两种写法: //第一种 angular.module('MyApp',[]) .directive('zl1',zl1) .controller('con1',...
主要介绍了AngularJS优雅的自定义指令,告诉大家为什么使用AngularJS自定义指令,以及如何使用AngularJS自定义指令?感兴趣的小伙伴们可以参考一下
主要介绍了AngularJS自定义指令实现面包屑功能,结合完整实例形式分析了AngularJS自定义指令的定义、调用及面包屑功能的具体实现技巧,需要的朋友可以参考下
NULL 博文链接:https://bijian1013.iteye.com/blog/2392681
Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识,感兴趣的朋友一起学习吧