js利用正则表达式检验输入内容是否为网址


Posted in Javascript onJuly 05, 2016

js正则检验输入的是否为网址功能在网页中也是很常见的,友情链接部分、表单填写个人主页的时候,使用JavaScript取验证是否为网址。 

这个检验不好写,最好还是使用正则表达式去认证。 

规定,输入的东西只能是http://与https://开头,而且必须是网址。 

有人说,为何像www.1.com这样的网页不行呢?

这是以免你拿用户输入的东西构造超级链接的时候,a标签中的href属性如果遇不到http://或者https://的东西,那么就会认为是根目录,会在你的网站的网址后面接着写入这个地址再跳转,这个大家应该知道。比如<a href="www.1.com">xxx</a>,我的网址是http://localhost,那么点击这个显示为xxx的a标签之后,则只是跳到http://localhost/www.1.com这个位置,当然不对了。 

比如如下的文本框,如何利用正则表达式做到要求用户输入的必须是http://与https://开头的网址呢? 

js利用正则表达式检验输入内容是否为网址

1、首先是一个简单的布局,这个不用说了:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
网址必须以http://或者https://开头,且必须是个网址^_^!<br />
<input type="text" id="url" />
<button onclick="CheckUrl()">确定</button>
</body>
</html>

 2、其次是脚本,其实也不用说了,关键是那条正则表达式:

<script>
function CheckUrl(){
 var url=document.getElementById("url").value;
 var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
 if(!reg.test(url)){
 alert("这网址不是以http://https://开头,或者不是网址!");
 }
 else{
 alert("输入成功");
 }
}
</script>

 在: var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;之中,
 1、Javascript之中,由于所有变量都是var,因此正则表达式必须写在两个斜杠之中,/.../,然后正则表达式里面的斜杠/必须写成\/
 2、^表示必须以……开头,[]表示一个检验单位,也就是某个字符可以容纳的东西,比如^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/),就是要求以http://或者https://开头的意思。|是或者,第一个字符是h或者H,第二、三个字符是[tT],{2}是包括这个字符与其后面的1个字符都必须为[tT]的意思,之后以此类推
 3、([A-Za-z0-9-~]+)表示,包括这个字符及其随后的字符都必须大写字母、小写字母、数字、减号-或者是~
 字符+的意思是:匹配+号前面的字符1次或n次,例如:/a+/匹配"candy"中的'a'和"caaaaaaandy"中的所有'a'.
 4、因此(([A-Za-z0-9-~]+)\.)+则表示XXX.这个以点结尾的东西,必须在([A-Za-z0-9-~\/])+$这个字符前面出现至少1次
 5、$表示必须以大写字母、小写字母、数字、减号-、~、/结尾

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery的index方法实现tab效果
Feb 16 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
js实现交通灯效果
Jan 13 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 #Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 #Javascript
Bootstrap实现水平排列的表单
Jul 04 #Javascript
JSONP跨域请求实例详解
Jul 04 #Javascript
Bootstrap表单布局样式源代码
Jul 04 #Javascript
JS JSOP跨域请求实例详解
Jul 04 #Javascript
json格式的javascript对象用法分析
Jul 04 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python实现将元祖转换成数组的方法
2015/05/04 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
活动简报范文
2015/07/22 职场文书