如下的两个不同的表单form1与form2，一个通过button按钮的Onclick事件去验证表单是否符合要求后才能提交，另一个通过form表单的οnsubmit="return xx()"的形式去验证。
这里先顺带插一句，没有οnsubmit="xx()"的形式，其中xx()是JavaScript中的验证函数，不加οnsubmit="xx()"打死都验证不了。
如下的代码：
<!DOCTYPE html>
<html>
<head>
<title>form表单的实验</title>
</head>
<body>
<h1>不使用OnSubmit与type='submit'的表单</h1>
<form action="2.html" method="post" id="form1">
<input type="text" id="form1_text" />
</form>
<button οnclick="form1_check()">提交</button>
<h2>使用OnSubmit与type='submit'的表单</h1>
<form action="2.html" method="post" οnsubmit="return form2_check()">
<input type="text" id="form2_text" />
<input type="submit" value="提交" />
</form>
</body>
</html>
<script>
function form1_check(){
var form1_text=document.getElementById("form1_text").value;
if(form1_text!="1"){
alert("请输入1");
return false;
}
else{
document.getElementById("form1").submit();
}
}
function form2_check(){
var form2_text=document.getElementById("form2_text").value;
if(form2_text!="1"){
alert("请输入1");
return false;
}
else{
return true;
}
}
</script>
看似皆能完成对文本框输入的是否为1的验证，才跳转到2.html，然而使用button按钮的Onclick事件去验证表单是否符合要求后才能提交，问题就出现了，如上图，尽管form1中没有提交按钮input type="submit"，却可以直接在文本框上任何东西都不输入，直接按回车进行验证。此时的回车就是扮演了input type="submit"按钮的作用，无论html代码中是否有这个按钮。由于form1的表单验证处于button按钮的Onclick事件，而直接没有onsubmit函数，所以，在form1中，按回车，无论输入的是否为1，皆能够跳转到2.html。
反观下方的form2，无论是按回车好、鼠标按回车按钮好，都要经过验证的οnsubmit="return xx()"函数，产生前台验证表单的效果。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
