Con validazione dell'input url HTML5 assumere URL inizia con http: //

Question

HTML5 fornisce per la validazione automatica URL: -

<form> 
    <input type="url" name="someUrl"> 
</form> 

Questo fallirà convalida per URL che non hanno un prefisso di protocollo - ad esempio stackoverflow.com avrà esito negativo mentre passerà http://stackoverflow.com.

Come posso aggiungere http: // automaticamente a un URL se non esiste già un protocollo?

Potrei aggiungere un gestore di eventi onblur ma esiste un modo migliore come alcuni prima dell'evento di convalida?

Answer 1

Il co de per questo non dovrebbe interrompere l'azione dell'utente, ma dovrebbe invece attendere fino a quando l'utente lascia il campo modulo per controllare il testo di input per "http". Quindi usa "onblur" invece di "onkeyup".

Quindi, basta vedere se la stringa contiene "http" usando indexOf. In caso contrario, restituirà -1, che è falso.

function checkURL (abc) { 
 
    var string = abc.value; 
 
    if (!~string.indexOf("http")) { 
 
    string = "http://" + string; 
 
    } 
 
    abc.value = string; 
 
    return abc 
 
}

<form> 
 
    <input type="url" name="someUrl" onblur="checkURL(this)" /> 
 
    <input type="text"/> 
 
</form>

Fiddle

Answer 2

se non si desidera che la convalida del browser (che può variare tra i browser), è possibile aggiungere il seguente attributo novalidate

<input type="url" name="someUrl" formnovalidate="formnovalidate"> 

altro si potrebbe desiderare di essere più trasparenti circa prefisso http: // aggiungendo semplicemente una volta che qualcuno inizia a digitare o addirittura a http: // già digitato nella casella nella pagina caricata

(credito a editore che giustamente sottolinea che il novalidato si applica alla forma, mentre sopra sovrascrive quello, addebito al creditore per l'approccio modificare;)

Answer 3

è possibile utilizzare

HTML:

<form> 
    <input type="url" name="someUrl" onkeyup="checkUR(this)" > 
</form> 

SCRIPT:

function checkUR(abc){ 
    string = abc.value 
    if(!(/^http:\/\//.test(string))){ 
     string = "http://" + string; 
    } 
    abc.value=string 
} 

example

Spero che vi aiuterà

Answer 4

ho caricato a GitHub una direttiva AngularJS anteporre http:// automaticamente. Utile per l'utente almeno.

https://github.com/rupperyes/MyAngularDirectives/

Answer 5

Si può provare a forzare gli utenti immettono URL valido, fornendo valore iniziale e segnaposto.

<label for="some-url">Some url:</label> 
 
<input id="some-url" type="url" placeholder="http://example.com" value="http://">

Answer 6

Questo sarà anteporre l'URL prima presentata, se non dispone di un http o https nell'URL.È anche senza distinzione tra maiuscole e minuscole (lo i alla fine). Sto anche usando onchange invece degli altri eventi per tenere conto degli utenti che premono il tasto invio e inviano il modulo in questo modo.

SCRIPT:

function checkURL(o) { 
    if (!/^https?:\/\//i.test(o.value)) { 
     o.value = "http://" + o.value; 
    } 
} 

SUPPLENTE SCRIPT: (sempre corretto "http: //")

function checkURL(o) { 
    o.value = o.value.replace(/^(https?:\/\/)?/i, "http://"); 
} 

HTML:

<form> 
    <input type="url" name="someUrl" onchange="checkURL(this)" > 
</form> 

Answer 7

ciò che voi ragazzi probabilmente desidera utilizzare è questo:

$(function(){ 
     $('input[type="url"]').on('blur', function(){ 
      var string = $(this).val(); 
      if (!string.match(/^https?:/) && string.length) { 
      string = "http://" + string; 
       $(this).val(string) 
      } 
     }); 
}); 

questo gira su documento pronto

controlli se il valore è vuoto o è mancante http all'inizio

inserti in quel caso sulla sfocatura

grazie @ 1j01