javascript验证表单后却无法异步检测用户名?求高手帮忙解答,谢谢

沪-小坏 2012-07-11 03:48:37
验证表单的功能实现后却无法实现用ajax异步检测用户名,我想问题是不是出在下面代码中的红色部分,我只是猜测,但究竟是哪里的问题,我真的不知道,求高手帮忙了,谢谢!

以下是我的js代码:

<script language="javascript" src="jquery.min.js" type="text/javascript"></script>
//获取下一个span,可以通过这个对象给状态
function gspan(cobj){
while(true){
if(cobj.nextSibling.nodeName!="SPAN")
cobj=cobj.nextSibling;
else
return cobj.nextSibling;
}
}
/*
通用检查方法
第一个参数:obj 是用来检查的对象
第二个参数:info 是用来检查的提示信息
第三个参数:fun 是一个回调函数,用来检查值是否按条件输入
第四个参数:click 只是一个状态,用来区分是单击提交按钮还是失去焦点
*/
function check(obj,info,fun,click){
var sp=gspan(obj);
obj.onfocus=function(){
sp.innerHTML=info;
sp.className="stats2";
}
obj.onblur=function(){
if(fun(this.value)){
sp.innerHTML="输入正确";
sp.className="stats4";
}
else{
sp.innerHTML=info;
sp.className="stats3";
}
}
if(click=="click")
obj.onblur();
}
//页面加载完自动调用
onload=regs
//一个函数,可以使用onsubmit调用,也可以使用onload调用
function regs(click){
var stat=true;
var username=document.getElementsByName("username")[0];
var pwd=document.getElementsByName("pwd")[0];
var repwd=document.getElementsByName("repwd")[0];
var email=document.getElementsByName("email")[0];
check(username,"用户名的长度在3-20个字符之间",function(val){
/*注意/^\S+$/中的S必须为大写才正确*/
if(val.match(/^\S+$/) && val.length>=3 && val.length<=20){
$.get("01.aspx",username.value,
//发送GET请求
function(data){
$("#stats1").html(decodeURI(data));
});
document.getElementById('stats1').innerHTML ="<img src='loading.gif'>正在数据处理中...";
return true;
} else{
stat=false;
return false;
}
},click);
check(pwd,"密码必须在6-20位之间",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=20){
return true;
}
else{
stat=false;
return false;
}
},click);
check(repwd,"确认密码必须在6-20位之间且必须和密码一致",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=20 && val==pwd.value){
return true;
}
else{
stat=false;
return false;
}
},click);
check(email,"请输入有效的电子邮箱",function(val){
if(val.match(/^[\w]{1}[\w\.\-_]*@[\w]{1}[\w\-_\.]*\.[\w]{2,4}$/i)){
return true;
}
else{
stat=false;
return false;
}
},click);
return stat;
}


以下是html部分:

<form name="form1" runat="server" method="get" action="register.aspx" onsubmit="return regs('click');">
username:<input type="text" name="username" id="username" style="width:150px" /><span class="stats1" id="stats1">请输入用户名</span><br />
password:<input type="password" name="pwd" style="width:150px" /><span class="stats1">请输入6-20位密码</span><br />
repaswrd:<input type="password" name="repwd" style="width:150px" /><span class="stats1">请输入确认密码</span><br />
   email:<input type="text" name="email" style="width:150px" /><span class="stats1">请输入邮箱</span><br />
<input type="submit" name="sub" value="register"/>
...全文
140 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
EverWHL 2012-07-13
  • 打赏
  • 举报
回复
代码看的很伤脑筋,不愿看了,既然用了jquery 干嘛还用document.getElementsByName()这种方式
累不累啊 jquery一般直接$("id名称").val()就行了哪里需要这么麻烦
  • 打赏
  • 举报
回复
你把ajax改成同步试试,
		/**
* 设置AJAX同步
*/
$.ajaxSetup({
async : false
});
沪-小坏 2012-07-12
  • 打赏
  • 举报
