js阻止表单提交的两种方法

63 阅读 0 评论 42 点赞

我是靠谱客的博主鲤鱼保温杯，最近开发中收集的这篇文章主要介绍js阻止表单提交的两种方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

下面直接看代码。


<!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标签下属性οnsubmit="return checkLength()"或 id="submit"的input标签下添加属性οnclick="return checkLength()"

上面的代码是两种方法的集合，可自己删减。