假设我们需要实现的是用户提交此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>