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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
jquery获取radio值实例
Oct 16 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 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在线打包程序源码
2008/07/27 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
php短信接口代码
2016/05/13 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
门卫工作岗位职责
2013/12/17 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
企业务虚会发言材料
2014/10/20 职场文书
活动新闻稿范文
2015/07/17 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android