html中如何使用 Javascript 实现防止表单反复提交

最新推荐文章于 2024-01-09 20:47:12 发布

大白sunny

最新推荐文章于 2024-01-09 20:47:12 发布

阅读量4.5k

点赞数

文章标签： javascript html input stylesheet action 服务器

本文链接：https://blog.csdn.net/bailu66/article/details/6909353

版权

<!DOCTYPE html>
<html>
  <head>
    <title>register.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <div align="center">
    	<div align="center">
    		<h1>用户注册页面</h1>
    		<hr color="red"/>
    	</div>
    	<div>
    	<form action="./register.do"method="post" οnsubmit="return checkForm()">
    		用户名：<input type="text" name = "uname"/><br>
    		密   码：<input type="password" name="upass"/>
    		性别:<input type="radio" name="usex"value="man"/>男
    			<input type="radio" name="usex"value="woman"/>女
    		年龄：<input type="text" name ="uage"/>必须输入1-120之间的数！
    		<input type="submit"value="注册"/>
    		<input type="reset"value="重置"/>
    		</form>
    	</div>
    </div>
  </body>
</html>
<script type="text/javascript">
	var ischeck = false;
	function checkForm(){
		if(!ischeck){
			ischeck=true;
		}else{
			alert("无需重复提交！");
			ischeck=false;
		}
		return ischeck;
	}
</script>

这个页面的代码如上所示：

上面的代码仅是html页面代码和 javascript代码

下面说下 javascript 防止重复提交的实现过程和应用案例！

大家都遇到过这种情况就是，在注册网站的时候因为网站的服务器响应慢，我们在注册的时候就会多次点击注册按钮，也就是注册注册注册……

这样给网站服务器带来了更大的负担，所以就会应用这样一种办法就是只要用户点击了一次注册按钮注册按钮就会被锁定从而用户不能再次点击！

javascript 实现代码为

<form action="./register.do"method="post" οnsubmit="return checkForm()">

上面这行代码主要的就是 submit="return checkForm()" 这条语句！也就是当点击 ’提交‘ 按钮的时候返回checkForm结果！如果返回’真‘的则能提交如果返回’假‘则不能提交并给出相应的提示！

<script type="text/javascript">
	var ischeck = false;
	function checkForm(){
		if(!ischeck){
			ischeck=true;
		}else{
			alert("无需重复提交！");
			ischeck=false;
		}
		return ischeck;
	}
</script>

<javaScrpit> 语句体的功能就是完成验证，如果 ischeck为真则可以提交，如果ischeck为假的时候则不能提交！

*新手请多多关照，如有错误请回复指出！