xmlHttpRequest无刷新验证用户名
首先建立一个注册与验证的页面xmlHttpRequest.aspx与Validate.aspx,因为仅仅是实现无刷新验证用户名,所以我们可以把其它项都撇开,Register.aspx中摆好div跟控件,具体如下:
<body>
<form id="form1" runat="server">
<div style="width: 100%; float: left; text-indent: 24px; font-size:12px">
<div style="float:left">
您的用户名:<asp:TextBox ID="txtUserName" runat="server" style="border:1px solid #D4D8D9" onblur="return ValidateUser();"></asp:TextBox>
</div> <div id="default" ></div>
</div>
</form>
</body>
然后我们可以写两个样式用于用户名通过验证或未通过验证的显示样式,未加入图片.
.Error{ border:1px solid #A2553B;background-color:#FEF1E1;width:140px;float:left;height:18px;line-height:18px;margin-left:24px;color:#4F4F4F;text-indent:12px;}
.Right{ border:1px solid #419041;background-color:#EDFCE7;width:140px;float:left;height:18px;line-height:18px;margin-left:24px;color:#4F4F4F;text-indent:12px;}
这两个样式你可以把它放到样式表中也可以将它放到<head></head>当中.
接下来只需敲一段脚本到注册的xmlHttpRequest.aspx页面去.
<script language="javascript" type="text/javascript">
function ValidateUser()
{
//获得用于显示验证是否通过的详细信息
var obj=document.getElementById("default");
//获取用户输入的用户名的值
var str=document.getElementById("txtUserName").value;
//定义一个bool型变量
var chk=true;
if (chk){
//因为输入的用户名可能含有中文,所以将其解码
var username=escape(str);
//用于验证用户名的后台页面
var usrurl="/Validate.aspx?UserName="+username;
//获取从验证页面中异步传输过来的值
var sta=GetResponseText(usrurl);
//如果异步传输失败
if(sta==false){
chk=true;
obj.className="d_ok";
obj.innerHTML='该会员未能检测,可以尝试注册。';
}
//异步传输成功
else{
//假如传过来的值的开始位置是"regok",这个值是在验证页面Response.Write出来的值,如果是regok则表示验证通过,否则的话就是验证失败.
if(sta.indexOf("regok")!=-1){
//验证通过
chk=true;
//用于显示验证是否通过的详细信息加上刚刚所定义正确时的样式
obj.className="Right";
obj.innerHTML='该会员名可以注册。';
}else{
//验证未通过
chk=false;
//用于显示验证是否通过的详细信息加上刚刚所定义错误时的样式
obj.className="Error";
obj.innerHTML='该会员名已经被注册。';
}
}
}else{
obj.className="Error";
}
return chk;
}
function GetResponseText(url)
{
//定义一个http_request变量
var http_request;
if (window.XMLHttpRequest) {
//对于Mozilla、Netscape、Safari等浏览器,创建XMLHttpRequest对象
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
//如果服务器响应的header不是text/xml,可以调用其它方法修改该header
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) {
// 对于Internet Explorer浏览器,创建XMLHttpRequest
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
//打开验证页面的地址
http_request.open('GET', url, false);
http_request.send(null);
if (http_request.readyState == 4)
{
// 收到完整的服务器响应
if (http_request.status == 200) {
//HTTP服务器响应的值OK
var requestdoc = http_request.ResponseText;
}
else {
requestdoc = "error";
}
}
return requestdoc;
}
</script>
核心代码:
http_request.ResponseText这句是用于获取验证用户名页面中异步传输过来的值..
上面的代码做了详细的注释,这里就不多做解释了..
接下来验证用户名的页面中接收传过来的值进行判断了...
1 public partial class Validate : System.Web.UI.Page
2 {
3 //获取url传过来的值
4 private string UserName
5 {
6 get { return Request.QueryString["UserName"].ToString(); }
7 }
8 protected void Page_Load(object sender, EventArgs e)
9 {
10 //这里你可以连至用户表检查是否存在这个用户名,当然如果你用membership中的验证方法会更简洁.
11 if (Server.HtmlEncode(UserName) =="123456")
12 //还记得脚本中的if(sta.indexOf("regok")!=-1)这句吗,regok就是这里的啦..
13 Response.Write("regok");
14 else
15 Response.Write("error");
16 }
17 }
就这样一个简单的无刷新验证用户就完成啦...本机测试已通过.呵呵刚好最近一直在学习控件开发,下篇就将其封装成一个控件.
源码下载
转载于:https://www.cnblogs.com/yangjunwl/articles/1139048.html
xmlHttpRequest无刷新验证用户名相关推荐
- XMLHttpRequest实现无刷新验证用户名
在用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web窗体,命名为 Default.aspx 代码如下: & ...
- Ajax+asp.net无刷新验证用户名
注册用户页面代码如下 <script language="javascript" type="text/javascript"> var xmlHt ...
- 【转】无刷新验证用户名可用性
在用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web窗体,命名为 Default.aspx 代码如下: V ...
- Ajax+asp.net无刷新验证用户名的几种方法
Ajax+asp.net无刷新验证用户名 注册用户页面代码如下 <script language="javascript" type="text/javascrip ...
- JQuery Ajax后台无刷新验证用户名重复,前台验证两次密码一致,后台创建并验证 验证码
写在前面 写web 的人,我想最先要解决的就是注册登录的界面了,一个小小的界面却包含着各种基本的知识,让我这个新手摸了一天. 效果图 知识 1.bootstrap渲染表单 2.JQuery ajax验 ...
- AJAX(三)--实例无刷新验证用户名是否存在
我们知道在注册淘宝账户时,当我们注册的账户名与其他人同名的时候,系统会自动的给出提示,并且给出推荐使用的账户名,并没有完全的刷新整个页面,而是悄悄的向服务器端发送请求进行验证,让我们感觉很舒服,这就是 ...
- JQuery用户名无刷新验证
本人也是JQuery初学者,写了个用户名无刷新验证的简单例子,拿来分享,共同学习一下吧. 1.在静态页面里添加文本框及样式和js脚本的引用: 代码 2.css样式表,当文本框文字为空时边框红色: .t ...
- 无刷新判断用户名是否存在
两个页面: Default.aspx 输入username去验证 checkUser.aspx 处理验证信息 Default页面代码 Code <!DOCTYPE html PUBLIC &q ...
- AJAX+JavaScript无刷新检查用户名
AJAX+JavaScript无刷新检查用户名是否可用2009-04-20 16:26 JavaScript 和 Ajax 代码 <script language="javascr ...
最新文章
- 泰晤士高等教育2020年新兴经济体大学排名出炉,81所中国大陆高校上榜!
- css字体更小 css比12px更小的方法
- 微软IE8浏览器个性化设置技巧
- C#ReadLine()和ReadKey()区别
- BZOJ-2049 [SDOI2008]洞穴勘测
- SQL Developer更改日期显示格式
- 计算机没有autoCAD_挑战在一年内用晚上业余时间学会灵活运用CAD(1)|cad|autocad|图学|计算机|电子电路...
- java迭代器 异常_java-迭代器并发修改异常
- LeetCode 673. 最长递增子序列的个数(DP)
- 300小时成为java程序员_直击面试现场: Java程序员3轮6小时面试, 成功拿到阿里offer!...
- linux mailbox模型
- LiveLayout
- 知乎高赞:为什么许多原本的 Java 项目都试图用 go 进行重写开源?
- Changer常用的软件
- python winrar密码_python+winrar 指令压缩文件 | 学步园
- 一款英国折叠车如何在中国城市流行?
- 从初级到资深:程序员的职业生涯思考与可迁移技能培养
- 可爱的BpXXX-图
- [机器学习-原理与实践]逻辑回归(LogisticRegression)多分类(OvR, OvO, MvM)
- context.Context
热门文章
- LeetCode 1785. 构成特定和需要添加的最少元素(贪心)
- 05.序列模型 W3.序列模型和注意力机制
- LeetCode 478. 在圆内随机生成点(概率)
- python考试名词解释_python公开课|python专有名词居然有这么多,python专有名词解释已做好...
- python中的孤儿进程
- 有钱可以多任性?OpenAI提出人肉模型训练,文本摘要全面超越人类表现!
- 以jieba为首的主流分词工具总结
- 还在随缘炼丹?一文带你详尽了解机器学习模型可解释性的奥秘
- 开源开放 | DeepKE发布新版本:支持低资源、长篇章、多任务的图谱抽取开源框架(浙江大学)...
- 论文浅尝 | ExCAR: 一个事件图知识增强的可解释因果推理框架