SpringBoot注册登录(三)：注册--验证账号密码是否符合格式及后台完成注册功能
SpringBoot注册登录(一)：User表的设计点击打开链接
SpringBoot注册登录(二)：注册---验证码kaptcha的实现点击打开链接
SpringBoot注册登录(三)：注册--验证账号密码是否符合格式及后台完成注册功能点击打开链接
SpringBoot注册登录(四)：登录功能--密码错误三次，需要等待2分钟才能登录，固定时间内不能登录点击打开链接
SpringBoot注册登录(五)：登录功能--Scheduling Tasks定时作业，用于某个时间段允许/不允许用户登录点击打开链接
SpringBoot（六）：拦截器--只允许进入登录注册页面，没登录不允许查看其它页面点击打开链接
SpringBoot--mybatis--ajax--模态框--log：注册、登录、拦截器、文件系统源代码点击打开链接
首先重复上一篇提到的register.html，所以如果只要验证账号密码功能的，不用看上一篇也无所谓。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>用户注册页面</title>
<script src="webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet"
href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="/js/kaptcha.js"></script>
<script type="text/javascript" src="/js/validate.js"></script>
<script type="text/javascript" src="/js/register.js"></script>
</head>
<body>
<!-- begin:添加一个注册表单 -->
<div>
<form id="insert_modal" class="form-horizontal">
<div class="col-sm-10">
<input type="text" class="form-control" id="insert_name"
name="name" placeholder="请输入账号"/> <span
class="help-block"></span>
</div>
<div class="col-sm-10">
<input type="password" class="form-control" id="insert_password"
name="password" placeholder="请输入密码"/> <span
class="help-block"></span>
</div>
<!-- begin:验证码 -->
<div class="col-sm-10">
<input type="text" class="form-control" id="kaptcha" name="kaptcha"
placeholder="请输入验证码" style="color: #000000;" /><span
class="help-block"></span> <img
src="kaptcha.jpg" width="200" id="kaptchaImage" title="看不清，点击换一张" />
<small>看不清，点击换一张</small>
<p></p>
<button type="button" class="btn btn-primary" id="user_insert_btn">注册</button>
<div>
<!-- begin:登录功能 -->
<p></p><p><a th:href="@{/signin} ">点击前往登录吧！</a></p>
</div>
</div>
<!-- end:验证码 -->
</form>
</div>
</body>
</html>
②使用webjars引入bootstrap和jquery，不需要自己下载这两个的js文件，在这个目录下新建一个名为webjars的文件夹就可以直接引入了
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.1</version>
</dependency>
③前端校验账号密码要引入的jar
<!-- JRS303校验 -->
<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
</dependency>
④前端验证账号密码是否符合格式的validate.js
//显示验证结果
function show_validate_msg(ele, status, msg) {
if ("success" == status) {
// 让父容器变色
$(ele).parent().addClass("has-success");
// 给sapn赋值正确信息
$(ele).next("span").text(msg);
} else if ("error" == status) {
// 让父容器变色
$(ele).parent().addClass("has-error");
// 给sapn赋值错误信息
$(ele).next("span").text(msg);
}
}
// 验证账号密码
function validate_add_form() {
// 验证用户名
var name = $("#insert_name").val();
var reg_name = /(^[a-zA-Z0-9_-]{6,19}$)|(^[\u2E80-\u9FFF]{2,5})/;
if (!reg_name.test(name)) {
show_validate_msg("#insert_name", "error", "用户名必须是2-5位中文或6-19位英文和数字的组合");
return false;
} else {
show_validate_msg("#insert_name", "success", "");
}
// 验证密码
var password = $("#insert_password").val();
var reg_password = /(^[a-zA-Z0-9_-]{6,19}$)/;
if (!reg_password.test(password)) {
show_validate_msg("#insert_password", "error", "密码必须是6-19位英文和数字的组合");
return false;
} else {
show_validate_msg("#insert_password", "success", "");
}
return true;
}
二、
2.1 注册功能ajax请求的register.js
$(function(){
$("#user_insert_btn").click(function(){
//前端正则表达式验证
if(!validate_add_form()){
return false;
}
//验证用户名是否已经被占用
if($(this).attr("ajax-va")=="error"){
return false;
}
var kaptcha = $("#kaptcha").val();
if (kaptcha.length == 0) {
alert("您没有输入验证码！");
} else {
var name = $("#insert_name").val();
var password = $("#insert_password").val();
//发起ajax进行添加操作
$.ajax({
url:"register",
data:{"name":name,"password":password},
type:"post",
success:function(msg){
if(msg.code==100){
//这里再次经过请求才进登录页面
//如果放在静态static下静态页面就可以直接这样子跳页面:window.location.href = "signin.html";
//但是在templates下必须经过请求否则就会暴露页面不安全
//跳转到登录页面
window.location.href = "signin";
}else{
alert("---注册失败---");
//显示失败信息
//有哪个字段错误,就显示哪个字段
if(undefined!=msg.map.map.username){
//显示账号错误信息
show_validate_msg("#insert_name","error",msg.map.map.username);
}
if(undefined!=msg.map.map.password){
show_validate_msg("#insert_password","error",msg.map.map.password);
}
}
},
error:function(){
}
});
}
});
});
2.2 后台代码
@ResponseBody
@RequestMapping("/register")
public Msg Register(String name,String password) {
//判断该用户名是否已被注册
boolean num = userService.userRegister(name);
if (num == false) {
Map<String, Object> map2 = new HashMap<String, Object>();
map2.put("username", "用户名已被注册");
return Msg.error().add("map", map2);
} else {
User user = new User();
user.setName(name);
user.setPassword(password);
//新注册用户错误次数都为0
user.setMissNumber(0);
//1超级管理员:直接修改数据库的用户，只能打开mySQL改的
//2普通会员:通过请求注册的用户
user.setRoleId(2);
int flag = userService.userInsert(user);
if (flag==1) {
return Msg.success();
} else {
return Msg.error();
}
}
}
SpringBoot注册登录(三)：注册--验证账号密码是否符合格式及后台完成注册功能的更多相关文章
- eclipse 中main()函数中的String[] args如何使用？通过String[] args验证账号密码的登录类？静态的主方法怎样才能调用非static的方法——通过生成对象？在类中制作一个方法——能够修改对象的属性值？
eclipse 中main()函数中的String[] args如何使用? 右击你的项目,选择run as中选择 run configuration,选择arguments总的program argu ...
- 使用java连接AD域,验证账号密码是否正确
eb项目中有时候客户要求我们使用ad域进行身份确认,不再另外做一套用户管理系统.其实客户就是只要一套账号可以访问所有的OA,CRM等办公系统.这就是第三方验证.一般有AD域,Ldap,Radius,邮 ...
- 验证账号密码是否为空 if格式
当前台页面是否提示有没有输入账号密码时 这时需要验证 //验证账号是否为空 if(string.IsNullOrEmpty(zh)) { //为空 则提示输入账号 ObjToJsin.msg = &q ...
- Python实现注册和三次验证登录
# 帐户表account:# sylar:123# alex:456# wusir:789# taibai:789# 需熟练的知识点:文件操作with open()/write()/read().去掉 ...
- Demon_游戏登录界面（具备账号密码输入功能）
using UnityEngine; using System.Collections; using UnityEngine.UI;// public class LoginButton : Mono ...
- servlet验证账号密码
截图部分: 下载链接:https://gitee.com/lgcj1218/j2eehomework
- 9款大气实用的HTML5/CSS3注册登录表单
1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...
- (三)学习MVC之密码加密及用户登录
1.密码加密采用SHA256 算法,此类的唯一实现是 SHA256Managed.在Common/Text.cs里添加Sha256方法: public static string Sha256(str ...
- 小程序＆app 注册登录、绑定
前段时间开发中的一款产品,有小程序和app:小程序直接微信登录,app使用手机号+验证码注册,手机号+验证码/密码登录. 用户使用其中一套账号密码即可正常使用,不强制要求完善另一套账号.为避免同一用户 ...
随机推荐
- js发送邮件确定email地址
<a href="mailto:wjl@tom.com?subject=aaa&body=11111">test</a>
- java多线程高并发
旭日Follow_24 的CSDN 博客 ,全文地址请点击: https://blog.csdn.net/xuri24/article/details/81293321 “高并发和多线程”总是被一起提 ...
- 异常：Data = 由于代码已经过优化或者本机框架位于调用堆栈之上，无法计算表达式的值。
做项目的时候,将DataTable序列化成Json,通过ashx向前台返回数据的时候,前台总是获取不到数据,但是程序运行却没问题, 没抛出异常.一时找不到办法,减小输出的数据量,这时前台可以接收到页面 ...
- uni-app (1) 安装与运行。
安装: 直接到官网安装. 到插件市场下载一个模版. 新建项目的时候有提示链接: 找一个模版用于测试,或者在创建的时候选一个内置模版. 运行:第一次运行的时候有几个地方需要配置,这里因为只是用到了微信小 ...
- 洛谷P3966 [TJOI2013]单词(AC自动机)
题目描述 小张最近在忙毕设,所以一直在读论文.一篇论文是由许多单词组成但小张发现一个单词会在论文中出现很多次,他想知道每个单词分别在论文中出现了多少次. 输入输出格式 输入格式: 第一行一个整数N,表 ...
- vue2 设置网页title的问题
好东东,没个标题看着多难受 看到1文章 http://blog.csdn.net/qishuixian/article/details/72912368 推荐使用 vue-wechat-title插 ...
- Jenkins Jenkins构建历史记录处理
Jenkins构建历史记录处理 by:授客 QQ:1033553122 测试环境 Jenkins2.32.1 操作步骤 Jenkins构建后会生成历史记录,默认存放在如下目录 Jenkins_ho ...
- Android项目实战（四十九）：Andoird 7.0+相机适配
解决方案类似: Android项目实战(四十):Andoird 7.0+ 安装APK适配 解决方法: 一.在AndroidManifest.xml 文件中添加 四大组件之一的 <provider ...
- Kotlin入门(28)Application单例化
Application是Android的又一大组件,在App运行过程中,有且仅有一个Application对象贯穿应用的整个生命周期,所以适合在Application中保存应用运行时的全局变量.而开展 ...
- [20190225]删除tab$记录的恢复5.txt
[20190225]删除tab$记录的恢复5.txt --//昨天下午看了链接https://blog.csdn.net/Enmotech/article/details/87834503,大概知道对 ...