代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkLength(){
var name=document.getElementById('user').value;
if(name.length<5){ console.log(name);
return false;
}else{
return true;
}
}
window.onload=function(){
var mysubmit=document.getElementById('submit');
mysubmit.onclick=function(event){
var name=document.getElementById('user').value;
if(name.length<5){ event.preventDefault(); }
else{ }
}
}
</script>
</head>
<body>
<form action="clock.html" method="post" onsubmit="return checkLength()">
<p>name:<input type="text" name="user" id="user"></p>
<input type="submit" id="submit" name="submit">
</form>
</body>
</html>
clock.html是我自己的一个时钟页面。
先看第一种方法:利用event的阻止默认事件机制,页面载入之后获得submit元素,然后为submit注册click响应函数,参数为event事件。
在用户点击submit触发响应函数后,直接event.preventDefault();阻止表单转跳的默认事件。
第二种方法:在表单form标签下属性onsubmit="return checkLength()"或 id="submit"的input标签下添加属性onclick="return checkLength()"
上面的代码是两种方法的集合,可自己删减。当然还有其他的方式,自己思考
又找到一个更好的方式 部分代码如下
<script Language='JavaScript'>
function formsubmit() {
Today = new Date();
var NowHour = Today.getHours();
var NowMinute = Today.getMinutes();
var NowSecond = Today.getSeconds();
var mysec = (NowHour*3600)+(NowMinute*60)+NowSecond;
if((mysec-document.formsubmitf.mypretime.value)>600)
//600只是一个时间值,就是5分钟内禁止重复提交,值随你高兴设
{
document.formsubmitf.mypretime.value=mysec;
}
else
{
alert(' 按一次就够了,请勿重复提交!请耐心等待!谢谢合作!');
return false;
}
document.forms.formsubmitf.submit();
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<form name=formsubmitf id ="the" method="post" action="XXX.asp">
<input type=hidden name='mypretime' value='0'> //这句不能少,用隐含变量传递一个时间初值
//这里是你要提交的内容
<input type="button" value="写好了" name="button1" class="4round" onclick='formsubmit()'> <font class="red">(请按一次,耐心等待!)</font> <input type="reset" value="重 写" name="button2" class="4round">
</form>