下面直接看代碼。
<!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()"
上面的代碼是兩種方法的集合，可自己刪減。