Ajax使用原生态JS验证用户名是否存在_javascript技巧

直接上代码:
reg_ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax请求servlet实现用户名是否存在验证</title>
</head>
<body>

  <script type="text/javascript">

    /**
     * 得到XMLHttpRequest对象
     */
    function getajaxHttp() {
      var xmlHttp;
      try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
      } catch (e) {
        // Internet Explorer
        try {
          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
            alert("您的浏览器不支持AJAX!");
            return false;
          }
        }
      }
      return xmlHttp;
    }
    /**
     * 发送ajax请求
     * url--请求到服务器的URL
     * methodtype(post/get)
     * con (true(异步)|false(同步))
     * functionName(回调方法名,不需要引号,这里只有成功的时候才调用)
     * (注意:这方法有二个参数,一个就是xmlhttp,一个就是要处理的对象)
     */
    function ajaxrequest(url, methodtype, con, functionName) {
      //获取XMLHTTPRequest对象
      var xmlhttp = getajaxHttp();
      //设置回调函数(响应的时候调用的函数)
      xmlhttp.onreadystatechange = function() {
        //这个函数中的代码在什么时候被XMLHTTPRequest对象调用?
        //当服务器响应时,XMLHTTPRequest对象会自动调用该回调方法
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            functionName(xmlhttp.responseText);
          }
        }
      };
      //创建请求
      xmlhttp.open(methodtype, url, con);
      //发送请求
      xmlhttp.send();
    }
    function checkUsername() {
      var username=document.getElementById('username').value;
      //调用ajax请求Servlet
      ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse);
    }
    function ckUsernameResponse(responseContents){
      if (responseContents=='yes') {
        document.getElementById('usernameMsg').innerHTML="<font color='red'>用户名存在</font>";
        document.getElementById('username').style="background-color: red";
      }else{
        document.getElementById('usernameMsg').innerHTML="";
        document.getElementById('username').style="background-color: white";
      }
    }

  </script>

  <table>
    <tr>
      <td>用户名</td>
      <td><input type="text" id="username" onblur="checkUsername()"/></td>
      <td><div id="usernameMsg"></div></td>
    </tr>
    <tr>
      <td>邮箱</td>
      <td><input type="text" id="email" /></td>
      <td><div id="emailMsg"></div></td>
    </tr>
  </table>

</body>
</html>

请求的Servlet代码如下,UserServlet.java

package cn.bestchance.servlet;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class UserServlet
 */
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request, response);
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String username=request.getParameter("username");
    //这里使用ArrayList代替从数据库中查询数据
    ArrayList<String> userList =new ArrayList<String>();
    userList.add("admin");
    userList.add("test");
    userList.add("chance");
    //验证用户名是否存在
    boolean flag = false;
    for (String string : userList) {
      if(string.equals(username)){
        flag = true;
        break;
      }
    }
    if(flag){//用户名已存在
      response.getWriter().print("yes");
    }else{//用户名不存在
      response.getWriter().print("no");
    }
  }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js验证用户名
原生态ajax、原生态的ajax、javascript用户名验证、javascript获取用户名、javascript ajax,以便于您获取更多的相关知识。

时间: 2024-10-11 17:22:09

Ajax使用原生态JS验证用户名是否存在_javascript技巧的相关文章

常用的js验证和数据处理总结_javascript技巧

前言 在开发web项目的时候,难免遇到各种对网页数据的处理,比如对用户在表单中输入的电话号码.邮箱.金额.身份证号.密码长度和复杂程度等等的验证,以及对后台返回 数据的格式化比如金额,返回的值为null,还有对指定日期之前或之后某一天或某一月的计算. 下面是给大家总结的一些在工作中常用到的js,有需要的可以参考学习. /** * 验证密码复杂度(必须包含数字字母) * @param str * @returns true:满足规则,false:不满足 */ function validateSt

js验证表单大全_javascript技巧

不错的JS验证~~~~~~~~~~~~~~~~~~~~~~~~~ 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false: */ function isIP(strIP) { if (isNull(strIP)) return false; var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if(re.test(strIP)) { if( RegExp.$1 <256 && R

js 验证身份证信息有效性_javascript技巧

以下是根据身份证号码编码规则,使用JS对其进行有效性验证代码 IdCard-Validate.js代码如下: 复制代码 代码如下: /** * 身份证15位编码规则:dddddd yymmdd xx p * dddddd:地区码 * yymmdd: 出生年月日 * xx: 顺序类编码,无法确定 * p: 性别,奇数为男,偶数为女 * <p /> * 身份证18位编码规则:dddddd yyyymmdd xxx y * dddddd:地区码 * yyyymmdd: 出生年月日 * xxx:顺序类

JS验证身份证有效性示例_javascript技巧

复制代码 代码如下: function checkIdcard(idcard){ var Errors=new Array( "验证通过", "身份证号码位数不对!", "身份证号码出生日期超出范围或含有非法字符!", "身份证号码校验错误!", "身份证地区非法!" ); var area={11:"北京",12:"天津",13:"河北",14:

js 验证用户名(大小写英文字母、汉字、数字、下划线)

  * 验证用户名   * (大小写英文字母.汉字.数字.下划线组成的长度3-12个字节)   *   * @parameter string str 字符串   * @return boolean   */  function checkusername(str){    return str.match(/^([u4e00-u9fa5]|[ufe30-uffa0]|[a-za-z0-9_]){3,12}$/);  }    /**   * 验证常规字符   * (只能输入大小写英文字母.汉字

基于PHP+Ajax实现表单验证的详解_php技巧

一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法用户通过onkeydown和onkeyup事件来触发响应事件.使用方法和onclick事件类似.onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘上的键被按下又抬起时触发.两种常用调用方法:(1)将事件添加到页面元素中,当用户输入完信息后,单击任意键,onkeydown事件被触发,并调用refer()函数.这种方法最简单,最直接,格式如下: 复制代码 代码如下: <script type="text

Javascript验证上传图片大小[前台处理]_javascript技巧

需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理. 2)前台处理: 也就是利用Javascript获取该图片大小. 显然第一种方式,很不好.因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本. 功能解析: 在这里我只介绍IE与FireFox两个浏览器的不同做法. IE6: 关键

JS 判断代码全收集_javascript技巧

/*$#################################################$*/ /* 程序功能:输入验证 */ /* 函数名称: */ /* function CheckData(valname,val,valimode,limitlen) */ /* 功能说明:验证字符串数据 */ /* function CheckUserName(val,min,max) */ /* 功能说明:验证用户名 */ /* function CheckPassWord(val,mi

js调试系列 初识控制台_javascript技巧

写在最开头:其实我以前就在考虑要不要写这个东西,因为这个东西确实不难,但是为什么会有这么多人问,他们问的不是怎么用控制台,而是不知道控制台能干嘛,他们也知道有 console.log 之类的东西,但他们不知道为什么要用这么长的字符串代替 alert 输出信息.在他们眼里 alert 足以.好吧,我承认小小的吐槽了下,不过这个系列我只打算介绍下调试的基本知识,不会涉及太深,因为深入的东西结合js知识,如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么.我的目