通过正则表达式使用ajax检验注册信息功能

本期博客内容应该不算多，我们此次的目的是通过正则表达式并利用ajax可以实现动态交互的特点，检验注册的用户名以及密码是否合法。

Entity层

该层主要包含一个用户类User,代码如下：

1. package cn.cpx.springmvc.entity;
2. import java.util.Date;
3. /**
4. * 用户实体类
5. * @author autumn_leaf
6. *
7. */
8. public class User {
9.  
10. private int uId;
11. private String uName;
12. private String uPwd;
13. private String uPhone;
14. private double uBalance;
15. private int uState;
16. private int uRole;
17. private String uImage;//用户头像
18. private Date uBirth;
19.  
20. public int getuId() {
21. return uId;
22. }
23. public void setuId(int uId) {
24. this.uId = uId;
25. }
26. public String getuName() {
27. return uName;
28. }
29. public void setuName(String uName) {
30. this.uName = uName;
31. }
32. public String getuPwd() {
33. return uPwd;
34. }
35. public void setuPwd(String uPwd) {
36. this.uPwd = uPwd;
37. }
38. public String getuPhone() {
39. return uPhone;
40. }
41. public void setuPhone(String uPhone) {
42. this.uPhone = uPhone;
43. }
44. public double getuBalance() {
45. return uBalance;
46. }
47. public void setuBalance(double uBalance) {
48. this.uBalance = uBalance;
49. }
50. public int getuState() {
51. return uState;
52. }
53. public void setuState(int uState) {
54. this.uState = uState;
55. }
56. public int getuRole() {
57. return uRole;
58. }
59. public void setuRole(int uRole) {
60. this.uRole = uRole;
61. }
62.  
63. public String getuImage() {
64. return uImage;
65. }
66. public void setuImage(String uImage) {
67. this.uImage = uImage;
68. }
69.  
70. public Date getuBirth() {
71. return uBirth;
72. }
73. public void setuBirth(Date uBirth) {
74. this.uBirth = uBirth;
75. }
76.  
77. public User(int uId, String uName, String uPwd, String uPhone, double uBalance, int uState,int uRole,String uImage,Date uBirth) {
78. super();
79. this.uId = uId;
80. this.uName = uName;
81. this.uPwd = uPwd;
82. this.uPhone = uPhone;
83. this.uBalance = uBalance;
84. this.uState = uState;
85. this.uRole = uRole;
86. this.uImage = uImage;
87. this.uBirth = uBirth;
88. }
89. public User() {
90. super();
91. }
92. public User(String uName, String uPwd, String uPhone) {
93. super();
94. this.uName = uName;
95. this.uPwd = uPwd;
96. this.uPhone = uPhone;
97. }
98.  
99. //添加注册信息
100. public User(String uName, String uPwd, String uPhone, Date uBirth) {
101. super();
102. this.uName = uName;
103. this.uPwd = uPwd;
104. this.uPhone = uPhone;
105. this.uBirth = uBirth;
106. }
107.  
108. public User(String uName, String uPwd, String uPhone, String uImage) {
109. super();
110. this.uName = uName;
111. this.uPwd = uPwd;
112. this.uPhone = uPhone;
113. this.uImage = uImage;
114. }
115.  
116. public User(String uName, String uPwd) {
117. super();
118. this.uName = uName;
119. this.uPwd = uPwd;
120. }
121. @Override
122. public String toString() {
123. return "User [uId=" + uId + ", uName=" + uName + ", uPwd=" + uPwd + ", uPhone=" +uPhone + ", uBalance="
124. + uBalance + ", uState=" + uState + ", uRole=" + uRole + ", uImage=" + uImage + ", uBirth=" + uBirth
125. + "]";
126. }
127. }

上述User类我们实际此次只会用到用户名和密码两个属性，其他属性此次不会使用到。

Controller层

我们此次为操作方便，Dao层和Service层就不写了，留给读者自己去思考。我们新建UserController类，代码如下：

1. package cn.cpx.springmvc.controller;
2. import org.springframework.stereotype.Controller;
3. import org.springframework.web.bind.annotation.RequestMapping;
4. import org.springframework.web.bind.annotation.ResponseBody;
5. import cn.cpx.springmvc.entity.User;
6. @Controller
7. @RequestMapping("/user")
8. public class UserController {
9. /**
10. * 根据输入的用户名查询用户名是否存在,实现前台输入用户名及时验证
11. */
12. @RequestMapping("/checkUname")
13. @ResponseBody
14. public String checkUname(User user) throws Exception {
15. //根据user(前台输入的用户名)查询数据库中用户名
16. //下面的判断最好写在Service中
17. //使用String result = userService.checkUname(user);
18. if("chen".equals(user.getuName())) {
19. return "{\"msg\":\"no\"}";
20. }
21. return "{\"msg\":\"ok\"}";
22. }
23. }

