Question

我是JS的初学者，我想进行基本的HTML和JS验证。如何用2个输入（数字和提交）来完成？

    var edad =  document.getElementById("edad"),
 	    numero = edad.numero

    function validacion(){
        if (numero >= 18) {
      	   alert("eres mayor de edad");
        } else {
           alert("eres menor de edad");
        }
    }


 	edad.addEventListener("submit", validacion);

    <!DOCTYPE html>
    <html>
    <head>
	
	    <title></title>
    </head>
    <body>
	    <div id="edad">
		   <input type="number" name="numero"  class="numero">
		   <input type="submit" name="btn" value="enviar" class="btn">
		   <script type="text/javascript" src="1.js"></script>
	   </div>
</body>
</html>

Answer 1

您正在submit上设置事件侦听器，该事件侦听器指向div，但是div没有submit事件。

此外，您需要获取value中的input，并进行比较，而不是input元素本身。

此外，edad.numero不是访问input元素的正确方法。

最后，从HTML传入JavaScript的所有数据都是字符串，因此您需要将其转换为数字以对其进行数学运算。

如果您在form元素上设置了有效的侦听器，并引用了input的正确性，则代码将触发：

var edad =  document.getElementById("edad");
var numero = document.querySelector("input[name='numero']");

function validacion(event){
  event.preventDefault(); // prevents the form from submitting
  // The + converts the string to a number
  // And, you must get the value of the input, not the input itself
  if (+numero.value >= 18) {
    alert("eres mayor de edad");
  } else {
    alert("eres menor de edad");
  }
}

edad.addEventListener("submit", validacion);

<form id="edad">
  <input type="number" name="numero"  class="numero">
	<input type="submit" name="btn" value="enviar" class="btn">
</form>

Answer 2

html：

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

js代码：

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

基本js验证

2 个答案: