用户注册登陆流程
具体注册和登录要使用ajax与json去传递数据,由于这样能够预先断定用户名是否已注册,已经注册的话,直接返回给用户说已经注册了,你就别用这个名字了,而后能够跟一系列的随机数字在这个名字后面(但这样是否是仍是已经注册了的,断定起来就略麻烦些)html
<!-- 登录验证码,断定后若是成功,再执行登录方法 -->
<script>
$.idcode.setCode();
$("#loginButton").click(function (){
var IsBy = $.idcode.validateCode();
/* alert(IsBy); */
console.log(IsBy);
if(!IsBy){ //若是验证码经过,则执行ajax的方法
event.preventDefault();
}else{
loginUser();
}
});
</script>
登录:ajax
<!-- 登录的ajax方法 -->
<script>
function loginUser(){
console.log("in loginUser() ~");
var user_name = $("#user_name").val();
var user_pwd = $("#user_pwd").val();
/* var passPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/; */
var namePattern = /^[a-zA-Z0-9_-]{4,16}$/;
if(namePattern.test(user_name)){
console.log(user_name);
console.log(user_pwd);
//用户名RegExp正确后,再断定其是否已经在数据库中存在
$.ajax({
url:"<%=path%>/user/queryUserByNameAndPwd.do", //根据用户名查询用户实例
type:"POST",
data:{"user_name":user_name, "user_pwd":user_pwd},
dataType:"json",
success:function(data){//响应回传成功后到这里
if(data.code==1){//若是用户名密码正确,则登录.
console.log(data.message);
document.forms["loginForm"].submit();
window.location.href="http://localhost:8084/OrderSystemM/Test1/index.jsp";
/* return true; */
}else if(data.code==0){
alert(data.message);
/* return false; */
}else{
//用户实例不为空,但用户名不等于该查询的用户名 (概率微乎其微)
alert("网络错误,请稍后再试");
//发送BUG信息到管理员
/* return false; */
}
}
})
}
}
</script>
用户登录后返回首页,若是不调用window.location.href方法回转到index.jsp,会显示.do路径,我想还有别的方法能够解决这一问题.!正则表达式
以后用户须要退出时:数据库
<!-- 清除session -->
<script>
function removeSessoin(){
console.log("清除session");
$.ajax({
url:"<%=path%>/user/removeSession.do", //清除用户sessoin
type:"POST",
data:{},
dataType:"json",
success:function(data){//响应回传成功后到这里
if(data.removeCode==1){//若是用户名重复,则<
alert("您已退出登录!欢迎下次光临💗");
window.location.href="http://localhost:8084/OrderSystemM/Test1/index.jsp";
}else if(data.removeCode==0){
alert("退出失败!请联系!");
}else{
//用户实例不为空,但用户名不等于该查询的用户名 (概率微乎其微)
alert("网络错误,请稍后再试");
//发送BUG信息到管理员
}
}
})
}
</script>
在用户注册时,将bootstrap的插件又get了几个新方法.json
<!-- 注册用户的ajax方法 -->
<script>
//注册按钮点击执行注册断定
$("#regButton").click(registerUser);
//用户名失去焦点时,执行查询该用户名是否已经存在的ajax操做
$("#user_nameReg").blur(userNameJudger);
//密码框失焦,执行密码断定
$("#user_pwdReg").blur(pwdCompare);
//密码2变更时执行
$("#user_pwdReg2").change(pwdCompare);
//用户名的正则表达式
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//密码的正则表达式
var pPattern = /^.*(?=.{6,30})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//设定用户名的断定boolean
var nameFlag = false;
var user_nameReg = $("#user_nameReg").val();
//用户名断定
function userNameJudger(){
var user_nameReg = $("#user_nameReg").val();
if(user_nameReg != null && user_nameReg !=''){
//用户名不为空
if(uPattern.test(user_nameReg)){
//用户名格式正式
console.log("用户名格式正确");
//格式正确后断定是否已经存在数据库中
//ajax
$.ajax({
url:"<%=path%>/user/queryUserInsByName.do",
type:"POST",
data:{"user_name":user_nameReg},
dataType:"json",
success:function(data){
if(data.exist==1){
$("#nameSp").html(" <label class='text-danger'><strong>×用户名已经重复</strong></label>");
nameFlag = false;
/* alert(data.message); */
}else{
$("#nameSp").html(" <label class='text-success'><strong>√</strong></label>");
nameFlag = true;
/* alert(data.message); */
}
}
})
}else{
nameFlag = false;
console.log("用户名格式不正确");
//用户名格式不正确
/* alert("用户名格式错误,应为4到16位（可以使用 : 字母，数字，下划线，减号）"); */
/* <label data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</label> */
$("#nameSp").html(" <label data-toggle='tooltip' data-placement='right' title='用户名格式错误,应为4到16位.可以使用 : 字母，数字，下划线，减号'><p class='text-warning'>💀用户名格式错误,点我查看具体缘由.</p></label>");
$("[data-toggle='tooltip']").tooltip();
}
}else{
//用户名不能为空
nameFlag = false;
$("#nameSp").html(" <label class='text-danger'><strong>🚫用户名不能为空</strong></label>");
}
}
/* tHIS FUNCTION IS SLOW
function getNameBool(){
userNameJudger();
return nameFlag;
} */
/* 设置密码的断定boolean */
var pwdFlag = false;
//密码格式及相同比较,若是相同,pwdFlag为true
function pwdCompare(){
pwdFlag = false;
var user_pwd1Reg = $("#user_pwdReg").val();
var user_pwd2 = $("#user_pwdReg2").val();
if(user_pwd1Reg != null && user_pwd1Reg != ''){
//若是密码1不为空,不为空字符串
if(pPattern.test(user_pwd1Reg)){
//密码格式正确,继续断定两个密码是否相同
console.log("密码1格式正确");//ok
$("#pwd1Sp").html(" <label class='text-success'><strong>√</strong></label>");
if(user_pwd1Reg===user_pwd2){
//两个密码相同,格式也正确
/* alert("密码一致~能够注册");//ok */
pwdFlag = true;
$("#pwd1Sp").html(" <label class='text-success'><strong>√</strong></label>");
$("#pwd2Sp").html(" <label class='text-success'><strong>√</strong></label>");
return pwdFlag;
}else{
//第一个密码格式正确,第二个密码跟第一个不相同
/* alert("两个密码不一样~");//ok */
if(user_pwd2==''){
pwdFlag = false;
$("#pwd2Sp").html(" <label class='text-warning'><strong>请输入重复密码.</strong></label>");
return pwdFlag;
}else{
pwdFlag = false;
$("#pwd2Sp").html(" <label class='text-danger'><strong>重复密码错误.</strong></label>");
return pwdFlag;
}
}
}else{
//密码1格式错误
pwdFlag = false;
/* alert("密码格式错误,需求6-30位,包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符");//ok */
$("#pwd1Sp").html(" <label data-toggle='tooltip' data-placement='right' title='密码格式错误,需求6-30位,包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符'><p class='text-warning'>💀密码格式错误,点我查看具体缘由.</p></label>");
$("[data-toggle='tooltip']").tooltip();
return pwdFlag;
}
}else{
//若是密码1为空,为空字符串,判断重复密码是否空
if(user_pwd2 != null && user_pwd2 != ''){
pwdFlag = false;
//若是密码1为空,密码2不空,则清空密码2,关注密码1输入框提示先输入密码1
$("#user_pwdReg2").val('');//ok
console.log("密码2被清空,先填写密码1");//ok
$("#user_pwdReg").focus();//ok
/* alert("先要输入密码1~"); //ok */
$("#pwd2Sp").html(" <label class='text-warning'><strong>请先输入上面的密码.</strong></label>");
return pwdFlag;
}
}
}
//注册新用户的一系列focus,blur事件.
/* function getRegsiterInfo(){
$()
}
*/
//注册新用户
function registerUser(){
console.log("in registerUser() ~");
var user_nameTrue = $("#user_nameReg").val();
var user_pwdTrue = $("#user_pwdReg").val();
//执行用户名判断,是否已经存在或格式等.
userNameJudger();
if(pwdCompare() && nameFlag){
$.ajax({
url:"<%=path%>/user/insertNewUser.do",
type:"POST",
data:{"user_name":user_nameTrue,"user_pwd":user_pwdTrue},
dataType:"json",
success:function(data){
if(data.insertNum>0){
console.log("注册成功");
//发送用户名密码到用户邮箱(待添加)
console.log("用户名:"+user_nameTrue+".密码:"+user_pwdTrue);
//提交表单
document.forms["regForm"].submit();
/* 跳转页面并刷新获取session及*/
window.location.href="http://localhost:8084/OrderSystemM/Test1/userinfo.jsp";
//
}else{
console.log("注册失败");
}
}
})
}else{
console.log("🚫阻止提交");
event.preventDefault();
}
}
</script>
基本注册的流程是这样,口述的话简单说明为,先断定注册的用户名是否已经存在于了数据库中,若是是,则提示已经存在,并阻止提交 nameFlag = falsebootstrap
两次重复密码进行比对,格式正确并二者相同,则返回true, 当这些具体知足了条件,将用户注册信息经过ajax及json注册到数据库,并返回注册状态码1or0,网络
1的话页面假性submit提交让注册框消失,并跳转如userinfo用户信息页面. (这里若是使用邮箱则能够发送邮件给注册邮箱,当用户点击后再判断操做)session
来源：wizard_Qjsp
相关文章
- 1. 用户注册和登陆
- 2. Django用户注册、登陆
- 3. 用户登陆、注册最基本的流程图
- 4. 用户的注册登陆流程及代码实现
- 5. yii2实战之用户注册登陆
- 6. 用户登陆注册【JDBC版】
- 7. Java+mysql用户注册登陆
- 8. Django实现用户注册登陆
- 9. 用户登陆与注册系统
- 10. SSM用户注册登陆案例
- 更多相关文章...
- • Lua 流程控制 - Lua 教程
- • Git 工作流程 - Git 教程
- • Spring Cloud 微服务实战(三) - 服务注册与发现
- • Git可视化极简易教程 — Git GUI使用方法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入门
- 2. Spring WebFlux 源码分析(2)-Netty 服务器启动服务流程 --TBD
- 3. wxpython入门第六步（高级组件）
- 4. CentOS7.5安装SVN和可视化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig对象缺少setMaxIdle、setMaxWaitMillis等方法，问题记录
- 6. 一步一图一代码，一定要让你真正彻底明白红黑树
- 7. 2018-04-12—（重点）源码角度分析Handler运行原理
- 8. Spring AOP源码详细解析
- 9. Spring Cloud（1）
- 10. python简单爬去油价信息发送到公众号
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 用户注册和登陆
- 2. Django用户注册、登陆
- 3. 用户登陆、注册最基本的流程图
- 4. 用户的注册登陆流程及代码实现
- 5. yii2实战之用户注册登陆
- 6. 用户登陆注册【JDBC版】
- 7. Java+mysql用户注册登陆
- 8. Django实现用户注册登陆
- 9. 用户登陆与注册系统
- 10. SSM用户注册登陆案例