search

Home  >  Article  >  Backend Development  >  阻止表单提交怎么用onsubmit呢？

阻止表单提交怎么用onsubmit呢？

WBOY
WBOYOriginal
2016-06-23 13:13:511306browse

我在表单里面直接写onsubmit="return false;"  这样可以阻止表单提交   但是我弄了一个check函数先试了一下  这样就阻止不了提交  这是为什么   我没做过内容不合法阻止表单提交的例子    我这个代码写了很多个函数  如果不合法阻止表单提交的话怎么阻止呢？一个个加上return false这句话吗？ 

<!DOCTYPE html><html><head>    <meta charset="utf-8">	<title>			</title>	<style type="text/css">    div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;}    div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;}    div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;}	</style>	<script src="ajax.js"></script>	<script type="text/javascript">		window.onload=function(){			var oInput=document.getElementsByTagName('input');			var oIpt1=document.getElementById('ipt1');			var oIpt2=document.getElementById('ipt2');			var oIpt3=document.getElementById('ipt3');			var oIpt4=document.getElementById('ipt4');			var oSp1=document.getElementById('sp1');			var oSp2=document.getElementById('sp2');			var oSp3=document.getElementById('sp3');			var oSp4=document.getElementById('sp4');			oIpt1.value = '';			oIpt2.value = '';			$("input[type=reset]").trigger("click");			var re=/^[\w]{6,12}$/;			function check(){				return false;			};			oIpt1.onblur=function(){				if(oIpt1.value==''){					this.style.border='1px solid red';				}else{					ajax("nameajax.php?id="+oIpt1.value,function(str){					oSp1.innerHTML=str;				    })				}			}; 			oIpt2.onblur=function(){               if(oIpt2.value==''){               	this.style.border='1px solid red';               	               }else{               	  if(oIpt2.value.match(re)){               	  	oSp2.innerHTML='密码合法';               	  }else{               	  	oSp2.innerHTML='密码不合法';               	  }               }			}			oIpt3.onblur=function(){				if(oIpt3.value==''){               	this.style.border='1px solid red';               }else{               	if(oIpt2.value==oIpt3.value){               		oSp3.innerHTML='密码正确';               	}else{               		oSp3.innerHTML='密码不一致';               	}               }			};			oIpt4.onblur=function(){				if(oIpt4.value==''){					this.style.border='1px solid red';				}else{					ajax("emailajax.php?id="+oIpt4.value,function(str){					oSp4.innerHTML=str;				    })				}							};        };	</script></head><body><div>	<form action="reg.php" onsubmit="return check();" method="post">		<span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br />        <span class="span1">密　　码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br />        <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br />        <span class="span1">邮　　箱:</span><input type="text" id="ipt4"  name="email" autocomplete="off"><span id="sp4"></span><br />        <button type="submit">提交</button>	</form></div></body></html>


回复讨论(解决方案)

既然你是 onsubmit="return check();"
那么 check() 就应该有返回值呀！
你的 check 函数是怎么写的？不担心会有共享冲突吗？

把验证的代码 写到 check（） 函数里面就行了  通过就是 return true； 不通过就是 return false

既然你是 onsubmit="return check();"
那么 check() 就应该有返回值呀！
你的 check 函数是怎么写的？不担心会有共享冲突吗？


这样直接return一个false不行吗

既然你是 onsubmit="return check();"
那么 check() 就应该有返回值呀！
你的 check 函数是怎么写的？不担心会有共享冲突吗？


这样简单试了一下 第一个空着不写还是能提交过去啊
function check(){
if(oIpt1.value==''){
                    return false;
}
}; 

