表单验证2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注册页面</title>
<style type="text/css">
.blank{
height: 100px;
}
h2{
color: coral;
}
.a{
width: 300px;
height: 30px;
text-align:center;
}
#btn{
background-color: blue;
color: azure;
height: 40px;
width: 350px;
margin: 0px;
padding: 0px;
text-align: center;
}
.b{
height: 600px;
text-align: center;
/*background-image: linear-gradient( azure ,aqua);*/
/*background-image: url(img/未标题-1.jpg);*/
}
font{
margin-left: 30px;
}
</style>
</head>
<body style="background-image: url(img/未标题-1.jpg);">
<div class="b">
<font color="aliceblue"><h1>欢迎注册邮箱</h1></font>
<div class="blank"></div>
<h2>邮箱注册</h2>
<form action="#" onSubmit="return checkForm()">
<p>
<label for=""> 邮箱号码 :</label>
<input type="text" value="" placeholder="请输入你的邮箱号码" class="a" id="text1"onBlur="Em()" oninput="Em()"/><br />
<span id="error1"class=""><font size="2"color="darkgrey">6-18个字符，可以使用字母，数字下划线 可以以字母开头</font></span>
</p>
<p>
<label for=""> 密 码 :</label>
<input type="password" value="" placeholder="请输入你的密码" class="a" id="Pasword1"onBlur="checkPassword()" oninput="checkPassword()"/><br />
<span id="error2" class="default"><font size="2"color="darkgrey">6-16个字符,区分大小写</font></span>
</p>
<p>
<label for="">确认密码:</label>
<input type="password" value="" placeholder="重新输入你的密码" class="a" id="Pasword2"onBlur="ConfirmPassword()" oninput="ConfirmPassword()"/><br />
<span id="error3" class="default"><font size="2"color="darkgrey">6-16个字符,区分大小写</font></span>
</p>
<p>
<input type="submit" value="登录" placeholder="" id="btn"/>
</p>
</div>
</form>
<script type="text/javascript">
function checkForm(){
var Email=Em();
var passtip = checkPassword();
var conpasstip = ConfirmPassword();
return passtip && conpasstip && Em;
}
function Em() {
var Em = document.getElementById('text1');
var EmErr = document.getElementById('error1');
var pattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; //验证邮箱正则表达式
if(!pattern.test(Em.value)) {
EmErr.innerHTML = "<font color='red' size='3'>邮箱不合规范</font>"
return false;
} else {
EmErr.innerHTML = "<font color='cadetblue' size='3'>输入正确</font>"
return true;
}
}
// //验证密码
function checkPassword() {
var userpasswd = document.getElementById('Pasword1');
var errPasswd = document.getElementById('error2');
var pattern = /123123/; //密码要在4-8位
if(!pattern.test(userpasswd.value)) {
errPasswd.innerHTML = "<font color='red' size='3'>密码不合规范</font>"
return false;
} else {
errPasswd.innerHTML = "<font color='cadetblue' size='3'>输入正确</font>"
return true;
}
}
//确认密码
function ConfirmPassword() {
var userpasswd = document.getElementById('Pasword1');
var userConPassword = document.getElementById('Pasword2');
var errConPasswd = document.getElementById('error3');
if((userpasswd.value) != (userConPassword.value) || userConPassword.value.length == 0) {
errConPasswd.innerHTML = "<font color='red' size='3'>上下密码不一致</font>"
return false;
} else {
errConPasswd.innerHTML = "<font color='cadetblue' size='3'>输入正确</font>"
return true;
}
}
</script>
</body>
</html>
