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 定时局部刷新(setInterval)
Nov 19 Javascript
没有document.getElementByName方法
Aug 19 Javascript
图解js图片轮播效果
Dec 20 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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中的extract的作用分析
2008/04/09 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
jQuery阻止同类型事件小结
2013/04/19 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
JS二分查找算法详解
2017/11/01 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
python 正则表达式 概述及常用字符
2009/05/04 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python制作exe文件简单流程
2019/01/24 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
三月学雷锋月活动总结
2014/04/28 职场文书
董事长助理工作职责
2014/06/08 职场文书
多表查询、事务、DCL
2021/04/05 MySQL