我们来分一下步调吧：
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="https://www.jb51.net/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> <tr> <td>用户名:</td> <td><input type="text" onblur="verifyName()" /></td> </tr> <tr> <td>暗码:</td> <td><input type="text" onblur="verifyPwd()" /></td> </tr> <tr> <td colspan="3"><input type="button" 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 "> <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（包括正则表达式）验证用户登录的步调,但愿对各人有所辅佐，假如各人有任何疑问请给我留言，小编会实时回覆各人的。在此也很是感激各人对剧本之家网站的支持！
假如你以为本文对你有辅佐，接待转载，烦请注明出处，感谢！
您大概感乐趣的文章: