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 相关文章推荐
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 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编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
javascript读取xml
2006/11/04 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
工厂厂长岗位职责
2013/11/08 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
《穷人》教学反思
2014/04/08 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
信访稳定工作汇报
2014/10/27 职场文书
高中生毕业评语
2014/12/30 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书