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 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
ES6中的类(Class)示例详解
Dec 09 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 咖啡文化
打造计数器DIY三步曲(中)
2006/10/09 PHP
php中变量及部分适用方法
2008/03/27 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
php中使用sftp教程
2015/03/30 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python实现简单的socket server实例
2015/04/29 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
pycharm实现猜数游戏
2020/12/07 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
事业单位请假制度
2014/01/13 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
护理职业生涯规划书
2014/01/24 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
技术合作协议书范本
2014/04/18 职场文书
交通事故案件代理词
2015/05/23 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL