验证表单，将表单输入分配给字符串并在JavaScript中显示

Question

因此，我一直在破解此代码，无法弄清楚发生了什么。

基本上，我必须验证此表单，并将每个输入分配为字符串，然后再显示。 现在，我什至无法掌握验证，因为它根本无法工作，当我单击“ adicionar”按钮时，页面就会刷新。 如果表单为空，则应显示警报，对于年龄输入，如果不是数字或<= 0 ，则应显示警报。

这是JavaScript和HTML：

 window.onload = function code(){ function validarForm() { var company = document.getElementById('empresa').value; var name = document.getElementById('nome').value; var team = document.getElementById('time').value; var age = document.getElementById('idade').value; if (company == '' || company == null) { alert("O campo Empresa é obrigatório!"); return false; } if (name == '') { alert("O campo Nome é obrigatório!"); return false; } if (team == '') { alert("O campo Time é obrigatório!"); return false; } if (isNaN(age) || age <= 0) { alert("Escreva um número maior que 0!"); return false; } } document.getElementsByClassName("add").onclick = function() {validateForm()}; }; 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cadastro de Desenvolvedores</title> <style> .debug { font-family: monospace; border: 1px solid black; padding: 10px; display: none; } </style> </head> <body> <h1>Cadastros de desenvolvedores</h1> <div class="cadastro"> <ol class="desenvolvedores"></ol> <form> <div> <label>Empresa <input type="text" name="empresa"> </label> </div> <div> <label>Nome <input type="text" name="nome"> </label> </div> <div> <label>Idade <input type="text" name="idade"> </label> </div> <div> <label>Time <select name="time"> <option value="">---</option> <option value="front">Frontend</option> <option value="back">Backend</option> <option value="infra">Infraestrutura</option> <option value="telecon">Telefonia</option> <option value="outro">Outro</option> </select> </label> </div> <div> <label>Tecnologias <select multiple name="tec"> <option value="js">Javascript</option> <option value="php">PHP</option> <option value="java">Java</option> <option value="ruby">Ruby</option> <option value="python">Python</option> <option value="perl">Perl</option> </select> </label> </div> <div> <label>Estágio? <input type="checkbox" name="smoker"> </label> </div> <div> <button class="add">adicionar</button> </div> <div> <button type="submit">enviar</button> </div> </form> </div> <pre class="debug"></pre> <script type="text/javascript" src="./index.js"></script> </body> </html> 

另外，需要注意的是，分配要求不应直接更改HTML文件（只能通过javascript进行更改），并且不允许使用JavaScript库（甚至jQuery）。 抱歉，某些代码不是英语的，因为我是巴西人。

Answer 1

getElementsByClassName将返回一个项目数组。 将class更改为id="add"以使click函数起作用

Answer 2

好。 从哪儿开始！ 正如Kody所说，getElementsByClassName返回一个元素数组。 由于该类只有一个元素，您可以使用

document.getElementsByClassName("add")[0].onclick = function() {return validarForm()};

还要注意，该函数是validatearForm（）而不是validateForm（），您需要添加“ return”，否则它将提交。

您不能使用getElememtById来获取文本框的值，因为它们没有ID设置，只是一个名称。 所以你将不得不使用输入

document.getElementsByTagName('input')

请注意，这也会返回一个元素数组供您使用。