停止制作表格以重新加载JavaScript页面

假设我们需要实现的是用户提交此HTML表单时,我们在客户端处理Submit事件,并阻止浏览器在表单提交后立即重新加载

HTML表格

<form name="formcontact1" action="#">
<input
type='text'
name='email'
size="36"
placeholder="Your e-mail :)"/>
<input
   type="submit"
   name="submit"
   value="SUBMIT"
   onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>

现在,最简单,最可靠的方法是调整我们的ValidateEmail()函数,在其定义的顶部包括以下行:

function ValidateEmail(event, inputText){
   event.preventDefault();
   //remaining function logic goes here
}

preventDefault()的作用是告诉浏览器阻止其默认行为,并让我们在客户端本身上处理表单提交事件。

完整的HTML代码是-

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="formcontact1" action="#">
<input
type='text'
name='email'
size="36"
placeholder="Your e-mail :)"/>
<input
   type="submit"
   name="submit"
   value="SUBMIT"
   onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>
<script>
{
   function ValidateEmail(event, inputText){
      event.preventDefault();
      //remaining function logic goes here
   }
}
</script>
</body>
</html>