我想要验证一个文本框,其中包含一些URL值,例如博客地址或网站地址 如何在js中验证此文本框
我想要验证一个文本框,其中包含一些URL值,例如博客地址或网站地址 如何在js中验证此文本框
我假设您知道如何使用JavaScript获取标签的值。因此,您的问题是编写用于验证URL的特定函数。
首先,我们可以考虑检查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 中的任意一个字符。+
- 表示前面的模式可以重复一次或多次。:
- 匹配冒号本身。\/
- 匹配正斜杠 /
(如果没有反斜杠,JavaScript 会认为它是正则表达式的结尾)。/
- 正则表达式的结尾。i
- 这是一个修饰符,使正则表达式对大小写不敏感。.test(url)
- 调用正则表达式对象的 test
方法,并将 url
参数传递给它。当参数与正则表达式匹配时,它返回 true
,否则返回 false
。此外,您可能希望允许输入没有 http://
部分的 URL - 这意味着您确实需要验证其后面的域名或 IP 地址或其他内容。
我猜你现在可能有些困惑,但这是故意的。您真的不应自己编写 JavaScript 来进行 URL 验证,因为很难做到完全正确。相反,您应该使用库函数,这是经过许多专家测试和确认正确的。
也许您正在使用的 JavaScript 框架已经有了一个适合这项工作的好工具。如果是这样,请使用它。不幸的是,我无法为 URL 验证建议任何特定的库。
另外,您可能还希望考虑ping该URL,如Josh Stodola所建议的那样,以检查它是否真的存在。不过,如果URL引用的资源是10GB文件,则Josh建议的特定方式可能存在问题 :)
对格式进行基本的正则表达式测试。然后使用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!");
})
var regExpUrl = new RegExp( "^((http|https|ftp)\://){1}([a-zA-Z0-9\.\-]+\.(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((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\.\,\?\'\\\+&%\$#\=~_\-]+))*$");
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\.&%\$\-]+)*@)*((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\.\,\?\'\\\+&%\$#\=~_\-]+))*$");
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>