pass的代码:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>表单验证通过!!!!</h1>
</body>
</html>
form.html的代码:
<html>
<head>
<title>JS程序开发</title>
<meta charset="utf-8" />
<script type="text/javascript" src="form.js">
</script>
</head>
<body>
<form action="pass.html" method="post" id="log">
登陆邮箱:<input type="text" name="email" id="email" />
<!--id与name属性要相同 -->
<br />
<button type="submit" id="sub">登陆</button>
</form>
</body>
</html>
form.js的代码:
window.onload = function(){//如果要表单不提交,则要用的onsubmit事件,如果这个事件返回值为false,则不提交表单
var hxy = document.getElementById("log");
hxy.addEventListener("submit",function(e){
var emailobj = document.getElementById("email");
if(emailobj.value == ""){
alert("您还没有输入登陆邮箱,无法登陆!");
e.preventDefault() ;//动态验证绑定时用这句话阻止浏览器的默认操作
}else{
if(/^\w+@\w+\.\w+$/.test(emailobj.value)){
this.submit();//当前对象提交表单
}else{
alert("您输入的地址不合法,请重新输入");
e.preventDefault() ;
}
}
},false);
}