ajax(js)判断文本框输入的用户是否存在
我想实现一个有关利用ajax(js)判断用户名是否被占用的功能,不知道谁能够帮忙解决一下<input id="tbUsername" type="text" runat="server" class="username" style="width: 180px;" onfocus="setStyle1('LbUserName')" onblur="setStyle2('LbUserName',this.id)" />
所用到的js为
<script type="text/javascript">
function setStyle1(x)
{
//document.getElementById("LbUserName").Visible="false"
document.getElementById(x).style.display='none'
}
function setStyle2(x,y)
{
if(document.getElementById(y).value == "")
{
document.getElementById(x).innerHTML = '请输入用户名'
document.getElementById(x).style.display=''
document.getElementById(x).style.borderColor="#00A8FF"
document.getElementById(x).style.color='blue'
document.getElementById(x).style.backgroundColor="#e2f5ff"
}
else
{
CheckUserName(document.getElementById('y').value)
// document.getElementById(x).innerHTML = '填写正确'
// document.getElementById(x).style.display=''
// document.getElementById(x).style.borderColor="#81A235"
// document.getElementById(x).style.color='#5A8F00'
// document.getElementById(x).style.backgroundColor="white"
}
}
var xmlHttp;
//创建CheckUserName
function CheckUserName(name)
{
createXmlHttpRequest();
var url="DisposeEvent.aspx?Name="+name+"&Event=Check";;
xmlHttp.open("post",url,true);
xmlHttp.onreadystatechange = CheckUserNameResult;
xmlHttp.send(null);
}
function createXmlHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
if(xmlHttp.overrideMimeType)
{
xmlHttp.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
if(!xmlHttp)
{
window.alert("你的浏览器不支持创建XMLhttpRequest对象");
}
return xmlHttp;
}
//创建用户检测的回调函数
function CheckUserNameResult()
{
if(xmlHttp.readyState==4)//服务器响应状态
{
if(xmlHttp.status==200)//代码执行状态
{
if(xmlHttp.responseText=="false")
{
document.getElementById("imgflag").innerHTML = '该用户名可用'
document.getElementById(x).style.display=''
document.getElementById(x).style.borderColor="#FF6600"
document.getElementById(x).style.color='black'
document.getElementById(x).style.backgroundColor="#FFF2E9"
}
else
{
document.getElementById("imgflag").innerHTML = '该用户名已经存在'
document.getElementById(x).style.display=''
document.getElementById(x).style.borderColor="#FF6600"
document.getElementById(x).style.color='black'
document.getElementById(x).style.backgroundColor="#FFF2E9"
}
}
}
}
</script>
DisposeEvent.aspx.cs 代码为
protected void Page_Load(object sender, EventArgs e)
{
CheckUser cu = new CheckUser();
cu.UserName = Request.QueryString["Name"].ToString();
if (!IsPostBack)
{
switch (Request.QueryString["Event"])
{
case "Check":
if (cu.CheckUsers())
{
Response.Write("true");
Response.End();
}
else
{
Response.Write("false");
Response.End();
}
break;
}
其中CheckUser书一个类代码为
public class CheckUser
{
private string _UserName;
public string UserName
{
set
{
this._UserName = value;
}
get
{
return this._UserName;
}
}
public bool CheckUsers()
{
SqlParameter[] Param = new SqlParameter[1];
DataBase DB = new DataBase();
Param[0] = DB.MakeInParam("@UserName",SqlDbType.VarChar,50,this.UserName);
if (DB.GetDataSet("USP_CheckUsers", Param).Tables[0].Rows.Count > 0)
{
return true;
}
else
{
return false;
}
}
}
不知道那里错了 --------------------编程问答--------------------
--------------------编程问答--------------------
//声明XMLHttpRequest对象
var xmlHttp;
//检测用户名是否存在
function CheckName(userName)
{
createXMLHTTP();//创建XMLHttpRequest对象
var url="DisposeEvent.aspx?userName="+userName+"&Event=Check";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=checkUserName;
xmlHttp.send(null);
}
function createXMLHTTP()
{
if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();//mozilla浏览器
}
else if(window.ActiveXObject)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//IE老版本
}
catch(e)
{}
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE新版本
}
catch(e)
{}
if(!xmlHttp)
{
window.alert("不能创建XMLHttpRequest对象实例！");
return false;
}
}
}
//执行检测用户名回调函数
function checkUserName()
{
if(xmlHttp.readyState==4)//判断对象状态
{
if(xmlHttp.status==200)//信息成功返回，开始处理信息
{
if(xmlHttp.responseText=="true")
{
document.getElementById("imgName").src="images/true.gif";
//让注册按钮失效
document.getElementById("btnReg").disabled=false;
}
else
{
document.getElementById("imgName").src="images/false.gif";
document.getElementById("btnReg").disabled=true;
}
}
}
}
--------------------编程问答--------------------
public partial class DisposeEvent : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
User user = new User();
//是否为执行CheckName方法
if (Request.QueryString["Event"].ToString() == "Check")
{
if (user.checkName(Request.QueryString["userName"].ToString()))
{
//当数据库中已存在此用户时输出为false,让其显示相应图标
Response.Write("false");
Response.End();
}
else
{
Response.Write("true");
Response.End();
}
}
}
}
--------------------编程问答-------------------- http://topic.csdn.net/u/20080616/08/7d35368b-f257-4920-8f27-e0ff474e14f5.html
public class User
{
public User()
{
//
// TODO: 在此处添加构造函数逻辑
//
}
//检测用户名是否存在
string conStr = System.Configuration.ConfigurationSettings.AppSettings["HumanResources"];
public bool checkName(string userName)
{
SqlConnection userConnection = new SqlConnection(conStr);
SqlCommand userCommand = new SqlCommand("checkName", userConnection);
userCommand.CommandType = CommandType.StoredProcedure;//采用存储过程
userCommand.Parameters.Add("@userName", SqlDbType.VarChar, 50);//存储过程参数
userCommand.Parameters["@userName"].Value = userName;//给参数赋值
userCommand.Parameters.Add("@count",SqlDbType.Int);
userCommand.Parameters["@count"].Direction = ParameterDirection.Output;
userCommand.Connection.Open();//打开连接
userCommand.ExecuteScalar();//返回首行首列，如果存在的话返回１
int n =Convert.ToInt32( userCommand.Parameters["@count"].Value);
userCommand.Connection.Close();//关闭连接
if (n > 0)
{
return true;
}
else
{
return false;
}
}
}
==
这里我不是回过么 --------------------编程问答-------------------- 在你自己的input的中加
<input id="userName" type="text" onkeyup="CheckName(document.getElementById('userName').value);" />
补充：.NET技术 , ASP.NET
