Question

我想验证一个具有某些网址值的文本框，例如博客地址或网站地址如何在js

中验证此文本框

Answer 1

我假设您知道如何使用JavaScript获取<input>的值。所以你的问题是编写用于验证URL的特定功能。

首先，我们可能会考虑检查网址在语法上是否正确。

一些例子，我们的URL验证器一定要考虑好：

http://www.example.com.
http://www.google.ee/search?q=foo&sourceid=opera&ie=utf-8&oe=utf-8
https://ama-z-on.co.uk/index.html?a=hei%20hoo
ftp://ftp.linux.ee/public/gentoo/i386/portage-snapshot.tar.bz
http://he.wikipedia.org/wiki/שטרגליים#.D7.A8.D7.90.D7.95_.D7.92.D7.9D
sftp://123.1.255.128:80/pub

这只是URL真实种类中的一小部分。 HTTP和FTP并不是URL唯一可能的协议。哦，伙计，URL验证真的很难。

但是我们假设一个有效的URL应该以一些字母开头，然后是“：//”，之后就是这样。要测试这种模式，您可以使用JavaScript中的正则表达式：

function validateUrl(url) {
  return /^[a-z]+:\/\//i.test(url);
}

正则表达式是一个很大的主题，你应该考虑自己学习，但这里只是一个简短的解释：

/ - 正则表达式的开始
^ - 匹配字符串的开头
[a-z] - 匹配a，b，c，...，x，y或z。
+ - 表示前一个模式可以重复一次或多次。
: - 匹配冒号符号本身。
\/ - 匹配forward-slash /（没有反斜杠JavaScript会认为它是正则表达式的结尾）。
/ - 结束正则表达式。
i - 这是一个修饰符，使这个正则表达式不区分大小写。
.test(url) - 以test为参数调用正则表达式对象的url方法。当参数与正则表达式匹配时，它将返回true，否则为false。

此外，您可能希望允许输入不带http://部分的URL - 这意味着您确实需要验证域名或IP地址或其后的任何内容。

我猜你现在很困惑，这是故意的。你真的不应该自己编写JavaScript来进行URL验证，要想做到这一点太难了。相反，你应该使用库函数，经许多专家测试和确认是正确的。

也许你正在使用的JavaScript fraimwork已经有了一个很好的工具来完成这项工作。在那种情况下使用它。不幸的是，我不能特别建议任何特定的URL验证库。

此外，您可能需要考虑Josh Stodola建议的 ping网址，以检查它是否确实存在。虽然，Josh建议的特殊方式，如果URL引用的资源是10GB文件，可能会有问题：）

Answer 2

进行格式化的基本RegExp测试。然后使用XMLHttpRequest ping该URL以确保它存在。使用jQuery的一个例子......

var url = $("#txtUserWebSite").val();
var reg = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([,-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([,-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([,-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/; 

if(!reg.test(url)) {
  alert("Invalid URL!");
  return false;
}

$.get(url, function(dat, stat) {
  if(stat == "success")
    alert("Valid URL!");
  else
    alert("Invalid URL!");
})

Answer 3

var regExpUrl = new RegExp( "^((http|https|ftp)\://){1}([a-zA-Z0-9\.\-]+\.(\:[a-zA-Z0-9\.&amp;%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$");

var inputArrs = [
	"http://190.190.1.190:8080",
	"https://190.190.1.190:8080",
	"http://190.190.1.190:8080/",
	"http://190.190.1.190:8080/xampp/",
	"http://190.190.1.190:8080/testproject",
	"http://190.190.1.190:8080/testproject/admin/index.php",
	"http://190.190.1.190:8080/testproject/admin/index.php?a=asdf&asdf",
	"http://190.190.1.190:8080/phpmyadmin",
	"http://www.google.com.au",
	"https://www.google.com.au/asdf/asdf/asdfasdf?asdf=asdf&asdf=asdf",
	"http://google.com.au",
	"https://google.com.au",
	"www.google.com.au",
	"google.com.au",
	"http://www.google.com.au",
	"test",
	"!@#!@#!@#",
	"123",
	"210.110",
	"y.y.y.y",
	"255.0.0.y",
	"666.10.10.20",
	"4444.11.11.11",
	"33.3333.33.3",
	"190.190.1.190",
	"190.190.1.190",
	"190.190.1.190:80",
	"190.190.1.190:8080",
	"190.190.1.190:",
	
];

inputArrs.forEach(function(input) {
	if(regExpUrl.test(input)) {
		res = "URL/IP Valid";
	} else {
		res = "Invalid URL/IP";
	}
	prevVal = document.getElementById("response").innerHTML;
    document.getElementById("response").innerHTML = prevVal + "<br/>" + input + " = " + res + "<br/>";
});

<div id="response"></div>

<script>

var regExpUrl = new RegExp( "^((http|https|ftp)\://){1}([a-zA-Z0-9\.\-]+\.(\:[a-zA-Z0-9\.&amp;%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$");

var inputArrs = [
	"http://190.190.1.190:8080",
	"https://190.190.1.190:8080",
	"http://190.190.1.190:8080/",
	"http://190.190.1.190:8080/xampp/",
	"http://190.190.1.190:8080/testproject",
	"http://190.190.1.190:8080/testproject/admin/index.php",
	"http://190.190.1.190:8080/testproject/admin/index.php?a=asdf&asdf",
	"http://190.190.1.190:8080/phpmyadmin",
	"http://www.google.com.au",
	"https://www.google.com.au/asdf/asdf/asdfasdf?asdf=asdf&asdf=asdf",
	"http://google.com.au",
	"https://google.com.au",
	"www.google.com.au",
	"google.com.au",
	"http://www.google.com.au",
	"test",
	"!@#!@#!@#",
	"123",
	"210.110",
	"y.y.y.y",
	"255.0.0.y",
	"666.10.10.20",
	"4444.11.11.11",
	"33.3333.33.3",
	"190.190.1.190",
	"190.190.1.190",
	"190.190.1.190:80",
	"190.190.1.190:8080",
	"190.190.1.190:",
	
];

inputArrs.forEach(function(input) {
	if(regExpUrl.test(input)) {
		res = "URL/IP Valid";
	} else {
		res = "Invalid URL/IP";
	}
	prevVal = document.getElementById("response").innerHTML;
    document.getElementById("response").innerHTML = prevVal + "<br/>" + input + " = " + res + "<br/>";
});

</script>

<div id="response"></div>

Answer 4

查看Regular Expression Library，它具有适用于各种验证的大型正则表达式存储库。他们还提供在线测试工具。

如何使用正则表达式验证javascript中的URL

4 个答案: