别不信，我给你一剖析你就懂了。
首先，作为用户，我是极不愿意注册的，那么麻烦，要填一堆信息，还常常把密码忘了，关键是每个网站都有一个账号密码，混乱，混乱你懂吗？而且所有的网站等你注册后就会跟踪你的信息和浏览习气，后台大数据打算你的喜好，给你推送广告什么的，隐私，呵呵，你有什么隐私……
其次，作为程序员，我艹，真不想爆粗口，这个注册和上岸的逻辑是有多麻烦？只有在码代码的我和天知道！
真是bi了狗狗的觉得……
我们本日就实现一个商用版的最大略的注册，让看官您感想熏染一下它是又多恶心！
如果你是一个正在学习的编程小白，那么你能实现个注册登录基本你就快出师了！
不信？ 由于注册和上岸会用到以下技能
前端：html5和css是必须的，javascript或者jQuary做校验是必须的，麻烦的还可能利用Josn和Ajax异步交互跟后台校验，正则表达式写的66的才行，这几个个基本的技能，各个要杠杠的好，不然怎么写校验和布局？？
后端：没有框架你能写吗？以是得会个框架ssm或者ssh或者其他，或者你是asp，php程序员，但是基本的逻辑绝不亚于前台判断，是的，前台明明判断好了，后台还要重新判断一遍，你说变态不？
数据库：嘿嘿，这个玩意，你数据库事理不懂怎么设计表，sql语句写的不顺怎么能行！
主键约束要把稳吗？唯一约束要把稳吗？非空吗？默认值吗？数据冗余吗？查询速率可以不？算了，咱就不说大数据和集群了，那更麻烦……
什么？你说实际中这些都是分工做的，呵呵，少年你不是太年轻便是公司太好了，很多时候作为程序员的你都得懂，否则……“这你都不会，你不是工程师吗？”对的，别人就这么说你，而且你不睬解话怎么领悟美工给的html和dba给的数据库语句？
废话不多说，我上我的demo给你们看看吧：
前端html页面和js校验：
显示页面和代码实现：
逻辑：
用户输入的非空吗？
用户随便乱输入数据吗？
用户输入的账号密码长度得当吗？
用户输入的是合格的邮箱吗？
//表单校验
$(function () {
//默认emi得到焦点
$(\公众#e\"大众).select();
//失落去焦点是校验数据
$(\公众#e\"大众).change(function () {
var emil = $(\公众#e\"大众).val();
if (emil == null || emil == \"大众\"大众) {
$(\"大众#emailp\"大众).html(\"大众上岸邮箱不能为空\公众);
$(\"大众#e\公众).css(\"大众border\公众, \"大众1px #F22C03 solid\公众);
$('#s').attr('disabled',\公众true\"大众);
} else {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(emil)) {
$(\"大众#emailp\"大众).html(\公众邮箱格式禁绝确\公众);
$(\"大众#e\"大众).css(\"大众border\公众, \"大众1px #F22C03 solid\"大众);
$('#s').attr('disabled',\"大众true\"大众);
} else {
$(\"大众#emailp\"大众).html(\公众\公众);
$(\"大众#e\公众).css(\"大众border\"大众, \公众1px #ccc solid\"大众);
}
}
});
$(\"大众#p\公众).change(function () {
var password = $(\公众#p\"大众).val();
if (password == null || password == \公众\"大众) {
$(\"大众#passwordp\公众).html(\"大众请输入用户密码\公众);
$(\"大众#p\公众).css(\公众border\"大众, \公众1px #F22C03 solid\"大众);
$('#s').attr('disabled',\公众true\公众);
} else {
if(password.length<6||password.length>12){
$(\"大众#passwordp\"大众).html(\"大众密码只能是6到12位字母或数字\公众);
$(\公众#p\"大众).css(\公众border\"大众, \"大众1px #F22C03 solid\"大众);
$('#s').attr('disabled',\公众true\公众);
}else{
$(\"大众#passwordp\"大众).html(\"大众\"大众);
$(\公众#p\"大众).css(\公众border\公众, \"大众1px #ccc solid\公众);
//设置submit可用并设置可用样式
$('#s').removeAttr(\"大众disabled\公众); //移除disabled属性
$('#s').css(\"大众opacity\"大众,1);
}
}
});
});
前端注册实现：
页面代码和实现：
js校验逻辑：
非空吗？
随便输入吗？
用户名密码或者确认密码长度对吗？
密码和确认密码一样吗？
邮箱格式对吗？
//表单校验
$(function () {
//默认emil得到焦点
$(\"大众#e\"大众).select();
//失落去焦点是校验数据
$(\"大众#e\"大众).blur(function () {
var emil = $(\"大众#e\"大众).val();
if (emil == null || emil == \"大众\"大众) {
$(\"大众#emailp\公众).html(\"大众邮箱不能为空\公众);
$(\"大众#e\"大众).css(\公众border\"大众, \公众1px #F22C03 solid\公众);
$('#s').attr('disabled',\"大众true\公众);
}else {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(emil)) {
$(\公众#emailp\公众).html(\"大众邮箱格式禁绝确\"大众);
$(\"大众#e\公众).css(\"大众border\"大众, \"大众1px #F22C03 solid\"大众);
$('#s').attr('disabled',\"大众true\公众);
} else {
$(\"大众#emailp\"大众).html(\公众\"大众);
$(\"大众#e\公众).css(\"大众border\公众, \"大众1px #ccc solid\"大众);
}
}
});
$(\"大众#p\"大众).blur(function () {
var password = $(\"大众#p\"大众).val();
if (password == null || password == \"大众\"大众) {
$(\"大众#passwordp\"大众).html(\"大众请输入用户密码\"大众);
$(\"大众#p\"大众).css(\"大众border\"大众, \"大众1px #F22C03 solid\"大众);
$('#s').attr('disabled',\公众true\公众);
}else {
if(password.length<6||password.length>12){
$(\公众#passwordp\公众).html(\"大众密码只能是6到12位字母或数字\"大众);
$(\公众#p\"大众).css(\"大众border\"大众, \"大众1px #F22C03 solid\"大众);
$('#s').attr('disabled',\"大众true\"大众);
}else{
$(\公众#passwordp\公众).html(\公众\"大众);
$(\"大众#p\"大众).css(\公众border\"大众, \"大众1px #ccc solid\公众);
}
}
});
$(\"大众#p1\"大众).blur(function () {
var password1 = $(\"大众#p1\"大众).val();
if (password1 == null || password1 == \"大众\"大众) {
$(\公众#password1p\"大众).html(\"大众请再次输入用户密码\公众);
$(\"大众#p1\公众).css(\"大众border\"大众, \"大众1px #F22C03 solid\"大众);
$('#s').attr('disabled',\公众true\"大众);
}else {
if(password1.length<6||password1.length>12){
$(\"大众#password1p\"大众).html(\"大众密码只能是6到12位字母或数字\公众);
$(\"大众#p1\"大众).css(\公众border\公众, \公众1px #F22C03 solid\公众);
$('#s').attr('disabled',\"大众true\"大众);
}else{
$(\公众#password1p\"大众).html(\"大众\"大众);
$(\"大众#p1\公众).css(\"大众border\"大众, \"大众1px #ccc solid\"大众);
//设置submit可用并设置可用样式
$('#s').removeAttr(\"大众disabled\"大众); //移除disabled属性
$('#s').css(\"大众opacity\公众,1);
}
}
});
});
后台实现：
逻辑：
判断所有字段非空否？
判断所有字段长度得当否？
判断邮箱可用否？可用就发送验证邮件
等用户去邮箱验证成功则上岸到主页，否则注册数据临时保留在临时表
等等等等的，我都
附带代码自己看：
@Controller
@RequestMapping(\公众/\公众)
public class UserController {
@Autowired
private UserService userService;
@Autowired
private CheckuserMapper checkuserMapper;
/用户注册/
@RequestMapping(\"大众register\"大众)
public String userRegister(){
return \"大众register\"大众;
}
/用户注册提交表单/
@RequestMapping(\"大众registerForm\公众)
public String userRegisterForm(String email, String password, String password1, Model model){
//数据校验
if(StringUtil.isEmpty(email,password,password1)){
model.addAttribute(\公众msg\"大众,\"大众请填写内容哦~\"大众);
return \公众register\公众;
}else {
if(!password.equals(password1)){
model.addAttribute(\公众msg\"大众,\"大众两次填写的密码不一致！
\"大众);
return \公众register\公众;
}else {
//验证是否注册过
User user = userService.getUserByUser(new User(email.trim(),password.trim()));
if(user==null){
//没注册过则先将这个数据放到临时用户表，等邮箱验证通过后再插入到用户表
Checkuser checkuser = new Checkuser(email.trim(),password.trim());
//插入之前先删除，防止数据冗余
checkuserMapper.deleteByEmail(email.trim());
checkuserMapper.insertSelective(checkuser);
//邮箱验证
String title=\"大众欢迎注册优选网，在这里，花最少的钱，品味最优质的生活\"大众;
String path =\"大众http://localhost:8080/youxuan/registerEmail/\"大众+checkuser.getId();
String content=\"大众<a href='\公众+path+\"大众'>确认注册优选网吗？点击跳转到优选网首页！
</a>\公众 +
\"大众如不能点击请复制此链接到浏览器打开<a href='\公众+path+\公众'>\"大众+path+\公众</a>\"大众;
try {
new MailUtil(checkuser.getUseremil(),title,content).sendEmil();
} catch (MessagingException e) {
model.addAttribute(\"大众msg\"大众,\"大众邮件发送失落败，做事器涌现内部缺点！
\"大众);
return \"大众register\"大众;
}
//跳转邮箱页面
model.addAttribute(\"大众useremail\"大众,checkuser.getUseremil());
return \公众redirect:registerSendEmail\"大众;
}else {
model.addAttribute(\"大众msg\"大众,\"大众此邮箱已经注册过了\公众);
return \公众register\"大众;
}
}
}
}
@RequestMapping(\"大众registerSendEmail\公众)
public String registerSendEmail(Model model,String useremail){
model.addAttribute(\"大众useremail\"大众,useremail);
return \"大众registerSendEmail\"大众;
}
//邮箱注册
@RequestMapping(\"大众registerEmail/{id}\"大众)
public String registerEmail(Model model, @PathVariable(\公众id\"大众) Integer id, HttpSession session){
//查询临时用户表，数据存在则插入用户表
Checkuser checkuser = checkuserMapper.selectByPrimaryKey(id);
if(checkuser!=null){
//插入用户表，实现注册
//插入数据前，判断
User user1 = new User();
user1.setName(checkuser.getUseremil());
user1.setEmail(checkuser.getUseremil());
user1.setPassword(checkuser.getPassword());
user1.setType(1);
User user = userService.getUserByUser(user1);
//为空时表示第一次注册，插入数据
if(user==null){
userService.addUser(user1);
}
//不为为空则不插入，
//写入seseion域
session.setAttribute(\"大众user\公众,user1);
// //返回注册成功页
return \"大众registerSucceed\公众;
}else {
model.addAttribute(\公众msg\"大众,\"大众未知的缺点发生了\"大众);
return \"大众register\"大众;
}
}
@RequestMapping(\"大众login\"大众)
public String userLogin(Model model){
return \"大众login\公众;
}
@RequestMapping(\"大众loginForm\公众)
public String userLoginForm(String email, String password, HttpSession session,Model model){
if(StringUtil.notEmpty(email,password)){
//不为空是判断是否存在用户
User user = userService.getUserByUser(new User(email,password));
if(user==null){
model.addAttribute(\"大众msg\"大众,\"大众用户名或密码缺点，请重新输入！
\"大众);
return \"大众login\"大众;
}else{
session.setAttribute(\"大众user\"大众,user);
//成功上岸，，进入主页
return \"大众amidnIndex\"大众;
}
}else {
model.addAttribute(\公众msg\"大众,\"大众用户名或密码不能为空！
\"大众);
return \"大众login\"大众;
}
}
}
引用邮箱自动发送功能的类的代码：
/
发送邮件测试代码
/
public class MailUtil {
private String receiveEmial;//吸收的邮箱
private String title;//邮件标题
private String content;//邮件内容
public MailUtil(String receiveEmial, String title, String content) {
this.receiveEmial = receiveEmial;
this.title = title;
this.content = content;
}
public void sendEmil() throws MessagingException {
// 配置发送邮件的环境属性
final Properties props = new Properties();
/
可用的属性： mail.store.protocol / mail.transport.protocol / mail.host /
mail.user / mail.from
/
// 表示SMTP发送邮件，须要进行身份验证
props.put(\"大众mail.smtp.auth\"大众, \"大众true\"大众);
props.put(\"大众mail.smtp.host\"大众, \"大众smtp.163.com\"大众);
// 发件人的账号
props.put(\公众mail.user\公众, \公众你的邮箱@163.com\公众);
// 访问SMTP做事时须要供应的密码
props.put(\公众mail.password\公众, \公众你的密码\"大众);
// 构建授权信息，用于进行SMTP进行身份验证
Authenticator authenticator = new Authenticator() {
@Override
protected PasswordAuthentication getPasswordAuthentication() {
// 用户名、密码
String userName = props.getProperty(\公众mail.user\"大众);
String password = props.getProperty(\"大众mail.password\"大众);
return new PasswordAuthentication(userName, password);
}
};
// 利用环境属性和授权信息，创建邮件会话
Session mailSession = Session.getInstance(props, authenticator);
// 创建邮件
MimeMessage message = new MimeMessage(mailSession);
// 设置发件人
InternetAddress form = new InternetAddress(
props.getProperty(\公众mail.user\公众));
message.setFrom(form);
// // 设置收件人
// InternetAddress to = new InternetAddress(\公众测试邮箱@qq.com\"大众);
// message.setRecipient(RecipientType.TO, to);
// 设置抄送
InternetAddress cc = new InternetAddress(\公众抄送邮箱@163.com\"大众);
message.setRecipient(RecipientType.CC, cc);
// 设置密送，其他的收件人不能看到密送的邮件地址
InternetAddress bcc = new InternetAddress(receiveEmial);
message.setRecipient(RecipientType.CC, bcc);
// 设置邮件标题
message.setSubject(title);
// 设置邮件的内容体
// message.setContent(\"大众<a href='http://www.xuantaobao.cn'>测试的HTML邮件</a>\公众, \公众text/html;charset=UTF-8\"大众);
message.setContent(content,\公众text/html;charset=UTF-8\"大众);
// 发送邮件
Transport.send(message);
}
}
其他运用bean，service，mapper，dao的代码就不在这写了，我发github吧。写的恶心了
郑重声明：我这个实现只是一个demo，用的是邮箱注册，你可以试试短信注册（须要有个短信的接口，一样平常要购买，短信一条几分到几毛钱），我写的逻辑只是一部分，没有涵盖全体的注册流程，正常商用用上岸注册要比这个麻烦的多，以是你看着恶心吗？
恶心到你就记得点赞吧，嘿嘿，啊哈哈哈
