实现注册手机号用户

1、使用Post异步发送请求（发送短信），离焦事件触发时判断

	<script src="layer/layer.js"></script><!--离焦事件--><script type="text/javascript" th:inline="javascript">$("#username").blur(function(){//判断用户名谁否符合手机号的格式，正则if(/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test($("#username").val())){//如果符合，发短信，$.post  (ajax)var telephone = $("#username").val()$.post(//url  给/sendSMS权限放行[[@{~/sendSMS}]],//参数{"telephone":telephone},//回调函数function(data){alert("success")},//数据格式"json")}else{//不符合，给出提示信息layer.msg("手机号格式有误!!")}})$("#repassword").blur(function(){alert("repassword")})$("#SMS").blur(function(){alert("SMS")})</script>

package com.zzz.blog.controller;import ...@Controller
public class VisitorController {//ajax@RequestMapping("/sendSMS")@ResponseBody public String sendSMS(String telephone) {//给手机号发信息System.out.println(telephone);return "";}}

2、发送手机验证码（使用腾讯云短信服务，注册方法搜索之前文章）

复制qcloudsms-1.0.5.jar到工程bin文件夹下，并build path一下。
修改sendSMS方法

//ajax 给手机号发信息@RequestMapping("/sendSMS")@ResponseBody public String sendSMS(String telephone,HttpSession session) {//appid  appkeyint appid =  xxx;String appkey = "xxx";//短信模板idint templateId = xxx;//签名的名字String smsSign = "玄尺软件编程公众号";//给谁发String phoneNumber = telephone;//验证码String[] params = new String[1];Random r = new Random();String code = "";for(int i=0;i<4;i++) {code += r.nextInt(10);}//放入session域中session.setAttribute("SMS", code);params[0] = code;SmsSingleSender sender = new SmsSingleSender(appid, appkey);//地区、电话、模板id、验证码、签名SmsSingleSenderResult result;try {result = sender.sendWithParam("86", phoneNumber, templateId, params, smsSign, "", "");System.out.println(result);} catch (HTTPException | JSONException | IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return "";}

3、判断手机号是否已存在

@Controller
public class VisitorController {@Autowiredprivate VisitorService visitorService;//ajax 给手机号发信息@RequestMapping("/sendSMS")@ResponseBody public String sendSMS(String telephone,HttpSession session) {//判断数据库是否存在该手机号//存在，不发送短信String json = null;if (visitorService.findVisitorByUsername(telephone) != null) {json = "{\"message\":"+false+"}";} //不存在，发送短信else {json = "{\"message\":"+true+"}";SMS(telephone, session);}return json;}public void SMS(String telephone,HttpSession session) {//appid  appkeyint appid =  xxx;String appkey = "xxx";//短信模板idint templateId = xxx;//签名的名字String smsSign = "玄尺软件编程公众号";//给谁发String phoneNumber = telephone;//验证码String[] params = new String[1];Random r = new Random();String code = "";for(int i=0;i<4;i++) {code += r.nextInt(10);}//放入session域中session.setAttribute("SMS", code);params[0] = code;SmsSingleSender sender = new SmsSingleSender(appid, appkey);//地区、电话、模板id、验证码、签名SmsSingleSenderResult result;try {result = sender.sendWithParam("86", phoneNumber, templateId, params, smsSign, "", "");System.out.println(result);} catch (HTTPException | JSONException | IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}}

package com.zzz.blog.service;import ...
@Service
public interface VisitorService {Visitor saveVisitory(Visitor visitor);Visitor findVisitorByUsername(String telephone);}

package com.zzz.blog.service;import ...@Component
public class VisitorServiceImpl implements VisitorService{@Autowiredprivate VisitorRepository visitorRepository;@Overridepublic Visitor saveVisitory(Visitor visitor) {return visitorRepository.save(visitor);}@Overridepublic Visitor findVisitorByUsername(String telephone) {return visitorRepository.findVisitorByUsername(telephone);}}

package com.zzz.blog.repository;import ...public interface VisitorRepository extends CrudRepository<Visitor, Long>{@Query(value = "select * from visitor where username = ?1",nativeQuery = true)Visitor findVisitorByUsername(String telephone);}

	<script type="text/javascript" th:inline="javascript">$("#errorMessage").hide();...//回调函数function(data){if(data.message){$("#errorMessage").hide();layer.msg("手机验证码已发送，请注意查收！！")}else{$("#errorMessage").show(); //在前面先调用先隐藏错误信息$("#errorMessage").html("该手机号已经被注册!!");}},...

4、测试发送短信以及用户名是否重复

测试发送短信成功以后，把验证码发送代码注释掉(因为发送短信需要收费)

		System.out.println(code);//		SmsSingleSender sender = new SmsSingleSender(appid, appkey);
//		//地区、电话、模板id、验证码、签名
//		SmsSingleSenderResult result;
//		try {
//			result = sender.sendWithParam("86", phoneNumber, templateId, params, smsSign, "", "");
//			System.out.println(result);
//		} catch (HTTPException | JSONException | IOException e) {
//			// TODO Auto-generated catch block
//			e.printStackTrace();
//		}

在visitor表中插入一条手机号用户数据，测试用户重复情况下的提示信息，测试通过。

5、判断两次密码是否一致

	$("#repassword").blur(function(){//判断两次密码是否一致if($("#password").val() != $("#repassword").val()){$("#errorMessage").show();$("#errorMessage").html("两次密码输入不一致!!");}else{$("#errorMessage").hide();}})

6、测试判断手机验证码的正确性

	$("#SMS").blur(function(){var sms = $("#SMS").val();$.post(//url  在securityconfig中给权限放行[[@{~/judgeSMS}]],//传参{"smsCode":sms},//回调参数function(data){if(data.message){$("#errorMessage").hide();layer.msg("验证码正确！！")}else{$("#errorMessage").show();$("#errorMessage").html("验证码错误!!");}},//数据格式"json")})

//在VisitorController中添加判断方法@RequestMapping("/judgeSMS")@ResponseBodypublic String judgeSMS(String smsCode,HttpSession session) {String codeInSession = (String)session.getAttribute("SMS");String json = null;if (smsCode.equals(codeInSession)) {json = "{\"message\":"+true+"}";} else {json = "{\"message\":"+false+"}";}return json;}

7、防止皮的用户注册提交错误的表单

...
<form id="visitorRegisterForm" th:action="@{~/registerVisitor}" class="login100-form validate-form">
...
<button onclick="submitButton()" type="button" class="login100-form-btn">注 册</button>
...<!--离焦事件--><script type="text/javascript" th:inline="javascript">$("#errorMessage").hide();var isOkUsername,isOkPassword,isOkSMS;	//在每个离焦事件中第一句赋初值为false，在判断正确的逻辑里改值为true...function submitButton(){//防止皮的用户在输入有错误内容的时候注册if(isOkUsername==false){$("#errorMessage").show();$("#errorMessage").html("用户名重复或格式错误！！");}else if(isOkPassword==false){$("#errorMessage").show();$("#errorMessage").html("两次密码输入不一致！！");}else if(isOkSMS==false){$("#errorMessage").show();$("#errorMessage").html("验证码错误！！");}else{$("#visitorRegisterForm").submit()}}		</script>
...

8、完成注册功能

	@RequestMapping("/registerVisitor")  //权限放行public String registerVisitor(Visitor visitor) {Random r = new Random();int random = r.nextInt(8) + 1;visitor.setImage("/images/1-"+random+".jpg");visitorService.saveVisitory(visitor);return "redirect:/visitorLogin";}

测试：输入内容，点击注册按钮，数据库中正确添加数据即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/83096.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HCS 基本概念（三）

HCS 基本概念（三）

一、定义 HCS采用FusionSphere OpenStack作为云平台&#xff0c;对各个物理数据中心资源做整合&#xff0c;采用ManageOne作为数据中心管理软件对多个数据中心提供统一管理&#xff0c;通过云平台和数据中心管理软件协同运作&#xff0c;达到多数据中心融合、提升企业整体IT效率…
阅读更多...
2023最新安装微信小程序开发软件安装教程

2023最新安装微信小程序开发软件安装教程

一&#xff0c;安装开发者工具 我们在开发小程序之前&#xff0c;首先需要安装小程序开发者工具&#xff0c;今天就来教大家安装小程序开发者工具。 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/framework/ 官网工具下载地址&#xff1a; 微信…
阅读更多...
在windows下持续ping ip，将返回结果及时间记录到文件中

在windows下持续ping ip，将返回结果及时间记录到文件中

在纯英文路径下创建文件ping.txt 在txt中写入 Dim args, flag, unsuccOut args"" otherout"" flag0If WScript.Arguments.count 0 Then WScript.Echo "Usage: cscript tping.vbs [-t] [-a] [-n count] [-l size] [-f] [-i TTL] [-v TOS]" WScr…
阅读更多...
NDK (ndk)报错 Unity requires NDK r19 (64-bit)(19.0.05232133)

NDK (ndk)报错 Unity requires NDK r19 (64-bit)(19.0.05232133)

一、介绍 在 Android 添加 NDK ndk 的时候&#xff0c;出现 Unity requires NDK r19 (64-bit)(19.0.05232133)。 二、环境 1、Unity 2020.3.48f1c1 2、Android NDK 配置 三、报错信息 NDK (ndk)报错 Unity requires NDK r19 (64-bit)(19.0.05232133) 四、解决方法 1、下…
阅读更多...
uniapp 在父组件中使用ref属性调用子组件中的方法 报错undefined

uniapp 在父组件中使用ref属性调用子组件中的方法 报错undefined

项目背景&#xff1a; 项目是自定义底部tabBar&#xff0c;所以这个页面是index(首页的一个子组件ref"pageC") 现在要求是不管页面滚动到第几页数据&#xff0c;或者每次从详情页以及其他页面回到这个页面时&#xff08;子组件pageC)内容都要回到顶部 所以我在index的…
阅读更多...
「提效脚本 redis」 使用Lua批量删除key

「提效脚本 redis」 使用Lua批量删除key

在redis里面可以使用keys aa* 进行匹配所有的key&#xff0c;却没办法直接删除所有匹配的key。 所以可以使用lua脚本进行增强。 以删除 suggest* 开头的key为例。 eval "local keys redis.call(keys, suggest*) for _, key in ipairs(keys) do redis.call(del, key) …
阅读更多...
华为OD机试 - 求最多可以派出多少支团队 - 双指针（Java 2023 B卷 100分）

华为OD机试 - 求最多可以派出多少支团队 - 双指针（Java 2023 B卷 100分）

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…
阅读更多...
【 Tkinter界面-练习05】 event和bind

【 Tkinter界面-练习05】 event和bind

一、说明 事件和动作有关&#xff1b;所有的界面都与运动有关&#xff0c;本篇将对事件、事件触发、绑定回调函数等&#xff0c;其实是一系列部件配合的复杂的过程&#xff0c;这些过程牵扯到系统如何设计&#xff0c;线程、消息队列循环等。本篇将详细介绍各种因素的关系。 二…
阅读更多...
python经典百题之求分数前N项和

python经典百题之求分数前N项和

题目&#xff1a;有一分数序列&#xff1a;2/1&#xff0c;3/2&#xff0c;5/3&#xff0c;8/5&#xff0c;13/8&#xff0c;21/13…求出这个数列的前20项之和。 1. 方法一&#xff1a;普通循环 思路&#xff1a;利用循环计算每一项的值&#xff0c;并累加求和。 优点&#x…
阅读更多...
vue3创建的官网提示方法

vue3创建的官网提示方法

创建: npm create vuelatest 或许会出现提示: 根据官网提示: 意味着我们需要安装或者更新create-vue的版本 后面就可以跟随提示了
阅读更多...
【2023年11月第四版教材】第13章《资源管理》（第三部分）

【2023年11月第四版教材】第13章《资源管理》（第三部分）

第13章《资源管理》&#xff08;第部分&#xff09; 4 规划资源管理4.1 数据表现★★★4.2 资源管理计划★★★4.2 团队章程★★★ 5 估算活动资源 4 规划资源管理 组过程输入工具和技术输出规划1.规划资源管理1.项目章程2.项目管理计划&#xff08;质量管理计划、范围基准&am…
阅读更多...
C++中返回类型与return语句

C++中返回类型与return语句

C中返回类型与return语句 有、无返回值的函数及其return语句 无返回值&#xff08;函数声明中&#xff0c;返回值类型为void&#xff09;的函数&#xff0c;如果其中没有任何return语句也是正确的&#xff0c;编译器会自动在函数结束处补上隐式的return;语句。如果这种void函数…
阅读更多...
VOP —— Noise

VOP —— Noise

目录 Turbulent Noise —— 计算1D/3D类型的Noise Anti-Aliased Flow Noise —— 生成抗锯齿噪波 Anti-Aliased Noise —— 生成抗锯齿噪波 Curl Noise —— 创建divergence-free 3D噪波 Curl Noise 2D —— 创建divergence-free 2D噪波 Flow Noise —— 生成1D/3D Perli…
阅读更多...
理解Kruskal算法的前提----深入理解并查集【超简单~】

理解Kruskal算法的前提----深入理解并查集【超简单~】

并查集的实现思路 并查集主要分为两个部分&#xff1a;第一部分就是需要找到点对应的祖宗节点&#xff0c;第二部分&#xff0c;是要将属于同一个集合节点的祖宗节点进行统一&#xff0c;也就是结合操作。 Find函数实现 // parent数组用来存储下标值所对应的父节点值 // 比如…
阅读更多...
下载安装nvm教程（附带下载切换node.js版本实操）

下载安装nvm教程（附带下载切换node.js版本实操）

目录 一、介绍 二、下载 三、安装步骤 四、配置淘宝源 五、测试 六、常用的nvm命令 七、下载切换node版本实操 node版本参考 一、介绍 node版本管理&#xff1a;nvm就是可以切换你的node版本&#xff0c;特别是当node版本过高或者过低时候&#xff0c;就可以用nvm进行…
阅读更多...
036：vue导出页面生成pdf文件

036：vue导出页面生成pdf文件

第036个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…
阅读更多...
GIF动图怎么变成jpg动图？一键分解GIF动画

GIF动图怎么变成jpg动图？一键分解GIF动画

GIF格式图片怎么转换成jpg格式图片&#xff1f;在日常生活中jpg、png转GIF格式非常的常见&#xff0c;那么gif转换成jpg格式应该怎么操作呢&#xff1f;很简单&#xff0c;给大家分享一款gif动态图片制作&#xff08;https://www.gif.cn/giffenjie&#xff09;工具&#xff0c;…
阅读更多...
Oracle Schema Only账户

Oracle Schema Only账户

概念 Schema Only Accounts是Oracle 18c的新安全功能&#xff0c;19c进一步增强。 19c的增强其实就是允许此账户有管理权限&#xff1a;Ability to Grant or Revoke Administrative Privileges to and from Schema-Only Accounts A schema only account cannot log in to the…
阅读更多...
计算机视觉与深度学习-卷积神经网络-纹理表示卷积神经网络-卷积神经网络-[北邮鲁鹏]

计算机视觉与深度学习-卷积神经网络-纹理表示卷积神经网络-卷积神经网络-[北邮鲁鹏]

这里写目录标题 参考文章全连接神经网络全连接神经网络的瓶颈全连接神经网络应用场景 卷积神经网络卷积层(CONV)卷积核卷积操作卷积层设计卷积步长(stride)边界填充特征响应图组尺寸计算 激活层池化层(POOL)池化操作定义池化操作作用池化层超参数常见池化操作 全连接层(FC)样本…
阅读更多...
设计心理学-日常操作心理学 优漫动游

设计心理学-日常操作心理学 优漫动游

大师解释了产品设计的几个原则后&#xff0c;接着其实就是解释日常生活中用户操作的心理&#xff0c;从深层次的角度&#xff0c;解释为什么产品设计需要依据这些原则。 设计心理学-日常操作心理学 首先书中提出了一个显而易见的概念&#xff1a;用户习惯自行判断产品的功…
阅读更多...
最新文章

Copyright @ 2022~2023