且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-02-25 16:23:57

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

I assume, that you know how to get the value of <input> with JavaScript. So your problem is writing the specific function for validating the URL.

首先我们可以考虑检查URL在语法上是否正确

一些例子,我们的URL验证器肯定应该考虑好:

Some examples, that our URL validator should definitely consider OK:

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验证真的很难。

And that's only a small fraction of the real variety of URL-s possible. And HTTP and FTP aren't the only protocols possible for URL. Oh man, that URL-validation is really hard.

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

But lets assume that a valid URL should start with some letters, then "://" and after that what ever. To test that kind of pattern you would use a regular expression which in JavaScript looks like this:

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

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

Regular expressions are a whole big topic, that you should consider learning by yourself, but just a brief explanation here:


  • / - 开始正则表达式

  • ^ - 匹配字符串的开头

  • [az] - 匹配a,b,c,...,x,y或z。

  • + - 表示前一个模式可以重复一次或多次。

  • - 匹配冒号符号本身。

  • \ / - 匹配forward-slash / (没有反斜杠JavaScript认为这是正则表达式的结束)。

  • / - 结束正则表达式。

  • i - 这是一个修饰符,使这个正则表达式不区分大小写。

  • .test(url ) - 使用 url 调用正则表达式对象的 test 方法ameter。当参数与正则表达式匹配时,它返回 true 否则 false

  • / - start of regular expression
  • ^ - matches the beginning of string
  • [a-z] - matches either a, b, c, ..., x, y, or z.
  • + - means that the previous pattern can be repeated one or more times.
  • : - matches the colon symbol itself.
  • \/ - matches forward-slash / (without the backslash JavaScript would think it's the end of regular expression).
  • / - ends the regular expression.
  • i - this is a modifier, that makes this regular expression case-insensitive.
  • .test(url) - calls the test method of regular expression object with url as the parameter. When parameter matches the regular expression, it returns true otherwise false.

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

Additionally you might want to allow entering an URL without the http:// part - this means you really need to validate the domain name or IP address or whatever that follows it.

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

I guess you are pretty confused by now, and that's intentional. You really shouldn't write JavaScript to do URL validation by yourself, it's too hard to get it right. Instead you should use a library function, that is tested and confirmed to be correct by many experts.

也许你正在使用的JavaScript fraimwork有一个很好的工具来完成这项工作。在那种情况下使用它。遗憾的是,我无法专门建议任何特定的URL验证库。

Maybe the JavaScript fraimwork you are using already has a good tool for that job. In that case use it. Unfortunately I can not suggest any specific library for URL validation specifically.

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

Additionally you might want to consider pinging the URL as Josh Stodola suggested, to check that it really exists. Although, the particular way Josh suggest, might be problematic in case the resource referenced by URL is 10GB file :)