使用AJAX（包含正则表达式）验证用户登录的步骤
我们来分一下步骤吧：
1.HTML代码，页面先写出来；
2.正则表达式验证输入的用户名密码是否正确，失去焦点验证
3.Ajax异步提交
4.servlet这是后台处理代码获取数据并对比响应，然后跳转成功页面
效果图：
结构：
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="JS/jQuery.js"></script>
<style type="text/css">
table {
width: 360px;
height: 45px:
text-align: center;
margin-top: 120px;
border-collapse: collapse;
}
input {
width: 280px;
height: 30px;
}
</style>
</head>
<body>
<form action="#" method="post">
<center>
<table align="center" border="1">
<tr>
<td>用户名:</td>
<td><input type="text" name="name" id="username"
onblur="verifyName()" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name="pwd" id="mypwd"
onblur="verifyPwd()" /></td>
</tr>
<tr>
<td colspan="3" align="center" height="36px"><input
type="button" style="width: 8rem;height:27px" value="提交登录验证" /></td>
</tr>
</table>
</center>
</form>
<script type="text/javascript">
function verifyName() {
//用户名校验
var verifyName = document.getElementById("username").value;
var name = /^[A-Z][0-9A-Za-z_][a-zA-Z0-9_]{5,19}$/; // 大写字母开头 6-20位字符(不允许有符号但是允许有_)
if (!name.test(verifyName)) {
//$("#username").after("<span>大写字母开头6-20位字符(不允许有符号但是允许有_)</span>");
$("#username").css("border-color", "red");
return false;
} else {
return true;
}
}
function verifyPwd() {
//密码
var verifyPwd = document.getElementById("mypwd").value;
var pwd = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/; //大写开头 数字字母符号混合 8-15位
if (!pwd.test(verifyPwd)) {
$("#username").css("border-color", "red");
return false;
} else {
return true;
}
}
$(function() {
$(":button").on("click", function() {
$.ajax({
type : "post",
url : "AJAXServlet",
data : {
name : $("#username").val(),
pwd : $("#mypwd").val()
},
dataType : "text",
success : function(data) {
if (data == "ok") {
window.location.href = "show.jsp";
} else {
alert("登录失败！");
$("#mypwd").val("");
$("#username").focus().select();
}
}
});
});
});
</script>
</body>
</html>
servlet代码：
package com.chaz.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AJAXServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String name = "ZhangSan";
String pwd = "Zhang123456";
String ajaxName = request.getParameter("name");
String ajaxPwd = request.getParameter("pwd");
System.out.println(ajaxName+":"+ajaxPwd);
if(name.equals(ajaxName)&&pwd.equals(ajaxPwd)){
out.print("ok");
}else{
out.print("Error");
}
out.flush();
out.close();
}
}
web.xml:
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>AJAXServlet</servlet-name> <servlet-class>com.chaz.servlet.AJAXServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AJAXServlet</servlet-name> <url-pattern>/AJAXServlet</url-pattern> </servlet-mapping> </web-app>
跳转成功页面就这个😄：
<body> 登录成功！</body>
总结
以上所述是小编给大家介绍的使用AJAX（包含正则表达式）验证用户登录的步骤,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
php传值方式和ajax的验证功能
PHP前台传值到后台进行验证的3种方式 1.不外乎就是post,get和ajax方式 post和get方式就是在表单上用method方式规定主要就是ajax动态传值进行后台验证 2.ajax 动态传值代码如下 //给调用ajax的这里设一个函数 function u_ajax(uname,upass){ //创建ajax if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveOb
-
微信小程序实现简单input正则表达式验证功能示例
本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e
-
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:匹配任意一个数字或字母或下划线 等价于
-
Java使用正则表达式验证手机号和电话号码的方法
一个朋友需要,所以写了这两个,话不多说,看代码 中国电信号段 133.149.153.173.177.180.181.189.199 中国联通号段 130.131.132.145.155.156.166.175.176.185.186 中国移动号段 134(0-8).135.136.137.138.139.147.150.151.152.157.158.159.178.182.183.184.187.188.198 其他号段 14号段以前为上网卡专属号段,如中国联通的是145,中国移动的是147
-
Android 2018最新手机号验证正则表达式方法
下面给大家分享2018手机号正则表达式验证方法,具体内容如下所示: /** * 判断字符串是否符合手机号码格式 * 移动号段: 134,135,136,137,138,139,147,150,151,152,157,158,159,170,178,182,183,184,187,188 * 联通号段: 130,131,132,145,155,156,170,171,175,176,185,186 * 电信号段: 133,149,153,170,173,177,180,181,189 * @par
-
JS中验证整数和小数的正则表达式
验证整数和小数的正则表达式 网上很多关于验证小数的正则表达式,但是很多都不是百分百正确,所以我结合一些前辈的经验,自己写了一个. 验证非0开头的无限位整数和小数.整数支持无限位,小数点前支持无限位,小数点后最多保留两位. js代码如下: var reg = /^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^([^0][0-9]+|0)$/; 单独拆分: 1. 整数:/^([^0][0-9]+|0)$/ 2. 小数:/^(([^0][0-9]+|0)\.([0-9]{1,2})
-
用AJAX实现页面登陆以及注册用户名验证的简单实例
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX 是一种用于创建快速动态网页的技术.其核心是 JavaScript 对象 XMLHttpRequest.该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术.简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户. 通过在后台与
-
基于jQuery实现的Ajax 验证用户名唯一性实例代码
JSP部分代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <%@include file="/common/header.jsp"%> <title>用户管理</title> <script type="text/javascript&quo
-
Ajax验证用户名或昵称是否已被注册
JavaScript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力 .而用户名或昵称的验证就可以使XMLHttpRequest对象实现.下面是个小例子. 页面: 简单的输入框 <body> 昵称:<input type="text" name="username" ><span id="msg">请输入昵称</span><br> 密码:<in
-
使用AJAX（包含正则表达式）验证用户登录的步骤
我们来分一下步骤吧: 1.HTML代码,页面先写出来: 2.正则表达式验证输入的用户名密码是否正确,失去焦点验证 3.Ajax异步提交 4.servlet这是后台处理代码获取数据并对比响应,然后跳转成功页面 效果图: 结构: 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "
-
PHP+Ajax验证码验证用户登录
用AJAX 验证用户登录的一个好处是不刷新跳转页面,外加用到验证码就更安全了,摸索的写了下.一共用到三个文件: yz.php: 生成验证码的PHP 文件,将验证码将在SESSION 里,供登录时对比调用 index.php: 用户登录的HTML 文件 loginCheck.php: 验证用户登录的文件 下面一一解析: yz.php 文件 <?php session_start(); //生成验证码图 Header("Content-type: image/PNG"); //长与
-
vue-router beforeEach跳转路由验证用户登录状态
使用vue判断验证用户登录状态 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等. 其中router.beforeEach就是路由进入前的周期,同时有路由的来源和去向两个参数,可以判断和控制当前路由的走向和重定向. 一般router.beforeEach配合vuex全局状态储存使用,验证用户登录状态.也可以结合sessionStorage 和localStorage使用,原理相同. 用户登录状态验证 路由配置 定义需要判断登录状态的
-
Go WEB框架使用拦截器验证用户登录状态实现
目录 wego拦截器 main函数 登录逻辑 登录拦截器的实现 index页面的实现 wego拦截器 wego拦截器是一个action(处理器函数)之前或之后被调用的函数,通常用于处理一些公共逻辑.拦截器能够用于以下常见问题: 请求日志记录 错误处理 身份验证处理 wego中有以下拦截器: before_exec :执行action之前拦截器 after_exec :执行action之后拦截器 本文用一个例子来说明如何使用拦截器来实现用户登录状态的判定.在这个例子中,用户访问login_get来
-
spring aop action中验证用户登录状态的实例代码
最近在学习ssh框架时,照着网上做了一个商城系统,之前在一些需要用户存在的操作中,都是在每一个action中写重复的代码,这样做现在想起来并不好,想起了spring的aop,于是想通过aop来给每个需要用户操作的Action验证用户登录状态. 想法是这样的: 1. 用户登录时把userId放入session中 2. 通过spring 写一个advice来获取session中的userId,判断用户登录状态,如果userId不符合,则抛出自定义异常 3. 通过struts中配置来捕获异常,跳转界面
-
Asp.net mvc验证用户登录之Forms实现详解
这里我们采用asp.net mvc 自带的AuthorizeAttribute过滤器验证用户的身份,也可以使用自定义过滤器,步骤都是一样. 第一步:创建asp.net mvc项目, 在项目的App_Start文件夹下面有一个FilterConfig.cs,在这个文件中可以注册全局的过滤器.我们在文件中添加AuthorizeAttribute过滤器如下: public class FilterConfig { public static void RegisterGlobalFilters(Glo
-
.net MVC使用Session验证用户登录（4）
用最简单的Session方式记录用户登录状态 1.添加DefaultController控制器,重写OnActionExecuting方法,每次访问控制器前触发 public class DefaultController : Controller { protected override void OnActionExecuting(ActionExecutingContext filterContext) { base.OnActionExecuting(filterContext); va
-
[Asp.Net MVC4]验证用户登录实现实例
最近我们要做一个仿sina的微博,碰巧的是我最近在学习mvc,就想用mvc技术实现这个项目. 既然是微博,那不用想也应该知道肯定要有用户登陆,但是和常规的asp.NET登陆又不一样,以下是我一下午+一晚上的研究成果~~~ 首先,建好数据库以及表,这就不用说了吧. 下面说一下主要的结构 控制器: HomeController 这是主页的控制器 LoginController 这是登陆的控制器 类: CDBTemplate.cs 这是数据库数据对应的类,里边描述的是数据库的结构 //////////
-
jQuery实现验证用户登录
前言 前面的博客对jQuery有所介绍,所以接下来的这几篇博客是对jQuery的介绍,具体介绍方式是用例子呈现给大家. 内容 显示效果 输入之前 输入之后点击校验 废话少说,先上代码: HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="
-
Springboot+SpringSecurity+JWT实现用户登录和权限认证示例
如今,互联网项目对于安全的要求越来越严格,这就是对后端开发提出了更多的要求,目前比较成熟的几种大家比较熟悉的模式,像RBAC 基于角色权限的验证,shiro框架专门用于处理权限方面的,另一个比较流行的后端框架是Spring-Security,该框架提供了一整套比较成熟,也很完整的机制用于处理各类场景下的可以基于权限,资源路径,以及授权方面的解决方案,部分模块支持定制化,而且在和oauth2.0进行了很好的无缝连接,在移动互联网的授权认证方面有很强的优势,具体的使用大家可以结合自己的业务场景进行选