Używam wyrażenia regularnego, aby potwierdzić, że wprowadzono prawidłowy adres e-mail. Działa świetnie, a gdy e-mail jest niepoprawny, obramowanie jest czerwone, gdy e-mail jest poprawny, obramowanie wraca do normy. ALE jeśli usunę ...

1
Jay 28 czerwiec 2021, 09:57

4 odpowiedzi

Najlepsza odpowiedź

Po prostu sprawdź, czy są puste:

if(emailInputValue.trim() !=='' &&  ...

W swoim kodzie

emailInput.addEventListener("input", (e) => {
  const emailInputValue = e.currentTarget.value;
  if(emailInputValue.trim() !=='' &&  /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) != true) {
      emailInput.style.border = "thin solid red";
  } else {
      emailInput.style.border = "";
  }
})

Wolę używać klas do tego typu rzeczy. Jest bardziej elastyczny i zgodny z najlepszymi praktykami:

const emailInput = document.querySelector("#email");
emailInput.addEventListener("input", (e) => {
  const emailInputValue = e.currentTarget.value;
  let valid = emailInputValue.trim() === '' || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue);
  if (!valid) emailInput.classList.add('invalid');
  else emailInput.classList.remove('invalid');
})
input{
padding:5px;
}
.invalid {
  border: 2px solid #f00;
  background: rgb(249,241,241);
}
<label for="email" class="required">Email:</label>
<div id="email_div">
  <input type="email" required name="email" id="email" placeholder="Email" maxlength="50">
  <label for="email" id="email_text">This field is required in order to receive an email confirmation.</label>
</div>
1
Kinglish 28 czerwiec 2021, 07:23

Kiedy usuwasz zawartość pola wejściowego, uruchamiane jest zdarzenie input i pusty ciąg jest sprawdzany względem wyrażenia regularnego, które zwraca prawdę. dlatego granica pozostaje czerwona.

Dodałem sprawdzenie, czy wartość wejściowa jest pustym ciągiem, a następnie zresetuj kolor obramowania

const emailInput = document.querySelector('#email');

emailInput.addEventListener('input', e => {
  const emailInputValue = e.currentTarget.value;
   if(emailInputValue.trim()===""){
    emailInput.style.border = '';
    return;
  }
  if (
    /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) !=
    true
  ) {
    emailInput.style.border = 'thin solid red';
    emailInput.style.outline = 'none';
  } else {
    emailInput.style.border = '';
  }
});
<label for="email" class="required">Email:</label>
<div id="email_div">
  <input type="email" required name="email" id="email" placeholder="Email" maxlength="50">
  <label for="email" id="email_text">This field is required in order to receive an email confirmation.</label>
</div>
1
Gulam Hussain 28 czerwiec 2021, 07:04

Nic łatwiejszego.

Po prostu dodaj nowy argument do if. Może coś takiego:

  if (
    !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) &&
    emailInputValue.trim() !== ""
  ) {

Pełny kod:

const emailInput = document.querySelector("#email");

emailInput.addEventListener("input", (e) => {
  const emailInputValue = e.currentTarget.value;
  const emailTest = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(
    emailInputValue
  );
  
  if (!emailTest && emailInputValue.trim() !== "") {
    emailInput.style.border = "thin solid red";
  } else {
    emailInput.style.border = "";
  }
});
<label for="email" class="required">Email:</label>
<div id="email_div">
  <input type="email" required name="email" id="email" placeholder="Email" maxlength="50">
  <label for="email" id="email_text">This field is required in order to receive an email confirmation</label>
</div>
1
Kordrad 28 czerwiec 2021, 07:05

Możesz usunąć stylizację za każdym razem, gdy jest pusta. Codepen

const emailInput = document.querySelector("#email");

emailInput.addEventListener("input", (e) => {
  const emailInputValue = e.currentTarget.value;
  if(emailInputValue == ''){
    emailInput.style.border = "thin solid red";
  }
  else{
    
  if(  /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) != true) {
      emailInput.style.border = "thin solid red";
  } else {
      emailInput.style.border = "";
  }
  }
})

1
Tushar Shahi 28 czerwiec 2021, 07:06