當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[转载]使用jquery实现用户名验证

發布時間：2023/12/20 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 [转载]使用jquery实现用户名验证小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用jquery實現用戶名驗證

我們經常在網上注冊的時候，當輸入錯誤的用戶名的時候，右邊會自動出現相應的警告信息，那么今天我們就介紹一下如何使用jquery實現上述功能！我們先看一下截圖（此截圖摘自網易）圖一圖二圖三圖四我們可以通過看網易的源碼，看出網易也是依靠jquery來實現上述功能的。我們現在先把最簡化的代碼給大家分享（此代碼不注重頁面的設計美觀，就完成最基礎功能），后面如果有時間，我會逐步再把優化后的代碼給大家分享！第一：注冊頁面代碼 ? <%@?page?language="java"?contentType="text/html; charset=GBK"%> <!DOCTYPE?html?PUBLIC?"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link?href="css/style.css"?rel="stylesheet"?type="text/css"?/> <script?type="text/javascript"?src="jslib/jquery.js"></script> <script?type="text/javascript"?src="jslib/function.js"></script> <title>測試用戶名表單輸入</title> </head> <body> <input?type="hidden"?name="tmp"?id="tmp"?value=""?/> <table>  ????<tr> ???????<td>用戶名：<input?type="text"?id="username"></td> ???????<td><input?type="button"?value="檢測"?onclick="verify()"></td> ???????<td> ???????? ?????????????? ????????????????<div?id="div_uname_rule"?class="name-pop"> ??????????????????????????¤6~18個字符，包括字母、數字、下劃線<br> ??????????????????????????¤字母開頭，字母和數字結尾，不區分大小寫<br> ????????????????</div> ?????????? ?????????? ?????????????????<div?id="div_uname_err_info"?class="name-pop"></div>?? ?????????? ??????????</td> ????</tr>  ????<tr> ???????<td>密碼?：<input?type="text"?id="password"></td> ????</tr> </table> </body> 第二：css代碼(如果大家想設計的漂亮一些，需要在此多下些功夫，我只簡單的設計了一個)

div.name-pop{
?background-color:#EDEDEB;
?position:absolute;
?height:auto;
?left:310px;
?top:14px;
?width:320px;
?border: 1px red solid;
?display:none;
?padding-left:5px;
?padding-top:5px;
?padding-bottom: 5px;
?padding-right: 5px
}
第三：function.js代碼 function chkUsername() {
?var username = $.trim($("#username").val());
?if(username=="") {
??return 0;
?}
?else if( /^\d.*$/.test( username ) ){
? //用戶名不能以數字開頭
??return -1;
?}
?else if(username.length<6 || username.length>18 ){
? //合法長度為6-18個字符
??return -2;
?}
? else if(! /^\w+$/.test( username ) ){
? //用戶名只能包含_,英文字母，數字
?? return -3;
?}
?else if(! /^([a-z]|[A-Z])[0-9a-zA-Z_]+$/.test( username ) ){
? //用戶名只能英文字母開頭
??return -4;
?}
?else if(!(/[0-9a-zA-Z]+$/.test( username ))){
? //用戶名只能英文字母或數字結尾
??return -5;
?}
? return 1;
}?
$(document).ready(function(){
? /** ----------- 用戶名輸入框事件 ----------- */
? //當文本框成為焦點時
? $("#username").bind("focus", function(){
? var ret=chkUsername();
? if(ret==0){
? //用戶名輸入框為空,顯示規則
?? $("#div_uname_err_info").hide();
?? $("#div_uname_rule").show();??
? }
? return false;
? });?
??
? //當文本框失去焦點時
? $("#username").bind("blur", function(){ var ret=chkUsername();
?? $("#div_uname_rule").hide();
?? $("#div_uname_err_info").show();
?? if (ret>0){
??? var url="testServlet?name="+$("#username").val();
??? $.get(url,null,callback);
?? }
?? else if(ret==0){
?? //用戶名輸入框為空,顯示規則
??? $("#div_uname_err_info").html("用戶名不能為空");??
?? }?
??else {
???
??? if(ret == -1){
???? //顯示具體的錯誤內容
???? $("#div_uname_err_info").html("用戶名不能以數字開頭");
??? }
??? else if(ret == -2){ $("#div_uname_err_info").html("合法長度為6-18個字符");
??? }
??? else if(ret == -3){
???? $("#div_uname_err_info").html("用戶名只能包含_,英文字母,數字 ");
??? }
??? else if(ret == -4){
???? $("#div_uname_err_info").html("用戶名只能英文字母開頭");
??? }
??? else if(ret == -5){
???? $("#div_uname_err_info").html("用戶名只能英文字母或數字結尾");
??? }
??}
?? return false;
? });?
});
? function verify(){
?? var ret=chkUsername();
?? if (ret>0){
?? var url="testServlet?name="+$("#username").val();
?? $.get(url,null,callback); ???//將文本框中的數據發送到頁面上
?? }
? }
? //接收服務器返回的數值，將服務器返回的數據動態的顯示在頁面上
? function callback(data){
?? var resultObj=$("#div_uname_err_info");
?? resultObj.html(data);
? }
?? 第四：編寫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 testServlet extends HttpServlet { /**
? *?
? */
?private static final long serialVersionUID = -416104398788674508L; public void doGet(HttpServletRequest request, HttpServletResponse response)
???throws ServletException, IOException {
??response.setContentType("text/html;charset=GBK");
??String name=request.getParameter("name");
??PrintWriter out=response.getWriter();
??if (name.equals("hanmei")){
???out.println("用戶名"+name+"已存在");
??}else{
???out.println("用戶名"+name+"不存在，可以使用");
??}
?
?} public void doPost(HttpServletRequest request, HttpServletResponse response)
???throws ServletException, IOException { doGet(request,response);
?}
}
第五：修改web.xml文件 <?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"?
?xmlns="http://java.sun.com/xml/ns/j2ee"?
?xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"?
?xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee?
?http://java.sun.com/xml/ns/j2ee/web-app_2_4.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>testServlet</servlet-name>
??? <servlet-class>testServlet</servlet-class>
? </servlet> <servlet-mapping>
??? <servlet-name>testServlet</servlet-name>
??? <url-pattern>/testServlet</url-pattern>
? </servlet-mapping>
? <welcome-file-list>
??? <welcome-file>index.jsp</welcome-file>
? </welcome-file-list>
</web-app>
備注：別忘了下載jquery文件拷貝到相應的路徑下通過以上步驟，就可以實現用戶驗證了

本文出自 “快樂分享” 博客，請務必保留此出處http://hanmei.blog.51cto.com/521325/203139

總結

以上是生活随笔為你收集整理的[转载]使用jquery实现用户名验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：最大流（Max Flow）
下一篇：固态硬盘简称是不是ssd_小白科普：没想