在JSP中如何用JS驗證使用者名稱重複

阿新 • • 發佈：2019-01-15

要做這種校驗首先你得對js的常用方法和ajax瞭解，首先我給你一個jsp頁面，頁面上有詳細註釋，有些基礎都可以看明白

<%@ 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">
  function validteName(){
   //1、建立XMLHttpRequest物件
   var client = null;
   if((typeof XMLHttpRequest) != 'undefined'){
    client = new XMLHttpRequest();//FF
   }else{
    client = new ActiveXObject(Microsoft.XMLHTTP);//IE
   }
   //2、建立與伺服器端的連線
   var uname = document.getElementById('uname').value;
   var url = "/ajax_day01/validatename?uname=" + uname;
   client.open('GET',url,true);
   //[3、傳送資料]
   client.send(null);
   //4、伺服器端處理

   //5、響應完成後,做頁面展示工作
   client.onreadystatechange = function(){
    if(client.readyState==1||client.readyState==2
     ||client.readyState==3){
     document.getElementById('msg1').innerHTML = "<img src='../images/loading025.gif'>正在研究~~~";
    }
    if(client.readyState==4){//響應完成
     var resText = client.responseText;//獲取伺服器端的響應資料
     if(resText=='1'){
      document.getElementById('msg1').innerHTML = "此使用者名稱被佔用,請更換";
     }else if(resText=='0'){
       document.getElementById('msg1').innerHTML = "可用，請牢記";
     }
    }
   }
  }
</script>
</head>
<body>
  <div>
   <form>
    <div>
     <label>使用者名稱：</label>
     <input type='text' name='uname' id='uname'
      onblur='validteName();'>
     <span id='msg1'>請輸入使用者名稱</span>
    </div>
    <div>
     <label>密  碼：</label>
     <input type='password' name='pwd' id='pwd'>
     <span id='msg2'>請輸入密碼</span>
    </div>
    <div>
     <input type='submit' value='√'>
     <input type='reset' value='×'>
    </div>
   </form>
  </div>
</body>
</html>

這樣在你填寫姓名欄時，你觸動了一個js函式validteName()，他會將你的填寫的內容傳送到"/ajax_day01/validatename?uname=" + uname 這是一個servlet 也可以是個Action ，無所謂你如果沒學過struts1.x或者2系列的話，那就用servlet就可以，傳送到servlet後你可以從資料庫中檢視時否有這個名字，

寫一點servlet中的程式碼

String name=request.getParameter("uname");

      if(name.equals("frank")){

       response.getWriter().write("1");

     }
     else{
       response.getWriter().write("0");

     }

     }

假如frank是你從資料庫裡查出來的，這樣相應文字可以被髮到你的那個頁面 var resText =

client.responseText;//獲取伺服器端的響應資料這個可以接到你的響應文字，你可以做判斷在頁面

改變些什麼提示是否重複，你知道你看懂沒，如果沒能理解就看一些ajax的知識吧，這裡的邏輯很簡單的，

只要看看ajax就可以掌握了。

在JSP中如何用JS驗證使用者名稱重複

在JSP中如何用JS驗證使用者名稱重複

一個jsp中用esayui dialog 彈出另一個jsp,並操作另一個jsp中js的變數和方法

JS驗證控件jQuery Validate

js驗證漢字正則表達式

繞過js驗證

ajaxFileUpload上傳帶參數文件及JS驗證文件大小

js驗證郵箱，手機號

Jsp制作驗證碼

js 觀察者模式

jsp引入js文件

js 驗證字符串是否全為中文

js驗證身份證號碼是否合規

JSP頁面中驗證碼的調用方法

js驗證4位數字

一些網站後臺模板源碼分析 Particleground.js 驗證碼

js驗證登錄註冊

JS驗證碼生成（入門級別）

js 驗證數據類型的4中方法

JS驗證身份證

validator js驗證器

在JSP中如何用JS驗證使用者名稱重複

相關推薦