如何验证具有特定字符数的表单

Question

如何验证具有特定字符数的表单

3

我正在尝试构建一个验证表单的代码。当用户在“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>

- Dimitri

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ischenkodv · Answer 1

首先，在这里不需要将您的DOM元素转换为字符串：

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

其次，使用不同的正则表达式模式匹配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");
  }
}

- Raptord · Answer 2

你的CPF字段采用了一个正则表达式模式进行验证，看起来是从其他地方复制并粘贴而来的((?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,})。你应该将其删除或替换为你真正想要验证的模式，即：

/[0-9]{11}/

- Fabio Manzano · Answer 3

如果您正在使用JavaScript验证“CPF”格式，则无需在DOM中包含“pattern”属性。但是，如果您决定在DOM中使用“pattern”属性，请正确使用--您在所有输入中放置的正则表达式意味着：“必须包含至少一个数字、一个大写字母和一个小写字母的8个或更多字符”。这通常仅适用于密码。

请参阅w3schools以获取进一步的参考信息。

附注：您声明了“cpfInput”变量两次。