今天主要对 商城的注册模块的前端页面 以及后端交互功能进行了代码编写
项目地址:
代码如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input.error {
border-bottom: 1px solid red;
}
label.error {
color: red;
display: block;
font-size: 14px;
}
</style>
<!-- <link rel="stylesheet" href="../css/login.css"> -->
<link rel="stylesheet" href="../css/register.min.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/common.min.css">
</head>
<body>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/jquery-validate/jquery.validate.min.js"></script>
<script src='../lib/jquery-validate/localization/messages_zh.min.js'></script>
<script src="../lib/jquery-cookie/jquery.cookie.js"></script>
<script src="../js/register.js"></script>
<div class="header">
<div class="container">
<a href="./index.html"><img src="../images/login/logo.png" alt="logo.png"></a>
</div>
</div>
<div class="register">
<div class="register-container">
<div class="register-container-titile">TP-LINK会员注册</div>
<!-- <p class="register-container-info">账号或密码错误</p> -->
<div class="account-tab">
<p class="account-tab-item active" index="1">手机注册</p>
<p class="account-tab-item" index="2">邮箱注册</p>
</div>
<div class="box">
<div id="tab" index="1">
<form id="register-p" action="../server/register.php" method="POST" >
<div class="account-phone " >
<div class="account-register-phone">
<input type="text" class="account-register-phone-input" name="username" maxlength="50" placeholder="手机号">
</div>
<!-- <p class="account-info">请输入邮箱或手机号</p> -->
<div class="account-register-phone-password">
<input type="password" class="account-register-phone-password-input" name="password" maxlength="50" placeholder="密码" id="pass-p">
</div>
<!-- <p class="account-password-info">请输id入密码</p> -->
<div class="account-register-phone-password2">
<input type="password" class="account-register-phone-password2-input" name="password2" maxlength="50" placeholder="确认密码">
</div>
<div class="account-register-phone-code">
<input type="text" class="account-register-phone-code-input" name="codeI" id="codeI" maxlength="50" placeholder="验证码">
<input type="button" class="account-register-phone-code-img" name="code" id="code" onclick="createCode(4,'code','code2'),confirmBox()">
</div>
<div class="account-register-phone-submit">
<button class="btn btn-primary btn-lg" style="width: 400px;background-color: #0096FF;border:none;text-align: center;" onclick="validate('codeI')">立即注册</button>
</div>
</div>
</form>
</div>
<div id="tab" index="2" style="display: none;">
<form id="register-e" action="../server/login.php" method="POST">
<div class="account-mail" >
<div class="account-mail-contact">
<input type="text" class="account-mail-contact-input" name="username" maxlength="50" placeholder="电子邮箱">
</div>
<!-- <p class="account-info">请输入邮箱或手机号</p> -->
<div class="account-mail-password">
<input type="password" class="account-mail-password-input" name="password" maxlength="50" placeholder="密码">
</div>
<!-- <p class="account-password-info">请输id入密码</p> -->
<div class="account-mail-password2">
<input type="password" class="account-mail-password2-input" name="password2" maxlength="50" placeholder="密码">
</div>
<div class="account-mail-code">
<input type="text" class="account-mail-code-input" name="codeI2" id="codeI2" maxlength="50" placeholder="验证码">
<input type="button" class="account-mail-code-img" name="code2" id="code2" onclick="createCode(4,'code','code2')">
</div>
<div class="account-mail-submit">
<button class="btn btn-primary btn-lg" style="width: 400px;background-color: #0096FF;border:none;text-align: center;" onclick="validate('codeI2')">立即注册</button>
</div>
</div>
</form>
</div>
</div>
<div class="account-bottom clean" style="width: 400px;margin: 0 auto 80px;">
<input type="checkbox" id="cbId"><a href="用户协议" class="fancybox">同意TP-Link注册协议</a>
<a class="account-bottom-register" href="./login.html" style="text-decoration: none;float: right;">立即登录</a>
</div>
</div>
</div>
</body>
</html>
css
.header{
width:100%;
height:80px;
}
.header .container{
width:1200px;
margin:0 auto;
}
.header .container img{
width:237px;
height:20px;
margin:30px 123px 0 0;
display:inline-block;
}
.register{
width: 100%;
height: 1000px;
background: linear-gradient(to bottom,#66CCFF,#FFFFFF);
}
.register-container{
width:600px;
background-color:#fff;
margin-left:360px;
float:left;
margin-top:80px;
}
.register-container-titile{
padding:40px 0 0;
font-size:24px;
color:#0096FF;
line-height:40px;
text-align:center;
font-weight:700;
}
.account-tab{
width:400px;
height:32px;
margin:36px auto 0;
}
.account-tab-item{
width:50%;
height:100%;
float:left;
font-size:14px;
color:#333;
text-align:center;
line-height:32px;
box-sizing:border-box;
border-bottom:1px solid #CCC;cursor:pointer;
}
.account-tab-item.active{
color:#0096FF;
border-bottom:1px solid #0096FF
}
.account-phone{
width:100%;
margin:0 auto
}
.account-register-phone{
width:400px;
height:48px;
margin:24px auto 0;
position:relative
}
.account-register-phone-input{
font-size:14px;
color:#333;
line-height:20px;
border:none;
padding-bottom:9px;width:100%;
border-bottom:1px solid #ccc
}
.account-register-phone-contact-img{width:16px;height:16px;position:absolute;right:0;bottom:12px}
.account-register-phone-password{width:400px;height:48px;margin:24px auto 0;position:relative}
.account-register-phone-password-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}
.account-register-phone-password2{width:400px;height:48px;margin:24px auto 0;position:relative}
.account-register-phone-password2-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}
.account-register-phone-code{width:400px;height:48px;margin:24px auto 0;position:relative}
.account-register-phone-code-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}
.account-register-phone-code-img{position:absolute;top:-5px;right:0;width:100px;height:30px;display:block;cursor:pointer;font-family:Arial,宋体;
font-style:italic;border:none;letter-spacing:3px;outline: none;}
.account-register-phone-submit{width:400px;height:48px;margin:48px auto 24px;background-color:#0096FF;border-radius:2px;cursor:pointer}
.account-register-submit-word{font-size:16px;color:#FFF;text-align:center;line-height:48px;font-weight:700}
.account-mail{width:100%;margin:0 auto}
.account-mail.visible{display: none;}
.account-mail-contact{width:400px;height:48px;margin:24px auto 0;position:relative}
/* .account-register-main-mail-contact-subtitle{font-size:12px;color:#999;margin-top:2px} */
.account-mail-contact-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}
.account-mail-contact-img{width:16px;height:16px;position:absolute;right:0;bottom:12px}
.account-mail-password{width:400px;height:48px;margin:24px auto 0;position:relative}
.account-mail-password-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}
.account-mail-password2{width:400px;height:48px;margin:24px auto 0;position:relative}
.account-mail-password2-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}
.account-mail-code{width:400px;height:48px;margin:24px auto 0;position:relative}
.account-mail-code-input{font-size:14px;color:#333;line-height:20px;border:none;padding-bottom:9px;width:100%;border-bottom:1px solid #ccc}
.account-mail-code-img{position:absolute;top:-5px;right:0;width:100px;height:30px;display:block;cursor:pointer;font-family:Arial,宋体;
font-style:italic;border:none;letter-spacing:3px;outline: none;}
.account-mail-submit{width:400px;height:48px;margin:48px auto 24px;background-color:#0096FF;border-radius:2px;cursor:pointer}
.account-register-main-submit{width:400px;height:48px;margin:48px auto 24px;background-color:#0096FF;border-radius:2px;cursor:pointer}
.account-register-main-submit-word{font-size:16px;color:#FFF;text-align:center;line-height:48px;font-weight:700}
js 主要是进行表单验证的功能 和验证码的生成
<script>
$('.account-tab > p').click(function () {
$(this) // 你点击的那一个 li
.addClass('active') // 添加类名
.siblings() // 所有兄弟元素(不包含自己)
.removeClass('active') // 移除类名
.parent() // 找到父元素 account-tab
.next() // 下一个兄弟元素 box
.children() // box 下面的phone mail
// .removeClass('visible') // 移除类名
.eq($(this).index()) // 找到索引和我点击的对应的那一个
.show()
.siblings("#tab")
.hide();
})
</script>
<script>
window.onload=createCode(4,"code",'code2');
// window.onload=createCode(4,"code2");
var code ; //在全局定义验证码
function createCode(len,tag,tag2){
code = "";
var codeLength = len;//验证码的长度
var checkCode = document.getElementById(tag);
var checkCode2 = document.getElementById(tag2);
var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z');//随机数
for(var i = 0; i < codeLength; i++) {//循环操作
var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)
code += random[index];//根据索引取得随机数加到code上
}
checkCode.value = code;//把code值赋给验证码
checkCode2.value= code;
}
function validate(tag){
var inputCode = document.getElementById(tag).value.toUpperCase(); //取得输入的验证码并转化为大写
if(inputCode.length <= 0) { //若输入的验证码长度为0
alert("请输入验证码!"); //则弹出请输入验证码
}else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
alert("验证码输入错误!"); //则弹出验证码输入错误
createCode();//刷新验证码
document.getElementById(tag).value = "";//清空文本框
}else { //输入正确时
alert("合格!");
}
}
// confirmBox();
function confirmBox(){
var confirmBox = document.getElementById("cbId");//cbId为checkbox的ID
if(confirmBox.checked){
form.submit();
}else{
alert("请同意协议");
return false;
}
}
//添加手机号码验证
$.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(){
var flag = $("#register-p").validate({
onfocusout: function(element) { $(element).valid(); },
rules: {
// key 就是你要验证的哪个 input 框的 name 属性
username: {
required:true,
isMobile:true,
}, // 用户名必填
password: { // 一个字段可以写多个验证方式
required: true,
minlength: 6, // 最少是六个
maxlength: 12, // 最多十二个
},
password2:{
required:true,
equalTo:"#pass-p"
},
codeI: 'required'
},
// 你自定义提示的文本内容
messages: {
// key 就是你验证的哪个 input 框的 name 属性
username: {
required:'请输入电话号码',
isMobile:'请输入正确的电话号码'
},
password: {
required: '请输入密码!',
minlength: '最少要输入 6 个字符!'
},
password2:{
required:"请确认密码",
equalTo:"两次密码不相同"
},
codeI: '请输入验证码!'
},
// 表单的提交事件
// 这个函数会在表单验证通过以后执行
submitHandler: function (form) {
// form 接收的就是你的 form 标签
// console.log(form)
// console.log('表单验证通过了, 我需要使用 ajax 去提交数据了')
// 有一个 jQuery 的方法
// serialize() 快速获取表单输入的数据
// $(form).serialize() 就能拿到这个 form 标签里面的表单数据
// console.log($(form).serialize()) // username=admin&password=123456
// 发送请求到后端
console.log('验证成功');
$.post('../server/register.php', $(form).serialize(), res => {
console.log(res)
var result = JSON.stringify(res)
console.log(result)
var admin =res.username
console.log(admin)
if (result.code === 0) {
console.log('登录失败')
} else {
// 登录成功
$.cookie('name', admin);
window.location.href = './index.html'
}
}, 'json')
}
});
var flag2 = $("#register-e").validate({
onfocusout: function(element) { $(element).valid(); },
rules: {
// key 就是你要验证的哪个 input 框的 name 属性
username: {
required:true,
email:true,
}, // 用户名必填
password: { // 一个字段可以写多个验证方式
required: true,
minlength: 6, // 最少是六个
maxlength: 12, // 最多十二个
},
password2:{
required:true,
equalTo:"#pass-p"
},
codeI2: 'required'
},
// 你自定义提示的文本内容
messages: {
// key 就是你验证的哪个 input 框的 name 属性
username: {
required:'请输入邮箱',
email:'请输入正确的邮箱'
},
password: {
required: '请输入密码!',
minlength: '最少要输入 6 个字符!'
},
password2:{
required:"请确认密码",
equalTo:"两次密码不相同"
},
codeI2: '请输入验证码!'
},
// 表单的提交事件
// 这个函数会在表单验证通过以后执行
submitHandler: function (form) {
// 发送请求到后端
console.log('验证成功');
$.post('../server/register.php', $(form).serialize(), res => {
console.log(res)
var result = JSON.stringify(res)
console.log(result)
var admin =res.username
console.log(admin)
if (res === 0) {
console.log('注册失败')
alert('注册失败')
} else {
console.log('注册成功')
alert('注册成功')
$.cookie('name',admin);
window.location.href = './index.html'
}
}, 'json')
}
});
});
</script>
server php文件 rigister.php 向数据库中添加新用户
<?php
// 1. 接收前端的参数
$username = $_POST['username'];
$password = $_POST['password'];
// 2. 去数据库验证
// 2-1. 连接数据库
header('content-type: text/html;charset=utf-8;');
// 连接数据库
$link = mysqli_connect('localhost', 'root', 'root', 'newdata');
// 执行 sql 语句了
// 执行插入的 sql 语句
$res = mysqli_query($link, "INSERT INTO `login` (`username`, `password`) VALUES('$username', '$password')");
// 输出结果看一下
// true 表示插入成功
// print_r($res);
if ($res) {
$arr = array("message" => "注册成功", "code" => 1,"username" => "$username");
} else {
$arr = array("message" => "注册失败", "code" => 0);
}
// // 把这关联型数组返回
print_r(json_encode($arr));
// echo json_encode($arr);
?>