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 相关文章推荐
html文本框提示效果的示例代码
Jun 28 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 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/09/25 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php日历制作代码分享
2014/01/20 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
JQuery 入门实例1
2009/06/25 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
探究python中open函数的使用
2016/03/01 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
C语言笔试题
2014/09/04 面试题
大一自我鉴定范文
2013/10/04 职场文书
公司总经理岗位职责
2014/03/15 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
安全伴我行主题班会
2015/08/13 职场文书
网络研修心得体会
2016/01/08 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS