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