javascript实现用户名是否存在的实时提醒

最新推荐文章于 2021-08-05 13:51:44 发布

小小花儿向太阳

最新推荐文章于 2021-08-05 13:51:44 发布

阅读量4.7k

点赞数 3

分类专栏： JSP javascript 前端文章标签： javascript JSP js

JSP 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

1.register.jsp中用户名处要这样写：

<tr>
  <td>用户名:</td>
  <td>
    <input type="text" name="username" size="25" maxlength="25" id="userid" οnblur="validate()">
    <div id="usermsg"></div>
  </td>
</tr>

2.在register.jsp的HTML标签<head></head>内写javascript：

<script type="text/javascript">
var req;
function validate() {
	var idField = document.getElementById("userid");
	var url = "validate.jsp?id=" + escape(idField.value);
	//alert(url);
	if(window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	req.open("GET", url, true);
	req.onreadystatechange = callback;
	req.send(null);
}

function callback() {
	if(req.readyState == 4) {
		if(req.status == 200) {
			//alert(req.responseText);
			var msg = req.responseXML.getElementsByTagName("msg")[0];
			//alert(msg);
	        setMsg(msg.childNodes[0].nodeValue);
		}
	}
}

function setMsg(msg) {
	//alert(msg);
	mdiv = document.getElementById("usermsg");
	if(msg == "invalid") {
		mdiv.innerHTML = "<font color='red'>username exists</font>";
	} else {
		mdiv.innerHTML = "<font color='green'>congratulations! you can use this username!</font>";
	}
}
</script>

3.创建validate.jsp页面，写校验username是否在数据库中存在的判断：

    <%@page import="com.shopping.User"%>
<%

response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevents catching at proxy server
//System.out.println(request.getParameter("id"));

String username = request.getParameter("id");
//System.out.println(username);
boolean userExist = User.isUserExist(username);
//System.out.println(userExist);
if(userExist){
	//check the database
	response.getWriter().write("<msg>invalid</msg>");
} else {
	response.getWriter().write("<msg>valid</msg>");
}
%>

4. 第3步中的User.isUserExist(username)是链接数据库查询的java文件，是类User中的一个方法，具体如下：

public static boolean isUserExist(String username){
		boolean userExist = false;
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;
		try {
			conn = DB.getConn();
			stmt = DB.createStmt(conn);
			String sql = "select * from user where username = '" + username + "'";
			rs = DB.executeQuery(stmt, sql);
			if(rs.next()){
				userExist = true;
				return userExist;
			} else {
				return userExist;
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			// TODO: handle finally clause
			DB.close(rs);
			DB.close(stmt);
			DB.close(conn);
		}
		
		return userExist;
	}/// end

另，附上判断用户名和密码复杂程度的文件regcheckdata.js。

function checkdata() {
	var ssn=form.username.value.toLowerCase();
	if (!checkUserName(ssn)) return false;  //用户名检查
	if( strlen(form.password.value)<6 || strlen(form.password.value)>16 ) {
		alert("\正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！")
		form.password.focus()
		return false;
	}
	if( strlen2(form.password.value) ) {
		alert("\您的密码中包含了非法字符，仅可用英文、数字、特殊字符！")
		form.password.focus()
		return false;
	}
	if( form.password.value == form.username.value ) {
		alert("\用户名和密码不能相同！")
		form.password.focus()
		return false;
	}
	if( form.password2.value =="" ) {
		alert("\请输入密码确认！")
		form.pwd2.focus()
		return false;
	}
	if( form.password2.value != form.password.value ) {
		alert("\两次密码输入不一致！")
		form.password.focus()
		return false;
	}
	
	//检查电话
	if( form.phone.value =="" ) {
		alert("\请输入电话！")
		form.phone.focus()
		return false;
	}
	
	//检查地址
	if( form.addr.value =="" ) {
		alert("\请输入送货地址！");
		form.addr.focus();
		return false;
	}
	
	return true;
}

function checkUserName(ssn){
	if( ssn.length<3 || ssn.length>18 ) {
		alert("\请输入正确的用户名,用户名长度为3-18位！")
		form.username.focus()
		return false;
	}
	if (isWhiteWpace(ssn)){
		alert("\请输入正确的用户名,用户名中不能包含空格！")
		form.username.focus()
		return false;
	}
	if (!isSsnString(ssn)){
		alert("\    对不起，您选择的用户名不正确或已被占用！用户名\n由a～z的英文字母(不区分大小写)、0～9的数字、点、减\n号或下划线组成，长度为3～18个字符，只能以数字或字母\n开头和结尾,例如:kyzy_001。")
		form.username.focus()
		return false;
	}
	return true;
}

function strlen(str){
	var len;
	var i;
	len = 0;
	for (i=0;i<str.length;i++){
		if (str.charCodeAt(i)>255) len+=2; else len++;
	}
	return len;
}

function strlen2(str){
	var len;
	var i;
	len = 0;
	for (i=0;i<str.length;i++){
		if (str.charCodeAt(i)>255) return true;
	}
	return false;
}

function isWhiteWpace (s)
{
	var whitespace = " \t\n\r";
	var i;
	for (i = 0; i < s.length; i++){   
		var c = s.charAt(i);
		if (whitespace.indexOf(c) >= 0) {
		  	return true;
		}
	}
	return false;
}

function isSsnString (ssn)
{
	var re=/^[0-9a-z][\w-.]*[0-9a-z]$/i;
	if(re.test(ssn))
		return true;
	else
		return false;
}

function checkssn(gotoURL) {
   var ssn=form.username.value.toLowerCase();
   if (checkUserName(ssn)){
	   var open_url = gotoURL + "?username=" + ssn;
	   window.open(open_url,'','status=0,directories=0,resizable=0,toolbar=0,location=0,scrollbars=0,width=322,height=200');
	}
}