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 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
利用layer实现表单完美验证的方法
Sep 26 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 根据IP地址控制访问的代码
2010/04/22 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python中函数默认值使用注意点详解
2016/06/01 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
python range实例用法分享
2020/02/06 Python
python实现拼接图片
2020/03/23 Python
政法大学毕业生自荐信范文
2014/01/01 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
党支部书记岗位职责
2015/02/15 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS