您的位置：首页 > Web前端 > JavaScript

在JSP中如何用JS验证用户名重复

2013-09-25 14:58 225 查看

要做这种校验首先你得对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就可以掌握了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航