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 相关文章推荐
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
详解小程序横屏方案对比
Jun 28 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
php代码把全角数字转为半角数字
2007/12/10 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
运动会广播稿500字
2014/01/28 职场文书
《阳光》教学反思
2014/02/23 职场文书
挂职自我鉴定
2014/02/26 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
大学生学年个人总结
2015/02/15 职场文书
听证会主持词
2015/07/03 职场文书
团委副书记工作总结
2015/08/14 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书