通过正则表达式使用ajax检验注册信息功能
本期博客内容应该不算多，我们此次的目的是通过正则表达式并利用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。
关于正则表达式如何写以及如何检验，这里提供一个网址供大家日常学习，链接为正则表达式在线测试。
接下来我们进行运行，截图如下：
我们使用了两种不同的事件，用户名检验使用的是onkeyup，它是按键松开事件，密码检验使用的是onblur，它是失去焦点事件，好了，检验结果也符合我们前面写的逻辑思维了，本期博客就到这里了，我们下期见！
总结
以上所述是小编给大家介绍的通过正则表达式使用ajax检验注册信息功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
Ajax和PHP正则表达式验证表单及验证码
模式匹配符: \:转义字符 例如:\b转义了b ^:正则表达式开始符号 $:正则表达式结束符号 *:匹配前面的字符出现0次或者n次 +:匹配前面的字符出现1次或者n次 ?:匹配前面的字符出现0次或者1次 .:匹配除了换行符以外的所有单个字符 |:或者的意思,例如x|y 匹配x或者y {n}:匹配前面的n个字符 {n,m}:匹配至少n个最多m个前面字符 [xyz]:匹配中括号里的任意一个字符 [^xyz]:匹配除了中括号里的任意一个字符等价于[0-9] \w:匹配任意一个数字或字母或下划线 等价于
-
JS 密码强度校验的正则表达式(简单且好用)
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>密码强度</title> <style type="text/
-
JavaScript正则表达式校验非零的正整数实例
话不多说,请看实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></titl
-
JS正则表达式完美实现身份证校验功能
注意: 1.只针对18为身份证号码进行校验,现在15位的应该很少了, 2.不区分xX大小写, 3.出生年份1900-2099,每月的天数也进行相关验证(考虑的闰月的情况), 4.校验规则详见,这个写的比较详细和清楚,相信看过后都可以自己写一个, https://jingyan.baidu.com/article/7f41ececff944a593d095c8c.html 5.目前还无法对区位码就进行精确校验,本人搜集整理了区位码,提供了一个查询api,仅攻参考. 有不精确的地方可以留言指出 ap
-
jquery 正整数数字校验正则表达式
限制用户输入的内容可以有如下做法: $("#id").keyup(fucntion(){//当键盘按下之后立即校验,并替换当前操作框中的内容 var value = $(this).val(); $(this).val(value.replace(reg,replace_data)); }); 最常见的就是限制用户只能录入数字 var reg = new RegExp("[^0-9]","g"); [^0-9]表示非0-9之间的数字,g表示全局
-
利用js正则表达式校验正数、负数、和小数
话不多少,直接附上代码实例,仅供参考 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>&l
-
正则表达式对qq号码校验
废话不多说了,直接给大家贴代码了,具体代码如下所示: package 正则表达式; /*对QQ号码进行校验 要求5~15位,不能以0开头,只能是数字*/ import java.util.regex.Matcher; import java.util.regex.Pattern; public class Test { public static void main(String[] args) { // TODO Auto-generated method stub String qq = "
-
通过正则表达式使用ajax检验注册信息功能
本期博客内容应该不算多,我们此次的目的是通过正则表达式并利用ajax可以实现动态交互的特点,检验注册的用户名以及密码是否合法. Entity层 该层主要包含一个用户类User,代码如下: package cn.cpx.springmvc.entity; import java.util.Date; /** * 用户实体类 * @author autumn_leaf * */ public class User { private int uId; private String uName; pr
-
EasyUI框架 使用Ajax提交注册信息的实现代码
EasyUI框架 使用Ajax提交注册信息的实现代码 一.服务器代码: @Controller @Scope("prototype") public class StudentAction extends BaseAction<Student> { private static final long serialVersionUID = -2612140283476148779L; private Logger logger = Logger.getLogger(Stude
-
JavaScript正则表达式实现注册信息校验功能
目录 注册信息校验 需求 案例分析 Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配,只要字符串包含了正则表达式的内容就返回true 正则表达式 匹配字符串 Java中匹配结果 JavaScript中匹配结果 \d{3} a123b false true ^\d{3} 123b false true \d{3}$ a123 false true ^\d{3}$ 123 true true 注册信息校验 需求 在JS中使
-
ajax无刷新验证注册信息示例
ajax无刷新验证注册信息示例,其大概思路如下: 一.把注册的html页面做好(html+css) 1.不需要form表单,直接用div包着 2.需要四个标签来显示正确.错误的信息显示 3.不用submit提交按钮,直接用button 如图: 二.把ajax做成一个函数,通过传简单的参数可以与服务器进行数据交换. 1.这个ajax函数前面有一篇如何处理利用ajax处理返回数据的文章中详细说明了. 2.ajax函数需要三个参数,url,jsonData,getMsg.这里的url都是regProc
-
JS+jQuery实现注册信息的验证功能
用JS和JQuery实现的效果是一样的. HTML代码 <legend> 请填写注册信息</legend> <form action="index.html" method="post"> <table style="text-align: right;"> <tr> <td>用户名:</td> <td><input type="tex
-
ajax实现文件异步上传并回显文件相关信息功能示例
本文实例讲述了ajax实现文件异步上传并回显文件相关信息功能.分享给大家供大家参考,具体如下: 上传文件的信息 <div class="form-group"> <div class="col-sm-4"> <label class="control-label">应用文件</label> </div> <div class="col-sm-8"> <
-
正则表达式进行页面表单验证功能
一般做到注册页面的时候,当用户填完信息,都需要对他们的信息进行验证,这就要用到正则表达式,具体看下面这个例子. 效果图:(当用户填写的信息不符合规范时显示错误提示) 我只提供了html结构和js,样式你们按照自己的设计稿自己写,我是分别给正确的时候和错误的时候加了不同的class,用了不同的高度,正确是高度小,可以把提示的红字隐藏. html结构: <div id="wrap"> <h1>注册</h1> <div> <input t
-
jquery+ajax实现注册实时验证实例详解
本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了一遍,给记录下来O(∩_∩)O哈! 先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了: 这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如果需要在出错时执行函数,请使用 $.ajax. 复制代码 代码如下: $(selector
-
thinkPHP实现基于ajax的评论回复功能
本文实例讲述了thinkPHP实现基于ajax的评论回复功能.分享给大家供大家参考,具体如下: 控制器代码: <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { public function index(){ $num = M('comment')->count(); //获取评论总数 $this->assign('num',$num); $d
-
ASP.NET搭配Ajax实现搜索提示功能
平时的软件开发中,信息的搜索是经常碰到的,增加搜索关键字提示是提高用户体验的一种很好的办法.今天就介绍下在ASP.NET如何利用AJAX来实现搜索的信息提示! 1.需要了解的一些知识点 (1)AJAX对象不同浏览器的创建 不同的浏览器对AJAX(XMLHttpRequest)对象的实现是不一样的,例如IE浏览器是通过ActiveX控件来实现AJAX对象.而其他一些浏览器比如火狐,它将AJAX对象实现成了一个浏览器内部的对象叫XMLHttpRequest,所以不同的浏览器创建AJAX对象的方式也就