<!DOCTYPE html><html><head>    <meta charset="utf-8">	<title>			</title>	<style type="text/css">    div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;}    div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;}    div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;}	</style>	<script src="ajax.js"></script>	<script type="text/javascript">		window.onload=function(){			var oInput=document.getElementsByTagName('input');			var oIpt1=document.getElementById('ipt1');			var oIpt2=document.getElementById('ipt2');			var oIpt3=document.getElementById('ipt3');			var oIpt4=document.getElementById('ipt4');			var oSp1=document.getElementById('sp1');			var oSp2=document.getElementById('sp2');			var oSp3=document.getElementById('sp3');			var oSp4=document.getElementById('sp4');			oIpt1.value = '';			oIpt2.value = '';			$("input[type=reset]").trigger("click");			var re=/^[\w]{6,12}$/;			function check(){				//if(条件){				//	document.getElementById('form1').submit();				//}				return false;			};			oIpt1.onblur=function(){				if(oIpt1.value==''){					this.style.border='1px solid red';				}else{					ajax("nameajax.php?id="+oIpt1.value,function(str){					oSp1.innerHTML=str;				    })				}			}; 			oIpt2.onblur=function(){               if(oIpt2.value==''){               	this.style.border='1px solid red';               	               }else{               	  if(oIpt2.value.match(re)){               	  	oSp2.innerHTML='密码合法';               	  }else{               	  	oSp2.innerHTML='密码不合法';               	  }               }			}			oIpt3.onblur=function(){				if(oIpt3.value==''){               	this.style.border='1px solid red';               }else{               	if(oIpt2.value==oIpt3.value){               		oSp3.innerHTML='密码正确';               	}else{               		oSp3.innerHTML='密码不一致';               	}               }			};			oIpt4.onblur=function(){				if(oIpt4.value==''){					this.style.border='1px solid red';				}else{					ajax("emailajax.php?id="+oIpt4.value,function(str){					oSp4.innerHTML=str;				    })				}							};        };	</script></head><body><div>	<form action="reg.php" id="form1" onsubmit="return false" method="post">		<span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br />        <span class="span1">密　　码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br />        <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br />        <span class="span1">邮　　箱:</span><input type="text" id="ipt4"  name="email" autocomplete="off"><span id="sp4"></span><br />        <button type="button" onclick="check()">提交</button>	</form></div></body></html>

<!DOCTYPE html><html><head>    <meta charset="utf-8">	<title>			</title>	<style type="text/css">    div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;}    div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;}    div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;}	</style>	<script src="ajax.js"></script>	<script type="text/javascript">		window.onload=function(){			var oInput=document.getElementsByTagName('input');			var oIpt1=document.getElementById('ipt1');			var oIpt2=document.getElementById('ipt2');			var oIpt3=document.getElementById('ipt3');			var oIpt4=document.getElementById('ipt4');			var oSp1=document.getElementById('sp1');			var oSp2=document.getElementById('sp2');			var oSp3=document.getElementById('sp3');			var oSp4=document.getElementById('sp4');			oIpt1.value = '';			oIpt2.value = '';			$("input[type=reset]").trigger("click");			var re=/^[\w]{6,12}$/;			function check(){				//if(条件){				//	document.getElementById('form1').submit();				//}				return false;			};			oIpt1.onblur=function(){				if(oIpt1.value==''){					this.style.border='1px solid red';				}else{					ajax("nameajax.php?id="+oIpt1.value,function(str){					oSp1.innerHTML=str;				    })				}			}; 			oIpt2.onblur=function(){               if(oIpt2.value==''){               	this.style.border='1px solid red';               	               }else{               	  if(oIpt2.value.match(re)){               	  	oSp2.innerHTML='密码合法';               	  }else{               	  	oSp2.innerHTML='密码不合法';               	  }               }			}			oIpt3.onblur=function(){				if(oIpt3.value==''){               	this.style.border='1px solid red';               }else{               	if(oIpt2.value==oIpt3.value){               		oSp3.innerHTML='密码正确';               	}else{               		oSp3.innerHTML='密码不一致';               	}               }			};			oIpt4.onblur=function(){				if(oIpt4.value==''){					this.style.border='1px solid red';				}else{					ajax("emailajax.php?id="+oIpt4.value,function(str){					oSp4.innerHTML=str;				    })				}							};        };	</script></head><body><div>	<form action="reg.php" id="form1" onsubmit="return false" method="post">		<span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br />        <span class="span1">密　　码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br />        <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br />        <span class="span1">邮　　箱:</span><input type="text" id="ipt4"  name="email" autocomplete="off"><span id="sp4"></span><br />        <button type="button" onclick="check()">提交</button>	</form></div></body></html>


改了   不行  表单那里也改了
function check(){
                 if(oIpt1.value==''){                 
                       document.getElementById('form1').submit();              
                 }               
                 return false;    
}; 

<!DOCTYPE html><html><head>    <meta charset="utf-8">	<title>			</title>	<style type="text/css">    div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;}    div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;}    div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;}	</style>	<script src="ajax.js"></script>	<script type="text/javascript">		window.onload=function(){			var oInput=document.getElementsByTagName('input');			var oIpt1=document.getElementById('ipt1');			var oIpt2=document.getElementById('ipt2');			var oIpt3=document.getElementById('ipt3');			var oIpt4=document.getElementById('ipt4');			var oSp1=document.getElementById('sp1');			var oSp2=document.getElementById('sp2');			var oSp3=document.getElementById('sp3');			var oSp4=document.getElementById('sp4');			oIpt1.value = '';			oIpt2.value = '';			$("input[type=reset]").trigger("click");			var re=/^[\w]{6,12}$/;			function check(){				//if(条件){				//	document.getElementById('form1').submit();				//}				return false;			};			oIpt1.onblur=function(){				if(oIpt1.value==''){					this.style.border='1px solid red';				}else{					ajax("nameajax.php?id="+oIpt1.value,function(str){					oSp1.innerHTML=str;				    })				}			}; 			oIpt2.onblur=function(){               if(oIpt2.value==''){               	this.style.border='1px solid red';               	               }else{               	  if(oIpt2.value.match(re)){               	  	oSp2.innerHTML='密码合法';               	  }else{               	  	oSp2.innerHTML='密码不合法';               	  }               }			}			oIpt3.onblur=function(){				if(oIpt3.value==''){               	this.style.border='1px solid red';               }else{               	if(oIpt2.value==oIpt3.value){               		oSp3.innerHTML='密码正确';               	}else{               		oSp3.innerHTML='密码不一致';               	}               }			};			oIpt4.onblur=function(){				if(oIpt4.value==''){					this.style.border='1px solid red';				}else{					ajax("emailajax.php?id="+oIpt4.value,function(str){					oSp4.innerHTML=str;				    })				}							};        };	</script></head><body><div>	<form action="reg.php" id="form1" onsubmit="return false" method="post">		<span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br />        <span class="span1">密　　码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br />        <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br />        <span class="span1">邮　　箱:</span><input type="text" id="ipt4"  name="email" autocomplete="off"><span id="sp4"></span><br />        <button type="button" onclick="check()">提交</button>	</form></div></body></html>



提示这个错误
Uncaught ReferenceError: $ is not defined    27行

$是你jquery没引入吧

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：关于数组Next article：SonarQube PHP 2.8 发布

Related articles

See more