Validarea unei adrese URL dintr-un formular cu JavaScript

Atunci când dezvolți formulare web, validarea pe partea de client a datelor introduse de utilizatori (cum ar fi adresele de site web sau linkurile externe) este esențială pentru a asigura corectitudinea datelor și pentru a oferi un răspuns rapid în interfață înainte de trimiterea formularului către server.

În JavaScript, verificarea formatului unei adrese web se realizează în mod uzual cu ajutorul expresiilor regulate (RegEx). Iată trei exemple practice și abordări pe care le poți adapta în funcție de cerințele proiectului tău:

Exemplul 1: Validarea formularului la trimitere (onSubmit)

Această abordare verifică câmpul de text în momentul trimiterii formularului și afișează o alertă dacă adresa introdusă nu respectă structura standard de URL:

[code]
<html>
<head>
<script type="text/javascript">
function Validate(form) {
var v = new RegExp("^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\\?\\/.=]+$");
if (!v.test(form["URL"].value)) {
alert("Vă rugăm să introduceți o adresă URL validă!");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="MyForm" action="MyFile.php" method="POST" onsubmit="return Validate(this);">
<input type="text" name="URL" value="http://">
<input type="submit" name="SUBMIT" value="Trimite">
</form>
</body>
</html>
[/code]

Sursă: WeberDev

Exemplul 2: Funcție de verificare pentru protocoale comune (http, https, ftp, www)

O funcție concisă care verifică dacă șirul furnizat începe cu prefixe uzuale de adresă web:

[javascript]
function checkURL(value) {
var urlregex = new RegExp("^(http:\\/\\/www.|https:\\/\\/www.|ftp:\\/\\/www.|www.){1}[0-9A-Za-z\\.\\-]*\\.[0-9A-Za-z\\.\\-]*$");
if (urlregex.test(value)) {
return true;
}
return false;
}
[/javascript]

Sursă: DevShed Forums

Exemplul 3: Expresie regulată avansată pentru protocoale, porturi și căi complete

Pentru situațiile în care ai nevoie de o verificare mai detaliată (inclusiv autentificare prin utilizator, porturi specifice sau parametri de interogare):

[javascript]
function isUrl(s) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
return regexp.test(s);
}
[/javascript]

Sursă: DZone Snippets

Voi ce expresii regulate sau metode de validare folosiți pentru verificarea linkurilor în JavaScript?