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实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
后端接收不到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实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
摘自启点的main.js
2008/04/20 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
express.js中间件说明详解
2019/03/19 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
人力资源行政经理自我评价
2013/10/23 职场文书
年度考核自我鉴定
2013/11/09 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
股指期货心得体会
2014/09/13 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL