JQUERY Regex - tylko jeden plus i maksymalnie trzy cyfry

pytanie zadane 15 grudnia 2021 w JavaScript przez Sebastian Szyja Bywalec (2,810 p.)
edycja 15 grudnia 2021 przez Sebastian Szyja

Hej :))

Mam taki problem, próbuję zrobić walidację prefixu po keyupie:

<input type="text" class="form-control" id="input-prefix" onkeyup="removeFromPrefix(this)" name="prefix" aria-describedby="prefixHelp" value="+48" placeholder="Prefix telefonu kontaktowego" required>

i mam funckję w JS:

function removeFromPrefix(t) {
   var chunked = t.value.split();
 
   for(var i=0; i<chunked.length; i++) {
     if(chunked[i]!='+' && i==0 || i>0 && !Number.isInteger(chunked[i])) {
       chunked[i]='';
       t.value = chunked.join('');
     }
   }
}

ale niestety nie działą mi to :((

Problem:

Gdy użytkownik wpisuje + chcaiłbym aby sprawdzić czy jako pierwszy znak może być + jeżeli nie zamienia na pustą wartość "", następnie gdy znak + został wpisany użytkownik wpisuje 4 i skrypt sprawdza czy na drugim miejscu może być cyfra jeżeli nie to znowu pusta wartość "".

Użytkownik musi wpisać: plus na początku oraz maksymalnie trzy cyfry za plusem.

Pomoże ktoś to rozwiązać? :)

Pozdrawiam!

komentarz 15 grudnia 2021 przez Sebastian Szyja Bywalec (2,810 p.)

Mam funkcję naprawioną po części:

function removeFromPrefix(t) {
    if(t.value.match(/(\+|00)$/)){
      t.value = t.value.replace(/(\+|00)$/,'');
    }
}

Tylko że plusa nie da się na początku postawić

komentarz 15 grudnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Nie prościej by było prefix/numer kierunkowy ustawiać w <select> obok <input>? Wtedy mógłbyś łatwiej sprawdzić, czy i jaki prefix jest ustawiony i na tej podstawie sprawdzać zawartość inputa.

komentarz 15 grudnia 2021 przez Sebastian Szyja Bywalec (2,810 p.)

Hmmm... nie głupie rozwiązanie - tylko znowu teraz musze posiadać wszystkie prefixy :(( a chciałbym zrobić to wyrażeniem REGEX

komentarz 16 grudnia 2021 przez Milesq Nałogowiec (32,020 p.)

@Sebastian Szyja, dlaczego w tytule umieściłeś nazwę jquery?

3 odpowiedzi

odpowiedź 15 grudnia 2021 przez Chess Szeryf (76,710 p.)
edycja 15 grudnia 2021 przez Chess

var chunked = t.value.split();

for(var i=0; i<chunked.length; i++) {
  if(chunked[i]!='+' && i==0 || i>0 && !Number.isInteger(chunked[i])) {
    chunked[i]='';
    t.value = chunked.join('');
  }
}

komentarz 15 grudnia 2021 przez Sebastian Szyja Bywalec (2,810 p.)

nie działą :(( po wpisaniu cyfry po plusie usuwa wartość z pola :((

komentarz 15 grudnia 2021 przez Chess Szeryf (76,710 p.)

Jeżeli znak drugi lub dalszy nie jest cyfrą, usuń go z pola danych wprowadzonych.

Kod zmieniłem, przepisz od nowa.

komentarz 15 grudnia 2021 przez Sebastian Szyja Bywalec (2,810 p.)

dalej to samo.. przekleiłem Twój skrypt do głównego pytania. mozesz przetestować klikając CodePen u góry badź JSFIDDLE

odpowiedź 15 grudnia 2021 przez Sebastian Szyja Bywalec (2,810 p.)

Poprawne:

function removeFromPrefix(t) {
   var chunked = t.value.split('');
 
  for(var i=0; i<chunked.length; i++) {
  	console.log(Number(chunked[i]));
    if((chunked[i]!='+' && i==0) || (i>0 && isNaN(Number(chunked[i]))) || i>3 ) {
    	chunked[i]='';
      t.value = chunked.join('');
    }
  

  }

}

komentarz 15 grudnia 2021 przez Chess Szeryf (76,710 p.)

Można jeszcze z isString.

odpowiedź 16 grudnia 2021 przez VBService Ekspert (253,340 p.)

Może zamiast onkeyup użyj onkeydown, "plusa" wstaw przed input, np.:

+ <input type="text" class="form-control" id="input-prefix" 
   onkeydown="removeFromPrefix(event)" 
   name="prefix" aria-describedby="prefixHelp" 
   value="" placeholder="Prefix telefonu kontaktowego" required />

function removeFromPrefix(e) {
  const allow = [ 'Backspace', 'Delete', 'ArrowRight', 'ArrowLeft' ];
  
  if (!parseInt(e.key) && e.key != "0" && !allow.includes(e.code)) e.preventDefault();
  if (e.target.value.length >= 3 && !allow.includes(e.code)) e.preventDefault();
}