可以实现用户名,密码,邮箱的规范验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面 </title>
<style>
body{
background: url("../image/1.jpg") no-repeat center;
}
.div1 {
width: 900px;
height: 650px;
border: 3px solid #EEEEEE;
background: white;
margin: auto;
/*居中*/
margin-top: 25px;
/*距离顶部边框的距离*/
}
.div2{
float: left;
margin: 50px;
}
.div3{
float: left;
margin-top: 30px;
}
.div4{
float: right;
margin:15px;
}
.div2 > p:first-child{
color: gold;
font-size: 20px;
}
.div2>p:last-child{
/*设置父类是div2的p标签*/
color: #A6A6A6;
font-size: 20px;
}
.left{
width: 150px;
text-align: right;
height: 60px;
}
.right{
padding-left: 20px;
}
#username,#email,#number,#password,#name,#code,#birthday{
width: 251px;
height: 32px;
border:1px solid #A6A6A6;
border-radius: 5px;
/*设置圆角边框 */
padding-left: 5px;
/*方框里字距离左边框的距离 */
}
#code{
width: 110px;
}
#button{
margin-top: 20px;
width: 110px;
height: 50px;
background-color: gold;
border : 1px solid gold;
}
#error{
/*定义class标签*/
color: red;
}
</style>
</head>
<body>
<script>
window.onload=function () {
document.getElementById("form").onsubmit=function () {
return checkusername() && checkpassword() && checkemail();
}
//失去焦点事件绑定的是方法对象,不是方法,所以没有小括号
document.getElementById("username").onblur = checkusername;
document.getElementById("password").onblur = checkpassword;
document.getElementById("email").onblur = checkemail;
}
function checkusername() {
var username = document.getElementById("username").value;
var re_username=/^\w{6,12}$/;
var flag = re_username.test(username);
var im_username = document.getElementById("im_username");
if(flag){
im_username.innerHTML="<img width='35' height='25' src='../image/对号2.jpg'/>"
}else{
im_username.innerHTML="<img width='35' height='25' src='../image/错误号.jpg'/>"
}
return flag;
}
function checkpassword() {
var password = document.getElementById("password").value;
var re_password=/^\w{6,12}$/;
var flag = re_password.test(password);
var im_password = document.getElementById("im_password");
if(flag){
im_password.innerHTML="<img width='35' height='25' src='../image/对号2.jpg'/>"
}else{
im_password.innerHTML="<img width='35' height='25' src='../image/错误号.jpg'/>"
}
return flag;
}
function checkemail() {
var email = document.getElementById("email").value;
//获取输入框的值
var re_email=/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
var flag = re_email.test(email);
//将获取的值与正则表达式比较
var im_email = document.getElementById("im_email");
//获取span标签中的对象
if(flag){
im_email.innerHTML="<img width='35' height='25' src='../image/对号2.jpg'/>"
//修改span标签对象
}else{
im_email.innerHTML="<img width='35' height='25' src='../image/错误号.jpg'/>"
}
return flag;
}
</script>
<div class="div1">
<div class="div2">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="div3">
<div class="rg_form">
<form action="#" id="form" method="post">
<table >
<tr>
<td class="left"><label for="username">请输入用户名:</label></td>
<td class="right"><input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="im_username" class="error"></span>
</td>
</tr>
<tr>
<td class="left"><label for="password">请输入密码:</label></td>
<td class="right"> <input type="text" name="password" id="password" placeholder="请输入密码">
<span id="im_password" class="error"></span>
</td>
</tr>
<tr>
<td class="left"><label for="email">请输入Email:</label></td>
<td class="right"><input type="email" name="email" id="email" placeholder="请输入email">
<span id="im_email" class="error"></span>
</td>
</tr>
<tr>
<td class="left"><label for="name">请输入姓名:</label></td>
<td class="right"><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
</tr>
<tr>
<td class="left"><label for="number">请输入手机号:</label></td>
<td class="right"><input type="number" name="number" id="number" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="left">请选择性别:</td>
<td class="right"><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td class="left">出生日期:</td>
<td class="right"><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td class="left"><label for="code">请输入验证码:</label></td>
<td class="right"><input name="code" id="code">
<img src="../image/code.jpg" width="60" height="50">
</td>
</tr>
<tr align="center">
<td colspan="2"> <input type="submit" id="button"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="div4">
<P>已有账号?<a href="#">立即登录</a></P>
</div>
</div>
</body>
</html>
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/473a5e055a18bd1942227f7f32ec8b40.png)