通過正則表達式使用ajax檢驗注冊信息功能

2020-01-20 21:33:43

字體：大中小

來源：轉載

供稿：網友

本期博客內容應該不算多，我們此次的目的是通過正則表達式并利用ajax可以實現動態交互的特點，檢驗注冊的用戶名以及密碼是否合法。

Entity層

該層主要包含一個用戶類User,代碼如下：

package cn.cpx.springmvc.entity;import java.util.Date;/** * 用戶實體類 * @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;//用戶頭像 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; }  //添加注冊信息 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  + "]"; }}

上述User類我們實際此次只會用到用戶名和密碼兩個屬性，其他屬性此次不會使用到。

Controller層

我們此次為操作方便，Dao層和Service層就不寫了，留給讀者自己去思考。我們新建UserController類，代碼如下：

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 { /** * 根據輸入的用戶名查詢用戶名是否存在,實現前臺輸入用戶名及時驗證 */ @RequestMapping("/checkUname") @ResponseBody public String checkUname(User user) throws Exception { //根據user(前臺輸入的用戶名)查詢數據庫中用戶名 //下面的判斷最好寫在Service中 //使用String result = userService.checkUname(user); if("chen".equals(user.getuName())) {  return "{/"msg/":/"no/"}"; } return "{/"msg/":/"ok/"}"; }}

加上@ResponseBody注解，是為了確保返回JSON形式的數據，我們返回列表形式的字符串，并進行轉義，如果用戶名已經存在(這里僅有chen)，則返回msg:no，相反，返回msg:ok。

視圖層

我們新建register.jsp,代碼如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script><script> //使用功能DOM對象獲取表單信息 function checkName() { //console.log(1); var name = document.getElementById("uname").value; //console.log("用戶名:"+name); //console.log(document.getElementById("uname").placeholder); //根據用戶輸入內容,完成頁面驗證,用戶名只能是0-9,a-z,A-Z,也可以輸入中文 //綜合正則表達式驗證 var unameCode = /^[0-9A-z/u4e00-/u9fa5]{3,10}$/; if (unameCode.test(name)) {  console.log("用戶名命名合法!");  //還要和后臺進行驗證,驗證用戶名是否重復,使用Ajax動態交互  $.ajax({  type : 'post',  url : 'user/checkUname.action',//請求的url地址,建議使用絕對地址  data : 'uName='+name,//請求攜帶的參數  dataType:'json',//如果后臺返回的數據是String改造的,這里需要指定返回類型,否則data.msg取不到值  success : function(data) {//sucess中function的data可以解析后臺的數據   console.log(data);   console.log(data.msg);   if("ok" == data.msg) {   document.getElementById("unameMsg").innerHTML = "<font color='green'>√用戶名合法!</font>";   }else {   document.getElementById("unameMsg").innerHTML = "<font color='red'>×用戶名重復!</font>";   }  },  error : function() {//失敗回調函數   console.log("解析失敗!");  }  });  //document.getElementById("unameMsg").innerHTML = "<font color='orange'>√用戶名合法!</font>"; } else {  console.log("命名不合法!");  //document.getElementById("unameMsg").innerHTML = "<font color='orange'>×用戶名不合法!</font>";  document.getElementById("unameMsg").innerHTML = "x 用戶名不合法!";  //使用JS可以改變CSS的樣式  document.getElementById("unameMsg").style.color = "red";  document.getElementById("unameMsg").style.fontSize = "20px"; } } //失去焦點事件 function checkPwd() { var pwd = document.getElementById("upwd").value; //強密碼(必須包含大小寫字母和數字的組合,不能使用特殊字符,長度在6-12之間) var upwdCode = /^(?=.*/d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,12}$/; if (upwdCode.test(pwd)) {  document.getElementById("upwdMsg").innerHTML = "<font color='blue'>√密碼合法!</font>"; } else {  document.getElementById("upwdMsg").innerHTML = "<font color='blue'>×密碼不合法!</font>" } }</script></head><body> <form method="post"> <input type="text" name="uname" id="uname" placeholder="請輸入用戶名"  onkeyup="checkName()" /> <span id="unameMsg"></span><br />  <input type="password" name="upwd" id="upwd" placeholder="請輸入密碼"  onblur="checkPwd()" /> <span id="upwdMsg"></span><br/> </form></body></html>

以上的代碼我們進行一些解釋：

①檢查用戶名要求是3-10位，數字0-9，字母A-Z（a-z）以及中文都可以，但是不能為chen，后面加了一個提示信息，在后面span標簽可以顯示，在ajax函數中，由于后臺接收的uname是String類型，而我們要確保返回json數據，所以加了一句'dataType:json'；

②檢驗密碼其實原理差不多，我們也是通過正則表達式，要求密碼必須包含大小寫字母和數字的組合，不能使用特殊字符，長度在6-12之間，密碼這邊相對簡單一些，因為不需要與后臺動態交互，所以不使用ajax。
關于正則表達式如何寫以及如何檢驗，這里提供一個網址供大家日常學習，鏈接為正則表達式在線測試。
接下來我們進行運行，截圖如下：

��ͼƬ��