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 相关文章推荐
浅析hasOwnProperty方法的应用
Nov 20 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
后端接收不到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图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP 类与构造函数解析
2017/02/06 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
介绍一下Java的安全机制
2012/06/28 面试题
生物科学专业个人求职信范文
2013/12/07 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
小学生打架检讨书
2014/01/26 职场文书
员工拓展培训方案
2014/02/15 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
六查六看自查材料
2014/02/17 职场文书
法律顾问服务方案
2014/05/15 职场文书
销售目标责任书
2014/07/23 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书