gpt4 book ai didi

javascript - 基本的js验证

转载 作者:行者123 更新时间:2023-11-30 14:24:37 24 4
gpt4 key购买 nike

我是 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>

最佳答案

您正在 submit 上设置事件监听器,它指向 div,但是 div 没有 提交事件。

此外,您需要获取 inputvalue 并比较它,而不是 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>

关于javascript - 基本的js验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52141258/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com