Как проверить форму с определенным количеством символов - PullRequest
Новая
       5

Как проверить форму с определенным количеством символов

0 голосов
/ 30 августа 2018

Я пытаюсь создать код, который проверяет форму. Когда пользователь печатает в форме 'cpf', код должен знать, набрал ли он цифры и набрал ли он ровно 11 цифр. Что-то пошло не так в этом коде, и я не знаю, что это такое. Когда я набираю форму, она всегда возвращает «пожалуйста, укажите требуемый формат». Неважно, если я набрал слова, цифры или 11 цифр или просто один или два. Это упражнение, над которым я работаю, потому что я изучаю JavaScript, и я впервые работаю с этим языком. Во всяком случае, я считаю, что я должен добавить что-то, что превращает информацию в форме в строку или я могу посчитать длину этой строки (??). Я не знаю, как это сделать в этом коде. Любые советы или исправления? 

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:50px; color:blue; text-align:center; border: 2px solid Tomato">Cadastro de produto</h1>

<div>
  <form name="form1" style="text-align:center" action="/action_page.php">
    CPF:
    <br>
    <input type="text" id="cpf" name="cpf" maxlength="11" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Digite apenas os 11 numeros que compõem seu CPF" required>
    <br><br>
    Nome completo:
    <br>
    <input type="text" id="nome" name="nome" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Digte aqui o seu nome completo" required>
    <br><br>
    E-mail:
    <br>
    <input type="text" id="email" name="email" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Digte aqui o seu E-mail" required>
    <br><br>
    Mensagem:
    <br><br>
    <textarea name="message" rows="10" cols="80"></textarea>
    <br>
    <input type="submit" value="Salvar">
  </form>
</div>

<div id="reqs">
  <p id="cpff" class="invalid"></p>
  <p id="emaill" class="invalid"></p>
</div>

<script>

    var cpfInput = document.getElementById("cpf");
    var cpfInput = cpfInput.toString();
    var cpff = document.getElementById("cpff")

    // Esconde o paragrafo 'reqs' quando o usuário clicar em qualquer campo fora do formulário
    cpfInput.onblur = function() {
    document.getElementById("reqs").style.display = "none";
    }

    cpfInput.onkeyup = function() { 

      // Valida o campo cpf
      var inputCPF = /[0-9]/g;

      if(cpfInput.value.match(inputCPF)) {  
        cpff.classList.remove("invalid");
        cpff.classList.add("valid");
      }
      else {
        cpff.classList.remove("valid");
        cpff.classList.add("invalid");
      }

      // Valida a quantidade de caracteres no campo CPF
      if(cpfInput.value.length == 11) {
        cpff.classList.remove("invalid");
        cpff.classList.add("valid");
      }
      else {
        cpff.classList.remove("valid");
        cpff.classList.add("invalid");
      }
    }

</script>

</body>
</html>

Ответы [ 3 ]

0 голосов
/ 30 августа 2018

Если вы проверяете свой формат "CPF" с помощью javascript, нет необходимости включать атрибут "pattern" в вашу DOM. Если вы решите использовать атрибут «pattern» в своей DOM, используйте его правильно - регулярное выражение, которое вы вводите во все входы, означает: «должно содержать 8 или более символов, которые имеют по крайней мере одно число, и одну заглавную и строчную буквы ». Обычно подходит только для пароля

Проверьте w3schools для дальнейшего ознакомления.

P.s. вы объявляете переменную "cpfInput" дважды.

0 голосов
/ 30 августа 2018

В вашем поле cpf есть проверка шаблона регулярного выражения, которая, кажется, была скопирована из другого места ( (? =. \ d) (? =. [az]) ( ? =. * [AZ]). {8} ). Вы должны удалить его или заменить его шаблоном, который вы действительно хотите проверить, который должен быть: 

/[0-9]{11}/
0 голосов
/ 30 августа 2018

Во-первых, вам не нужно преобразовывать ваш элемент DOM в строку здесь: 

// You don't need this!
var cpfInput = cpfInput.toString();

Во-вторых, используйте другой шаблон RegEx для сопоставления 11 символов - /[0-9]{11}/g. В этом случае вам не нужно проверять длину строки впоследствии. Полная функция onkeyup может быть такой: 

cpfInput.onkeyup = function() { 
  // Valida o campo cpf
  var inputCPF = /[0-9]{11}/g;

  if(cpfInput.value.match(inputCPF)) {  
    cpff.classList.remove("invalid");
    cpff.classList.add("valid");
  }
  else {
    cpff.classList.remove("valid");
    cpff.classList.add("invalid");
  }
}
...