通過(guò)正則表達(dá)式使用ajax檢驗(yàn)注冊(cè)信息功能

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-11|欄目：正則表達(dá)式|點(diǎn)擊：次

本期博客內(nèi)容應(yīng)該不算多，我們此次的目的是通過(guò)正則表達(dá)式并利用ajax可以實(shí)現(xiàn)動(dòng)態(tài)交互的特點(diǎn)，檢驗(yàn)注冊(cè)的用戶名以及密碼是否合法。

Entity層

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

package cn.cpx.springmvc.entity;
import java.util.Date;
/**
 * 用戶實(shí)體類
 * @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;
 }
 
 //添加注冊(cè)信息
 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類我們實(shí)際此次只會(huì)用到用戶名和密碼兩個(gè)屬性，其他屬性此次不會(huì)使用到。

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

加上@ResponseBody注解，是為了確保返回JSON形式的數(shù)據(jù)，我們返回列表形式的字符串，并進(jìn)行轉(zhuǎn)義，如果用戶名已經(jīng)存在(這里僅有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對(duì)象獲取表單信息
 function checkName() {
 //console.log(1);
 var name = document.getElementById("uname").value;
 //console.log("用戶名:"+name);
 //console.log(document.getElementById("uname").placeholder);
 //根據(jù)用戶輸入內(nèi)容,完成頁(yè)面驗(yàn)證,用戶名只能是0-9,a-z,A-Z,也可以輸入中文
 //綜合正則表達(dá)式驗(yàn)證
 var unameCode = /^[0-9A-z\u4e00-\u9fa5]{3,10}$/;
 if (unameCode.test(name)) {
  console.log("用戶名命名合法!");
  //還要和后臺(tái)進(jìn)行驗(yàn)證,驗(yàn)證用戶名是否重復(fù),使用Ajax動(dòng)態(tài)交互
  $.ajax({
  type : 'post',
  url : 'user/checkUname.action',//請(qǐng)求的url地址,建議使用絕對(duì)地址
  data : 'uName='+name,//請(qǐng)求攜帶的參數(shù)
  dataType:'json',//如果后臺(tái)返回的數(shù)據(jù)是String改造的,這里需要指定返回類型,否則data.msg取不到值
  success : function(data) {//sucess中function的data可以解析后臺(tái)的數(shù)據(jù)
   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'>×用戶名重復(fù)!</font>";
   }
  },
  error : function() {//失敗回調(diào)函數(shù)
   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";
 }
 }
 //失去焦點(diǎn)事件
 function checkPwd() {
 var pwd = document.getElementById("upwd").value;
 //強(qiáng)密碼(必須包含大小寫字母和數(shù)字的組合,不能使用特殊字符,長(zhǎng)度在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="請(qǐng)輸入用戶名"
  onkeyup="checkName()" /> <span id="unameMsg"></span><br /> 
 <input type="password" name="upwd" id="upwd" placeholder="請(qǐng)輸入密碼"
  onblur="checkPwd()" /> <span id="upwdMsg"></span><br/>
 </form>
</body>
</html>

以上的代碼我們進(jìn)行一些解釋：

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

②檢驗(yàn)密碼其實(shí)原理差不多，我們也是通過(guò)正則表達(dá)式，要求密碼必須包含大小寫字母和數(shù)字的組合，不能使用特殊字符，長(zhǎng)度在6-12之間，密碼這邊相對(duì)簡(jiǎn)單一些，因?yàn)椴恍枰c后臺(tái)動(dòng)態(tài)交互，所以不使用ajax。
關(guān)于正則表達(dá)式如何寫以及如何檢驗(yàn)，這里提供一個(gè)網(wǎng)址供大家日常學(xué)習(xí)，鏈接為正則表達(dá)式在線測(cè)試。
接下來(lái)我們進(jìn)行運(yùn)行，截圖如下：

我們使用了兩種不同的事件，用戶名檢驗(yàn)使用的是onkeyup，它是按鍵松開(kāi)事件，密碼檢驗(yàn)使用的是onblur，它是失去焦點(diǎn)事件，好了，檢驗(yàn)結(jié)果也符合我們前面寫的邏輯思維了，本期博客就到這里了，我們下期見(jiàn)！

總結(jié)

以上所述是小編給大家介紹的通過(guò)正則表達(dá)式使用ajax檢驗(yàn)注冊(cè)信息功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

上一篇：詳解正則表達(dá)式Matcher類中g(shù)roup方法

欄目：正則表達(dá)式

下一篇：當(dāng)ES6遇上字符串和正則表達(dá)式

本文標(biāo)題：通過(guò)正則表達(dá)式使用ajax檢驗(yàn)注冊(cè)信息功能

本文地址：http://mengdiqiu.com.cn/a1/zhengzebiaodashi/11132.html

更多正則表達(dá)式

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

正則表達(dá)式

通過(guò)正則表達(dá)式使用ajax檢驗(yàn)注冊(cè)信息功能

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