我最近开始进行表单验证,我正在尝试理解某些内容。我还没有在SE上的任何其他地方找到这个。
如果onsubmit="return validateForm()"
元素中有onsubmit="validateForm()"
或<form>
,则表单不会执行任何操作。但是,当我从表单标记中删除onsbumit
而不是在JS文件中执行document.forms["favorite"].onsubmit = function validateForm()
时,它可以正常工作。
我得到了它的工作,但我试图理解为什么html中onsubmit
的“正常”方法不起作用。
供参考,这是我现在的代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="form.js"></script>
<title>Form</title>
</head>
<body>
<form name="favorite" action="#" method="post">
Favorite Car Brand: <input type="text" name="car">
<input type="submit" value="Submit">
</form>
</body>
</html>
JS:
window.onload = function(){
document.forms["favorite"].onsubmit = function validateForm(){
var input = document.forms["favorite"]["car"].value;
if(input == ""){
alert("You missed an entry");
return false;
}
}
}
答案 0 :(得分:0)
首先我们定义一个函数然后调用该函数。并且在定义之前调用该函数,因为您正在使用window.load.You需要在window.load之前定义验证函数。抱歉我的英语不好。
<script>
window.onload = function () {
function validateForm() {
var input = document.forms["favorite"]["car"].value;
if (input == "") {
alert("You missed an entry");
return false;
}
}
}
</script>
在window.load之前定义validateForm()
函数你不需要在window.load中编写这个函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
<script>
function validateForm() {
var input = document.forms["favorite"]["car"].value;
if (input == "") {
alert("You missed an entry");
return false;
}
}
</script>
</head>
<body>
<form name="favorite" action="#" onsubmit="return validateForm();" method="post">
Favorite Car Brand: <input type="text" name="car">
<input type="submit" value="Submit">
</form>
</body>
</html>