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

<!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为假的时候则不能提交!

 

 

*新手请多多关照,如有错误请回复指出!

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

大白sunny

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值