Shulou(Shulou.com)06/02 Report--

How do I use ajax to verify registration information in regular expressions? I believe that many inexperienced people are at a loss about this, so this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Entity layer

This layer mainly contains a user class User, and the code is as follows:

Package cn.cpx.springmvc.entity;import java.util.Date;/** * user entity class * @ author autumn_leaf * * / public class User {private int uId; private String uName; private String uPwd; private String uPhone; private double uBalance; private int uState; private int uRole; private String uImage;// user profile private Date uBirth; public int getuId () {return uId;} public void setuId (int uId) {this.uId = uId;} public String getuName () {return uName } public void setuName (String uName) {this.uName = uName;} public String getuPwd () {return uPwd;} public void setuPwd (String uPwd) {this.uPwd = uPwd;} public String getuPhone () {return uPhone;} public void setuPhone (String uPhone) {this.uPhone = uPhone;} public double getuBalance () {return uBalance;} public void setuBalance (double uBalance) {this.uBalance = uBalance;} public int getuState () {return uState } public void setuState (int uState) {this.uState = uState;} public int getuRole () {return uRole;} public void setuRole (int uRole) {this.uRole = uRole;} public String getuImage () {return uImage;} public void setuImage (String uImage) {this.uImage = uImage;} public Date getuBirth () {return uBirth;} public void setuBirth (Date uBirth) {this.uBirth = uBirth } public User (int uId, String uName, String uPwd, String uPhone, double uBalance, int uState, int uRole,String uImage,Date uBirth) {super (); this.uId = uId; this.uName = uName; this.uPwd = uPwd; this.uPhone = uPhone; this.uBalance = uBalance; this.uState = uState; this.uRole = uRole; this.uImage = uImage; this.uBirth = uBirth;} public User () {super ();} public User (String uName, String uPwd, String uPhone) {super (); this.uName = uName This.uPwd = uPwd; this.uPhone = uPhone;} / / add registration information public User (String uName, String uPwd, String uPhone, Date uBirth) {super (); this.uName = uName; this.uPwd = uPwd; this.uPhone = uPhone; this.uBirth = uBirth;} public User (String uName, String uPwd, String uPhone, String uImage) {super (); this.uName = uName; this.uPwd = uPwd; this.uPhone = uPhone; this.uImage = uImage } public User (String uName, String uPwd) {super (); this.uName = uName; this.uPwd = uPwd;} @ Override public String toString () {return "User [uId=" + uId + ", uName=" + uName + ", uPwd=" + uPwd + ", uPhone=" + uPhone + ", uBalance=" + uBalance + ", uState=" + uState + ", uRole=" + uRole + ", uImage=" + uImage + ", uBirth=" + uBirth + "]";}}

In fact, we will only use the user name and password attributes of the above User class this time, while the other attributes will not be used this time.

Controller layer

This time, for the convenience of operation, we will not write the Dao layer and the Service layer, leaving it to the reader to think for himself. Let's create a new UserController class with the following code:

Package cn.cpx.springmvc.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import cn.cpx.springmvc.entity.User @ Controller@RequestMapping ("/ user") public class UserController {/ * query the existence of the user name according to the user name entered in the foreground, and verify the user name in time * / @ RequestMapping ("/ checkUname") @ ResponseBody public String checkUname (User user) throws Exception {/ / query the user name in the database according to user (the user name entered by the foreground). The following judgment is best written in Service / / use String result = userService.checkUname (user). If ("chen" .equals (user.getuName () {return "{\" msg\ ":\" no\ "};} return" {\ "msg\":\ "ok\"};}}

The @ ResponseBody annotation is added to ensure that data in the form of JSON is returned, we return a string in the form of a list and escape, and if the user name already exists (there is only chen here), msg:no is returned, instead, msg:ok is returned.

View layer

We create a new register.jsp with the following code:

Insert title here / / use the function DOM object to get form information function checkName () {/ / console.log (1); var name = document.getElementById ("uname"). Value; / / console.log ("user name:" + name); / / console.log (document.getElementById ("uname"). Placeholder) / / complete page verification according to the input of the user. The user name can only be 0-9, or you can enter Chinese / / comprehensive regular expression verification var unameCode = / ^ [0-9A-z\ u4e00 -\ u9fa5] {3jue 10} $/; if (unameCode.test (name)) {console.log ("user name is legal!") / / also verify with the backend to verify whether the user name is duplicated. Use Ajax dynamic interaction $.ajax ({type: 'post', url:' user/checkUname.action',// request url address. It is recommended to use the absolute address data: 'uName='+name,// request parameter dataType:'json',//. If the data returned by the backend is modified by String, you need to specify the return type. Otherwise data.msg cannot get the value success: the data of function in function (data) {/ / sucess can parse the data console.log (data) in the background. Console.log (data.msg); if ("ok" = = data.msg) {document.getElementById ("unameMsg") [xss_clean] = "√ user name is legal!";} else {document.getElementById ("unameMsg") [xss_clean] = "× duplicate user name!";}}, error: function () {/ / failed callback function console.log ("parsing failed!");}}) / / document.getElementById ("unameMsg") [xss_clean] = "legal √ user name!";} else {console.log ("invalid naming!"); / / document.getElementById ("unameMsg") [xss_clean] = "× invalid user name!"; document.getElementById ("unameMsg") [xss_clean] = "x invalid user name!"; / / you can change the style of CSS with JS document.getElementById ("unameMsg"). Style.color = "red" Document.getElementById ("unameMsg"). Style.fontSize = "20px";}} / / loss of focus event function checkPwd () {var pwd = document.getElementById ("upwd") .value / / strong password (must contain a combination of uppercase and lowercase letters and numbers, cannot use special characters, length is between 6 and 12) var upwdCode = / ^ (? =. *\ d) (? =. * [Amurz]) (? =. * [Amurz]) [a-zA-Z0-9] {6pime12} $/; if (upwdCode.test (pwd)) {document.getElementById ("upwdMsg") [xss_clean] = "√ password is legal!" } else {document.getElementById ("upwdMsg") [xss_clean] = "× password is invalid!"}}

Let's explain the above code:

① check user name requirements are 3-10 digits, the number 0-9, the letter Amurz (Amurz) and Chinese can be, but not chen, followed by a prompt message, after the span tag can show, in the ajax function, because the uname received by the background is of String type, and we want to make sure that the json data is returned, so add a 'dataType:json'

② verifies passwords with similar principles. We also use regular expressions to require passwords to contain a combination of uppercase and lowercase letters and numbers, and cannot use special characters. The length is between 6 and 12. The password is relatively simple, because there is no need for dynamic interaction with the background, so we do not use ajax.

On how to write regular expressions and how to test them, here is a URL for you to learn on a daily basis, and the link is regular expression online testing.

Next, let's run it. The screenshot is as follows:

After reading the above, have you learned how to use ajax to verify the registration information function in regular expressions? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.