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

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

2016-05-03 16:25 387 查看

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

<tr>
<td>用户名:</td>
<td>
<input type="text" name="username" size="25" maxlength="25" id="userid" onblur="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');
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript JSP js