<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
}
#login{
width: 100%;
height: 680px;
min-width: 1300px;
background: url("bac.jpg");
}
.login-wrap{
position: absolute;
top: 100px;
right: 130px;
width: 340px;
height: 320px;
background: white;
}
.form-warp{
overflow: hidden;
width: 100%;
height: 225px;
border-bottom: 1px solid red;
}
.dis{
display: block;
margin: auto;
}
input[name="user"]{
margin-top: 30px;
}
input[name="user"],input[name="pwd"]{
width: 255px;
height: 40px;
margin-bottom: 20px;
border-radius: 5px ;
border: 1px solid aquamarine;
}
input[type="submit"]{
width: 100px;
height: 44px;
float: left;
margin-left: 40px;
}
input[type="button"]{
width: 100px;
height: 44px;
float: right;
margin-right: 40px;
}
img{
width: 35px;
height: 35px;
}
.line{
text-align: center;
}
.error{
color: red;
}
</style>
<script src="jquery-2.1.0.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js">
</script>
<script >
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
$(function(){
$("#myForm").validate({
rules: {
user: {
required : true,
minlength : 11,
// 自定义方法：校验手机号在数据库中是否存在
// checkPhoneExist : true,
isMobile : true
},
},
messages : {
user : {
required : "请输入手机号",
minlength : "确认手机不能小于11个字符",
isMobile : "请正确填写您的手机号码"
},
},
});
});
</script>
</head>
<body>
<div id="login">
<div class="login-wrap">
<div class="form-warp">
<form id="myForm" action="">
<input type="text" name="user" placeholder="请输入账号" class="dis" />
<input type="password" name="pwd" placeholder="请输入密码" class="dis" />
<input type="submit" class="dis" value="登录"/>
<input type="button" class="dis" value="注册"/>
</form>
</div>
<div class="line">
<p>使用其他方式登录:<a href="#"> <img src="weixin.jpg" /> </a>
<a href="#"> <img src="qq.jpg" /> </a>
</p>
</div>
</div>
</div>
</body>
</html>
indexs.zip （6个子文件） 
indexs 
.project 661B
index.html 3KB
bac.jpg 1.22MB weixin.jpg 8KB jquery-2.1.0.js 239KB qq.jpg 6KB资源评论
魏水华2023-07-24登录注册页面的样式简洁而不失美观，给人一种简洁大方的感觉。
Orca是只鲸2023-07-24这个登录注册页面的响应速度很快，加载速度快，给用户带来了良好的体验。
奔跑的楠子2023-07-24这个登录注册页面的设计简洁实用，让用户一目了然，很容易上手。
練心2023-07-24文件中的代码结构清晰，易于阅读和修改，方便开发者们进行二次开发。
赶路的稻草人2023-07-24在这个登录注册页面中，我很容易理解和操作，不用经过复杂的步骤就能完成注册登录。
火柴人MG
- 粉丝: 83
- 资源: 12
