其中用到了jquery插件来验证用户名哦,这里是利用jquery
站在用户的角度思考问题,与客户深入沟通,找到大荔网站设计与大荔网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、成都网站建设、企业官网、英文网站、手机端网站、网站推广、申请域名、虚拟主机、企业邮箱。业务覆盖大荔地区。
ajax来验证用户名是否存在哦。大家看看效果图,后面将附上源码下载。
jquery框架实现的ajax
验证用户名是否存在的部分JS
复制代码
代码如下:
$("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:4,max:10,onerror:"用户名至少4个字符,最多10个字符"}).regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"})
.ajaxValidator({
type
:
"get",
url
:
"/ws/NameExist.aspx",
datatype
:
"json",
success
:
function(data){
if(
data
==
"1"
)
{
return
true;
}
else
{
return
false;
}
},
buttons:
$("#submit"),
error:
function(){alert("服务器没有返回数据,可能服务器忙,请重试");},
onerror
:
"该用户名不可用,请更换用户名",
onwait
:
"正在对用户名进行合法性校验,请稍候..."
})
NameExist.aspx
实现的源码
复制代码
代码如下:
protected
void
Page_Load(object
sender,
EventArgs
e)
{
string
accounts
=
Request["accounts"];
LoginNameExist(accounts);
}
public
void
LoginNameExist(string
accounts)
{
IUsers
user
=
AgileEIS.Web.DAL.Interface.DALHelper.DALManager.CreateUsers();
user.Session
=
ContextHelper.Session;
user.Accounts
=
accounts;
user.Refresh();
if
(!user.Exists)
{
Response.Write("1");
}
else
{
Response.Write("0");
}
Response.End();
return;
}
异步刷新实现方式有多种,也可以借助js的多种框架,以上是使用jquery框架实现的ajax
验证用户名是否存在。首次发这样的技术文档,难免有不足之外,还请大家见凉...
下面将提供下载
$('#username').blur(function(){
$.ajax({
url:从数据库验证用户是否重复的action地址,
type:'POST',
data:{username:username},
dataType:'json',
success:function(jsonData){
if (jsonData == null) {
$(“#tips”).html('查询用户名列表错误');
}else if (jsonData.result == "true") {
$(“#tips”).html('用户名重复');
}else if(jsonData.result == "false") {
$(“#tips”).html('恭喜你,用户名可以使用');
}
},
error:function(jsonData){
}
});
});
表单的里面的有input这是输入框,name="username";
密码框的name是 password他们的对应的标签里面都先写一个id,分别是id="username",id="password".还有一个是确认提交的按钮。之后就是先导入jquery.js(这是js的库函数)。这个可以通过网络下载,
script
$("input[type="submit"]").click(
function(){
var username=$("#username").val();//获取用户名的信息;
var password=$("#password").val();//来获取密码的信息
之后就是你需要的验证的要求,
}
);
/script
取出用户名中的值,让后台来判断一下是不是存在,把信息返回给前端,前端显示,用ajax就可以了:
$('#btn').bind('click', function(event) {
//取出你用户名
var username = $('#username').val();
$.ajax({
url: '/path/to/file',
dataType: 'json',
data: {username: username},
success : function(obj){
//obj是返回的信息,说明用户名是不是存在
//执行你想要的操作
}
})
});
jquery调用ajax,调用后台方法判断用户名是否重复。验证的话,varusername=$("#username").val();if(username==""){returnfalse;}上面为验证不能为空