阅读量:0
1 代码示例
要判断输入值是数字还是字母，我们可以通过JavaScript获取输入框的值，然后使用isNaN函数来检查输入值是否为数字。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function() { const { myForm } = document.forms; if (myForm) { myForm.addEventListener('submit', (e) => { e.preventDefault(); const x = myForm.age.value; if (isNaN(x)) { alert("必须输入数字"); } }); } }; </script> </head> <body> <form name="myForm"> 年龄: <input type="text" name="age"> <input type="submit" value="提交"> </form> </body> </html> 以上代码中我们通过JavaScript代码来获取表单，并检查age字段中是否输入了数字。
2 代码讲解
2.1 获取表单元素
const { myForm } = document.forms;通过document.forms获取表单，并使用解构赋值的方式获取我们需要的myForm表单。
2.2 添加提交事件监听器
myForm.addEventListener('submit', (e) => { e.preventDefault();使用addEventListener方法监听表单的submit事件，并在事件触发时执行回调函数。回调函数中，首先调用e.preventDefault()来阻止表单的默认提交行为。
2.3 获取输入框的值
const x = myForm.age.value;从表单中获取age输入框的值。
2.4 检查输入值是否为数字
if (isNaN(x)) { alert("必须输入数字"); }使用isNaN函数检查输入值是否为数字。如果isNaN返回true，说明输入的不是数字，此时弹出警告框提示用户“必须输入数字”。
