实现注册手机号用户

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

package com.zzz.blog.controller;

import ...

@Controller
public class VisitorController {

	//ajax
	@RequestMapping("/sendSMS")
	@ResponseBody 
	public String sendSMS(String telephone) {
		//给手机号发信息
		System.out.println(telephone);
		return "";
	}
	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

//ajax 给手机号发信息
	@RequestMapping("/sendSMS")
	@ResponseBody 
	public String sendSMS(String telephone,HttpSession session) {
		
		//appid  appkey
		int appid =  xxx;
		String appkey = "xxx";
		//短信模板id
		int 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 block
				e.printStackTrace();
			}

		
		return "";
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

@Controller
public class VisitorController {

	@Autowired
	private 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  appkey
		int appid =  xxx;
		String appkey = "xxx";
		//短信模板id
		int 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 block
			e.printStackTrace();
		}
	}
	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

package com.zzz.blog.service;

import ...
@Service
public interface VisitorService {

	Visitor saveVisitory(Visitor visitor);

	Visitor findVisitorByUsername(String telephone);

}
1
2
3
4
5
6
7
8
9
10
11

package com.zzz.blog.service;

import ...

@Component
public class VisitorServiceImpl implements VisitorService{

	@Autowired
	private VisitorRepository visitorRepository;
	
	@Override
	public Visitor saveVisitory(Visitor visitor) {
		return visitorRepository.save(visitor);
	}

	@Override
	public Visitor findVisitorByUsername(String telephone) {
		return visitorRepository.findVisitorByUsername(telephone);
	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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);

}
1
2
3
4
5
6
7
8
9
10

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

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();
//		}
1
2
3
4
5
6
7
8
9
10
11
12

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

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

	$("#repassword").blur(function(){
		//判断两次密码是否一致
		if($("#password").val() != $("#repassword").val()){
			$("#errorMessage").show();
			$("#errorMessage").html("两次密码输入不一致!!");
		}
		else{
			$("#errorMessage").hide();
		}
	})
1
2
3
4
5
6
7
8
9
10

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"
		)
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//在VisitorController中添加判断方法
	@RequestMapping("/judgeSMS")
	@ResponseBody
	public 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;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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>
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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";
	}
1
2
3
4
5
6
7
8
9
10

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