回复
楼上的两位说的是,关键是小弟初学javascript,还不会代码的优化,呵呵...
火狐者 2012-07-12
  • 打赏
  • 举报
回复
你这验证过于繁琐了吧!大部分精力用在了前端验证,不值得!推荐你使用前端validation验证框架,可以大大减轻前端的工作量!
达-_- 2012-07-12
  • 打赏
  • 举报
回复
你这代码 说实话,看的很蛋疼,不愿再看了,顺便说一句,你需要补补正则,比如val.match(/^\S+$/) && val.length>=3 && val.length<=20 ,这是一个正则可以完成的,给你写个:/^\S{3,20}$/
沪-小坏 2012-07-12
  • 打赏
  • 举报
回复
谢谢楼上的,可是我写的这个ajax代码应该没有错的,单独使用这串代码时就可以验证用户名,但是放在这里边时就直接跳过了,根本就没有执行它!
di_wq 2012-07-11
  • 打赏
  • 举报
回复
楼主可以看看关于ajax唯一性验证类的博客或者文章之类的,有固定模式的,
推荐一个国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架: [b]formValidator[/b] 它能监听到所有控件类型、所有数据格式,还有ajax异步验证功能(例如用户注册时去数据库查询以检查有没有重复)。消息提示有多种模式,例如在控件旁边显示消息、弹出式消息。下面提供一样注册页面验证示例: Html的form表单: [code=HTML] * 用 户 名: * 密  码: * 确认密码: * 电子邮件: * 验 证 码: [/code] 上面每控件后面都一个标签是用来显示消息的。 Html的JavaScript: [code=HTML] $(document).ready(function(){ //告诉formValidator框架要验证userReg这个表单,如果提交时还有错误,则弹出对话框通知 $.formValidator.initConfig({formid:"userReg",onerror:function(msg){alert(msg)}}); //验证用户名这个字段,同时还要到服务器验证是否有重复值 $("#username").formValidator({onshow:" ",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:4,max:48,onerror:"你输入的用户名非法,请确认"}).regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"}).ajaxValidator({ type : "get", url : "/userValidator.do", success : function(data){if( data == "1" ){return true;}else{return false;}}, buttons: $("#button"), error: function(){alert("服务器没有返回数据,可能服务器忙,请重试");}, onerror : "该用户名不可用,请更换用户名", onwait : "正在检查此用户名是否被人注册,请稍候..." }); //验证密码 $("#password").formValidator({onshow:" ",onfocus:"密码不能为空",oncorrect:"密码合法"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码不能为空,请确认"}); //验证确认密码,同时要与第一交密码一致 $("#repassword").formValidator({onshow:" ",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复密码不能为空,请确认"}).compareValidator({desid:"passWord",operateor:"=",onerror:"2次密码不一致,请确认"}); //验证电子邮件,同时要数据库中必须唯一 $("#email").formValidator({onshow:" ",onfocus:"邮箱6-100个字符,输入正确了才能离开焦点",oncorrect:"该电子信箱可以注册"}).inputValidator({min:6,onerror:"你输入的电子邮箱不合格,请确认"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"}).ajaxValidator({ type : "get", url : "/emailValidator.do", success : function(data){ if( data == "1" ){return true;}else{return false;}}, buttons: $("#button"), error: function(){alert("服务器没有返回数据,可能服务器忙,请重试");}, onerror : "该电子信箱已被注册,请更换一个", onwait : "正在对电子信箱唯一性进行合校验,请稍候..." }); //对验证码是否输入进行验证 $("#valicode").formValidator({onshow:" ",onfocus:"输入旁边图片上的数字"}).inputValidator({min:3,onerror: "请输入验证码!"}); }); [/code] 这是一个典型的注册表单,form中没有侵入作何元素。而formValidator则通过jQuery的监听模式实现对form表单验证。并对username、email字段实现无刷新服务器验证。 压缩包中含有demo,demo就是文档,很容易使用

81,094

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