<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src= "js/jquery-1.8.3.js"></script>
<script type="text/javascript" src= "js/jquery.validate.min.js"></script>
<script type="text/javascript" src= "js/messages_zh.js"></script>
<style>
table{
800px;
height: 500px;
margin: auto;
}
#a{
800px;
height:90px;
margin: auto;
border-bottom:2px solid red;
}
#a1{
float: left;
font-weight: 400;
}
#a2{
float: right;
color: #FF0000;
padding: 4px;
}
#a3{
120px;
text-align:right;
font-size: 25px;
}
#a4{
400px;
}
#a4 input{
300px;
height: 50px;
}
#a5 input{
150px;
height: 50px;
}
#a5{
100px;
height: 50px;
background-image:url(img/yanzhengma.png);
background-repeat:no-repeat ;
background-position: -150px -315px;
}
#a6{
margin: auto;
}
#a6 input{
400px;
height: 60px;
margin-left:100px ;
background:#FF6600 ;
border: transparent;
font-size: 30px;
color: white;
}
</style>
<script>
$(function(){
$("#biaoge").validate({
rules:{
mingzi:{
required:true,
maxlength:6
},
mima:{
required:true,
minlength:6
},
querenmima:{
required:true,
minlength:6
},
youxiang:{
required:true,
email:true
},
yanzhengma:{
required:true,
maxlength:4
}
},
messages:{
mingzi:{
required:"用户名不能为空",
maxlength:"用户名不能多于6"
},
mima:{
required:"密码不能为空",
minlength:"密码不能少于6"
},
querenmima:{
required:"密码不能为空",
minlength:"密码不能少于+"
},
youxiang:{
required:"邮箱不能为空",
email:"邮箱格式不正确"
},
yanzhengma:{
required:"验证码不能为空",
maxlength:"验证码不能多于4"
}
}
});
});
</script>
</head>
<body>
<div>
<div id="a">
<h1 id="a1">会员注册</h1>
<h4 id="a2">小米商城</h4>
</div>
<form method="post" id="biaoge" action="#">
<table>
<tr>
<td id="a3">用 户 名：</td>
<td id="a4">
<input type="text" name="mingzi" placeholder=" 请输入你的用户名">
</td>
</tr>
<tr>
<td id="a3">密 码：</td>
<td id="a4">
<input type="password" name="mima" placeholder=" 请输入你的密码"/>
</td>
</tr>
<tr>
<td id="a3">确认密码：</td>
<td id="a4">
<input type="password" name="querenmima" placeholder=" 请确认你的密码">
</td>
</tr>
<tr>
<td id="a3">邮 箱：</td>
<td id="a4">
<input type="email" name="youxiang" placeholder=" 请输入你的邮箱">
</td>
</tr>
<tr>
<td id="a3">验 证 码：</td>
<td id="a5">
<input type="text" name="yanzhengma" placeholder=" 请输入验证码 ">
</td>
</tr>
<tr id="a6">
<td colspan="2">
<input type="submit" value="立即注册">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>