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 相关文章推荐
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
关于vue表单提交防双/多击的例子
Oct 31 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
优化使用mysql存储session的php代码
2008/01/10 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
表单内同名元素的控制
2006/11/22 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
TopList标签和JavaScript结合两例
2007/08/12 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
canvas实现图像截取功能
2017/02/06 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
《美丽的公鸡》教学反思
2014/02/25 职场文书
水电站项目建议书
2014/05/12 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电