【JavaScript】利用正则表达式检查输入框输入的是否为网址

这个功能在网页中也是很常见的,友情链接部分、表单填写个人主页的时候,使用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://开头的网址呢?

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、$表示必须以大写字母、小写字母、数字、减号-、~、/结尾

时间: 2024-10-14 02:38:19

【JavaScript】利用正则表达式检查输入框输入的是否为网址的相关文章

Javascript 利用正则表达式实现数字千位分隔符

最近在网上有看到使用js来实现数字的千位分隔符的面试(笔试)题,所以就自己写了一个利用“正则+replace”来实现的方法:    1 var thousandBitSeparator = function(numStr){ 2 var b = /([-+]?\d{3})(?=\d)/g; 3 4 return numStr.replace(b, function($0, $1){ 5 return $1 + ','; 6 }); 7 } 支持正负号匹配,小数点区分,如有错误,希望大大们指出:-

【Java】利用正则表达式判断是否为网址

本文与<[JavaScript]利用正则表达式检查输入框输入的是否为网址>(点击打开链接)为姊妹篇,在上文中已经提到了,正则表达式在各个程序是通用的,这里不再讲解正则表达式的具体用法.重点讲述正则表达式在Java中怎么使用,还是在判断是否为网址. 有以下的四个测试用例: 运行结果如上图所示. 代码如下: package urlReg; import java.util.regex.*; public class urlRegTest { public static void main(Stri

利用正则表达式来设置最大输入字符长度

        在做机房合作的时候,很多东西都进行了"改革",听二牛说输入的字符长度限制可以用正则表达式,当然限制字符长度不仅可以用这种方法来写,还有通过设置文本框属性等办法来解决.不过利用正则表达式,我还是没没想到.反正正则表达式都学过了,为什么不能拿过来用呢?让它和我原来的方法比试比试. 一.ascii码小试 之前的代码是利用ascii码来编写的: '限制输入的字符长度为0-16之间 Private Sub txtcardno_LostFocus() If Not Len(txtc

利用正则表达式匹配输入内容 ----正则表达式

//利用正则表达式匹配输入内容 package regex; import java.util.Scanner; import java.util.regex.Matcher; import java.util.regex.Pattern; public class RegexTest { public static void main(String[] args) { // TODO Auto-generated method stub Scanner in = new Scanner(Sys

利用正则表达式校验input框输入的字符类型

当做form表单校验时,如果只是想校验输入字符的类型,那么可以在input等标签中利用正则表达式进行校验,而不用通过调用js. 例如,校验输入字符是否为正整数: <input type='text' onkeyup="value=this.value.replace(/\D+/g,'')" /> 或者校验输入字符是否为字符串为数字(正整数+正浮点数): <input type='text' onkeyup="value=this.value.replace(

利用正则表达式限制网页表单里的文本框输入内容

将以下代码放入输入框就可以了. (1)用正则表达式限制只能输入中文:onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" (2)用正则表达式限制只能输入全角字符: onkeyup="valu

数往知来 JavaScript js正则表达式&lt;二十五&gt;

1.匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)* 评注:表单验证时很实用 2.匹配网址URL的正则表达式:[a-zA-z]+://[^s]* 评注:网上流传的版本功能很有限,上面这个基本可以满足需求 3.匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 评注:表单验证时很实用 4.匹配国内电话号码:d{3}-d{8}|d{4}-d{7} 评注:匹配形式如 051

JavaScript使用正则表达式

2.0 简介 正则表达式是可以用来查找与给定模式匹配的文本的搜索模式.例如,在上一章中,我们在一个较长的字符串中查找子字符串Cookbook: var testValue = "This is the Cookbook's test string"; var subsValue = "Cookbook"; var iValue = testValue.indexOf(subsValue); //返回值12,即子字符串的索引 这段代码有效,因为我们要查找一个严格的匹配

如何使用JavaScript和正则表达式进行数据验证

利用客户端JavaScript的优势,JavaScript中的正则表达式可以简化数据验证的工作,下面与大家分享下如何使用JavaScript和正则表达式进行数据验证,感兴趣的朋友可以参考下哈 数据验证是网络应用软件从客户端接受数据的重要步骤,毕竟,您需要在使用客户数据前确保其符合预期的格式.在网络应用程序中,您可以选择使用特定平台的工具,比如ASP.NET.JSP等等,或者您可以利用客户端JavaScript的优势,JavaScript中的正则表达式可以简化数据验证的工作. 正则表达式 正则表达