要求
1.邮箱地址和密码均不能为空
2.密码不能少于6位
3.邮箱地址必须包含@和.
4.实现文本输入的即时提示效果,即当文本框失去焦点时,如格式不合法,提示原因
5.如果输入的邮箱地址密码均合法,则提交表单
<style type="text/css">
body{
font-size: 16px;
}
.txt{
border: 1px solid #ccc;
width: 160px;
}
h1{
text-align: center;
}
#register{
text-align: center;
}
</style>
<h1>验证用户输入的电子邮箱和密码是否合法</h1>
<div id="register">
<!-- check()的返回值如果是false,浏览器取消对onsubmit时间的默认处理 -->
<form action="http://www.baidu.com" onsubmit="return check()">
<p>
<label for="">邮箱</label>
<!-- 失去焦点后,验证格式,如果非法,即时提示 -->
<input type="text" id="email" class="txt" placeholder="请输入邮箱" value="" onblur="checkEmail()">
<span id="span-email"></span>
</p>
<p>
<label for="">密码</label>
<input type="password" id="pwd" class="txt" placeholder="请输入密码" value="" onblur="checkPwd()">
<span id="span-pwd"></span>
</p>
<input type="submit" value="提交">
</form>
</div>
<script type="text/javascript">
function $(id){
//获取HTML页面中指定id的元素
return document.getElementById(id);
}
function check(){
if(checkEmail() && checkPwd()){
return true;
}
return false;
}
function checkEmail(){
var email=$("email").value;
var obj=$("span-email");
obj.innerHTML="";
if(email==""){
obj.innerHTML="Email地址不能为空";
return false;
}
if(email.indexOf("@")==-1){
obj.innerHTML="Email地址格式不正确,必须包含@";
return false;
}
if(email.indexOf(".")==-1){
obj.innerHTML="Email地址格式不正确,必须包含.";
return false;
}
return true;
}
function checkPwd(){
var pwd=$("pwd").value;
var obj=$("span-pwd");
obj.innerHTML="";
if(pwd==""){
//使用innerHTML属性设置<span>标签中的内容
obj.innerHTML="密码不能为空";
return false;
}
if(pwd.length<6){
//使用innerHTML属性设置<span>标签中的内容
obj.innerHTML="密码必须等于或大于6个字符";
return false;
}
return true;
}
</script>