如下的两个不同的表单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()"函数,产生前台验证表单的效果。