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 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 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面试题附答案
2009/01/07 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
PHP扩展开发入门教程
2015/02/26 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python为什么要安装到c盘
2020/07/20 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
安全生产演讲稿
2014/05/09 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
详解Python中__new__方法的作用
2022/03/31 Python