本期博客內(nèi)容應(yīng)該不算多，我們此次的目的是通過正則表達(dá)式并利用ajax可以實(shí)現(xiàn)動態(tài)交互的特點(diǎn)，檢驗(yàn)注冊的用戶名以及密碼是否合法。
Entity層
該層主要包含一個用戶類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;
}
//添加注冊信息
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í)際此次只會用到用戶名和密碼兩個屬性，其他屬性此次不會使用到。
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)前臺輸入用戶名及時驗(yàn)證
*/
@RequestMapping("/checkUname")
@ResponseBody
public String checkUname(User user) throws Exception {
//根據(jù)user(前臺輸入的用戶名)查詢數(shù)據(jù)庫中用戶名
//下面的判斷最好寫在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對象獲取表單信息
function checkName() {
//console.log(1);
var name = document.getElementById("uname").value;
//console.log("用戶名:"+name);
//console.log(document.getElementById("uname").placeholder);
//根據(jù)用戶輸入內(nèi)容,完成頁面驗(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("用戶名命名合法!");
//還要和后臺進(jìn)行驗(yàn)證,驗(yàn)證用戶名是否重復(fù),使用Ajax動態(tài)交互
$.ajax({
type : 'post',
url : 'user/checkUname.action',//請求的url地址,建議使用絕對地址
data : 'uName='+name,//請求攜帶的參數(shù)
dataType:'json',//如果后臺返回的數(shù)據(jù)是String改造的,這里需要指定返回類型,否則data.msg取不到值
success : function(data) {//sucess中function的data可以解析后臺的數(shù)據(jù)
console.log(data);
console.log(data.msg);
if("ok" == data.msg) {
document.getElementById("unameMsg").innerHTML = "font color='green'>radic;用戶名合法!/font>";
}else {
document.getElementById("unameMsg").innerHTML = "font color='red'>times;用戶名重復(fù)!/font>";
}
},
error : function() {//失敗回調(diào)函數(shù)
console.log("解析失敗!");
}
});
//document.getElementById("unameMsg").innerHTML = "font color='orange'>radic;用戶名合法!/font>";
} else {
console.log("命名不合法!");
//document.getElementById("unameMsg").innerHTML = "font color='orange'>times;用戶名不合法!/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ù)字的組合,不能使用特殊字符,長度在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'>radic;密碼合法!/font>";
} else {
document.getElementById("upwdMsg").innerHTML = "font color='blue'>times;密碼不合法!/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>
以上的代碼我們進(jìn)行一些解釋：
①檢查用戶名要求是3-10位，數(shù)字0-9，字母A-Z（a-z）以及中文都可以，但是不能為chen，后面加了一個提示信息，在后面span標(biāo)簽可以顯示，在ajax函數(shù)中，由于后臺接收的uname是String類型，而我們要確保返回json數(shù)據(jù)，所以加了一句'dataType:json'；
②檢驗(yàn)密碼其實(shí)原理差不多，我們也是通過正則表達(dá)式，要求密碼必須包含大小寫字母和數(shù)字的組合，不能使用特殊字符，長度在6-12之間，密碼這邊相對簡單一些，因?yàn)椴恍枰c后臺動態(tài)交互，所以不使用ajax。
關(guān)于正則表達(dá)式如何寫以及如何檢驗(yàn)，這里提供一個網(wǎng)址供大家日常學(xué)習(xí)，鏈接為正則表達(dá)式在線測試。
接下來我們進(jìn)行運(yùn)行，截圖如下：
我們使用了兩種不同的事件，用戶名檢驗(yàn)使用的是onkeyup，它是按鍵松開事件，密碼檢驗(yàn)使用的是onblur，它是失去焦點(diǎn)事件，好了，檢驗(yàn)結(jié)果也符合我們前面寫的邏輯思維了，本期博客就到這里了，我們下期見！
總結(jié)
以上所述是小編給大家介紹的通過正則表達(dá)式使用ajax檢驗(yàn)注冊信息功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
您可能感興趣的文章:- Ajax和PHP正則表達(dá)式驗(yàn)證表單及驗(yàn)證碼
- JS正則表達(dá)式完美實(shí)現(xiàn)身份證校驗(yàn)功能
- 正則表達(dá)式對qq號碼校驗(yàn)
- JS 密碼強(qiáng)度校驗(yàn)的正則表達(dá)式(簡單且好用)
- jquery 正整數(shù)數(shù)字校驗(yàn)正則表達(dá)式
- JavaScript正則表達(dá)式校驗(yàn)非零的正整數(shù)實(shí)例
- 利用js正則表達(dá)式校驗(yàn)正數(shù)、負(fù)數(shù)、和小數(shù)
