Question

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

Answer 1

首先，您无需在此处将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");
  }
}

Answer 2

如果您要使用javascript验证“ CPF”格式，则无需在DOM中包括“ pattern”属性。如果您决定在DOM中使用“模式”属性，请正确使用它-您在所有输入中输入的正则表达式表示：“必须包含8个或更多字符，至少包含一个数字，以及一个大写和小写字母”。这通常只适合密码

检查JSON specification 以获得更多参考。

P.s。您将两次声明“ cpfInput”变量。

Answer 3

您的cpf字段具有正则表达式模式验证，该验证似乎已从其他位置复制粘贴（（？=。 \ d）（？=。 [az]）（？=。* [AZ]）。{8，} ）。您应该删除它或将其替换为您实际要验证的模式，该模式应为：

/[0-9]{11}/

如何验证具有特定编号的角色的表单

3 个答案: