文章詳情頁(yè)
使用AJAX（包含正則表達(dá)式）驗(yàn)證用戶登錄的步驟
瀏覽：585日期：2022-06-11 18:01:27
我們來(lái)分一下步驟吧：
1.HTML代碼，頁(yè)面先寫(xiě)出來(lái)；
2.正則表達(dá)式驗(yàn)證輸入的用戶名密碼是否正確，失去焦點(diǎn)驗(yàn)證
3.Ajax異步提交
4.servlet這是后臺(tái)處理代碼獲取數(shù)據(jù)并對(duì)比響應(yīng)，然后跳轉(zhuǎn)成功頁(yè)面
效果圖：
結(jié)構(gòu)：
代碼如下：
<%@ 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" value="提交登錄驗(yàn)證" /></td> </tr> </table> </center> </form> <script type="text/javascript"> function verifyName() { //用戶名校驗(yàn) var verifyName = document.getElementById("username").value; var name = /^[A-Z][0-9A-Za-z_][a-zA-Z0-9_]{5,19}$/; // 大寫(xiě)字母開(kāi)頭 6-20位字符(不允許有符號(hào)但是允許有_) if (!name.test(verifyName)) { //$("#username").after("<span>大寫(xiě)字母開(kāi)頭6-20位字符(不允許有符號(hào)但是允許有_)</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}$/; //大寫(xiě)開(kāi)頭 數(shù)字字母符號(hào)混合 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>
跳轉(zhuǎn)成功頁(yè)面就這個(gè)😄：
<body> 登錄成功！</body>
總結(jié)
以上所述是小編給大家介紹的使用AJAX（包含正則表達(dá)式）驗(yàn)證用戶登錄的步驟,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
標(biāo)簽：
Ajax
相關(guān)文章：
1. JSP Tag Library-AjaxTags 1.0, released2. 關(guān)于異步請(qǐng)求ajax原理以及原生Ajax、$.ajax的基本使用詳解3. ajax使用formdata上傳文件流4. AJAX實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果5. 原生Ajax之全面了解xhr的概念與使用6. Ajax引擎 ajax請(qǐng)求步驟詳細(xì)代碼7. Ajax實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)8. Ajax提交post請(qǐng)求案例分析9. 使用Ajax模仿百度搜索框的自動(dòng)提示功能實(shí)例10. Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)
排行榜
網(wǎng)公網(wǎng)安備