加上@ResponseBody注解，是为了确保返回JSON形式的数据，我们返回列表形式的字符串，并进行转义，如果用户名已经存在(这里仅有chen)，则返回msg:no，相反，返回msg:ok。

视图层

我们新建register.jsp,代码如下：

1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. pageEncoding="UTF-8"%>
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <meta charset="UTF-8">
7. <title>Insert title here</title>
8. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
9. <script>
10. //使用功能DOM对象获取表单信息
11. function checkName() {
12. //console.log(1);
13. var name = document.getElementById("uname").value;
14. //console.log("用户名:"+name);
15. //console.log(document.getElementById("uname").placeholder);
16. //根据用户输入内容,完成页面验证,用户名只能是0-9,a-z,A-Z,也可以输入中文
17. //综合正则表达式验证
18. var unameCode = /^[0-9A-z\u4e00-\u9fa5]{3,10}$/;
19. if (unameCode.test(name)) {
20. console.log("用户名命名合法!");
21. //还要和后台进行验证,验证用户名是否重复,使用Ajax动态交互
22. $.ajax({
23. type : 'post',
24. url : 'user/checkUname.action',//请求的url地址,建议使用绝对地址
25. data : 'uName='+name,//请求携带的参数
26. dataType:'json',//如果后台返回的数据是String改造的,这里需要指定返回类型,否则data.msg取不到值
27. success : function(data) {//sucess中function的data可以解析后台的数据
28. console.log(data);
29. console.log(data.msg);
30. if("ok" == data.msg) {
31. document.getElementById("unameMsg").innerHTML = "<font color='green'>√用户名合法!</font>";
32. }else {
33. document.getElementById("unameMsg").innerHTML = "<font color='red'>×用户名重复!</font>";
34. }
35. },
36. error : function() {//失败回调函数
37. console.log("解析失败!");
38. }
39. });
40. //document.getElementById("unameMsg").innerHTML = "<font color='orange'>√用户名合法!</font>";
41. } else {
42. console.log("命名不合法!");
43. //document.getElementById("unameMsg").innerHTML = "<font color='orange'>×用户名不合法!</font>";
44. document.getElementById("unameMsg").innerHTML = "x 用户名不合法!";
45. //使用JS可以改变CSS的样式
46. document.getElementById("unameMsg").style.color = "red";
47. document.getElementById("unameMsg").style.fontSize = "20px";
48. }
49. }
50. //失去焦点事件
51. function checkPwd() {
52. var pwd = document.getElementById("upwd").value;
53. //强密码(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在6-12之间)
54. var upwdCode = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,12}$/;
55. if (upwdCode.test(pwd)) {
56. document.getElementById("upwdMsg").innerHTML = "<font color='blue'>√密码合法!</font>";
57. } else {
58. document.getElementById("upwdMsg").innerHTML = "<font color='blue'>×密码不合法!</font>"
59. }
60. }
61. </script>
62. </head>
63. <body>
64. <form method="post">
65. <input type="text" name="uname" id="uname" placeholder="请输入用户名"
66. onkeyup="checkName()" /> <span id="unameMsg"></span><br />
67. <input type="password" name="upwd" id="upwd" placeholder="请输入密码"
68. onblur="checkPwd()" /> <span id="upwdMsg"></span><br/>
69. </form>
70. </body>
71. </html>

以上的代码我们进行一些解释：

①检查用户名要求是3-10位，数字0-9，字母A-Z（a-z）以及中文都可以，但是不能为chen，后面加了一个提示信息，在后面span标签可以显示，在ajax函数中，由于后台接收的uname是String类型，而我们要确保返回json数据，所以加了一句'dataType:json'；

②检验密码其实原理差不多，我们也是通过正则表达式，要求密码必须包含大小写字母和数字的组合，不能使用特殊字符，长度在6-12之间，密码这边相对简单一些，因为不需要与后台动态交互，所以不使用ajax。
关于正则表达式如何写以及如何检验，这里提供一个网址供大家日常学习，链接为正则表达式在线测试。
接下来我们进行运行，截图如下：

我们使用了两种不同的事件，用户名检验使用的是onkeyup，它是按键松开事件，密码检验使用的是onblur，它是失去焦点事件，好了，检验结果也符合我们前面写的逻辑思维了，本期博客就到这里了，我们下期见！

总结

以上所述是小编给大家介绍的通过正则表达式使用ajax检验注册信息功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！