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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
Vue通过provide inject实现组件通信
Sep 03 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调用mysql存储过程
2007/02/14 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Python的时间模块datetime详解
2017/04/17 Python
python实现多进程代码示例
2018/10/31 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
个人求职信范文分享
2013/12/13 职场文书
车辆年审委托书范本
2014/09/18 职场文书
如何写辞职书
2015/02/26 职场文书
党员带头倡议书
2015/04/29 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
mysql 获取相邻数据项
2022/05/11 MySQL