杭州交通信息网湖南省军区郭辑山简历:javascript怎么阻止表单提交?
来源：百度文库 编辑：杭州交通信息网 时间：2024/04/28 15:45:14
<script LANGUAGE="javascript">
<!--
function form1() {
if (document.form1.gkxm.value=="")
{
alert("请输入顾客姓名!")
document.form1.gkxm.focus()
return false
}
else if(document.form1.gkdh.value=="")
{
alert("请输入顾客电话!")
document.form1.gkdh.focus()
return false
}
else if(document.form1.gkdz.value=="")
{
alert("请输入地址！")
document.form1.gkdz.focus()
return false
}
else if(document.from1.gklx.value=="")
{
alert("顾客类型不能为空！")
document.form1.from.focus()
return false
}
}
阻止form提交数据，有几种简单的办法：
form表单的action地址不正确，这样就无法提交到正确的地址。
限制submit事件。只需要将按钮设置成disabled就可以了。
下面是简单的代码实现，仅供参考：
<style>
input{ border:1px solid #000;}
.error{ border:1px solid red;}
.ok{ border:1px solid green;}
span{ color:red;}
</style>
<script src="form.js"></script> //这个文件是进行表单认证的js文件
<script>
window.onload=function(){
checkForm('form',function(obj){
var oPass=document.getElementsByName('pass')[0];
var oBtn = document.getElementById('btn');
if(oPass.value!=obj.value){
oBtn.disabled = 'disabled';//当检查有错时，然按钮无效；
}
});
};
</script>
</head>
<body>
<form id="form" action="
<div>
pass:<input type="text" name="pass" err_tip="*密码格式有误"><span></span>
</div>
<div>
pass2:<input type="text" name="pass2" err_tip="*密码不一致"><span></span>
</div>
<input id="btn" type="submit">
<input type="reset">
</form>
</body>
验证函数触发写在表单的onsubmit事件里
<form action="chuli.asp" method="post" name="form1" onsubmit="javascript:return form1ChK()">
顾客姓名<input type="text" name="gkxm"><br>
顾客电话<input name="gkdh" type="text"><br>
顾客地址<input name="gkdz" type="text"><br>
顾客类型<input name="gklx" type="text"><br>
<input type="submit" name="submit">
</form>
<script language="javascript">
function form1ChK()//函数不要和表单同名
{
if (document.form1.gkxm.value=="")
{
alert("请输入顾客姓名!")
document.form1.gkxm.focus()
return false
}
else if(document.form1.gkdh.value=="")
{
alert("请输入顾客电话!")
document.form1.gkdh.focus()
return false
}
else if(document.form1.gkdz.value=="")
{
alert("请输入地址！")
document.form1.gkdz.focus()
return false
}
else if(document.form1.gklx.value=="")//原来是from1.gklx.value，应该是form1
{
alert("顾客类型不能为空！")
document.form1.gklx.focus()//原来是document.form1.from.focus()，应该是form1
return false
}
}
</script>
把上面的方法加在表单中<form actiong="" onSubmit="return form1()">
你在form1()方法里最后最好加一名return true:
<script LANGUAGE="javascript">
<!--
function form1() {
if (document.form1.gkxm.value=="")
{
alert("请输入顾客姓名!")
document.form1.gkxm.focus()
return false
}
else if(document.form1.gkdh.value=="")
{
alert("请输入顾客电话!")
document.form1.gkdh.focus()
return false
}
else if(document.form1.gkdz.value=="")
{
alert("请输入地址！")
document.form1.gkdz.focus()
return false
}
else if(document.from1.gklx.value=="")
{
alert("顾客类型不能为空！")
document.form1.from.focus()
return false
}
return true;//加在这里
}
在submit按按钮上加上一句：
onSubmit = form1();
这样不可以吗？
如果要保险一点的话，提交按钮不要用submit
直接用一个button。再来一个onClick()=form1();
稍微修改一下js代码：
else if(document.from1.gklx.value=="")
{
alert("顾客类型不能为空！")
document.form1.from.focus()
return false
}
document.formName.submit();
提交表单的按钮不要用 submit 按钮 用普通的 button按钮
在button按钮上添加提交事件 在事件中 编写不满足的if(){}else if(){}
最后的else{}中添加 你的 [form名称属性的值].submit();
<form onsubmit='f()'>
function f(){
return false;
}