<form id="form1" onsubmit="return false;">
<table id="login-table">
<tr>
<td width="60">学号:</td>
<td><input class="textbox" type="text" style="width:160px;" id="txtUserName"
maxlength="9" onblur="checkUserName()" onclick="$.trim(this.value)"/><span></span>
</td>
</tr>
<tr>
<td width="60">密码:</td>
<td><input class="textbox" type="password" style="width:160px;" id="txtUserPwd"
onblur="checkUserPwd()" onclick="$.trim(this.value)" /><span></span>
</td>
</tr>
<tr>
<td width="60">验证码:</td>
<td><input class="textbox" type="text" style="width:160px;" maxlength="5"
id="txtCheckCode" onblur="checkCheckCode()" onclick="$.trim(this.value)"/><span>
</span>
</td>
</tr>
<tr>
<td width="60"></td>
<td><div style="color:#808080;">输入下图中的字符,不区分大小写</div><br />
<img src="CheckCode.aspx" style="vertical-align:middle;" alt="验证码" id="imgCheckCode" />
<a href="#" id="change_image">看不清,换一张</a></td>
</tr>
<tr>
<td width="60"></td>
<td><input type="image" src="App_Themes/Images/btn_login.jpg" id="btnLogin"
alt="马上登录" style="border:0;"/></td>
</tr>
</table>
</form>

<script language="javascript" type="text/javascript" >
$(document).ready(function(){
// 验证码更新
$('#change_image').click(
function(){
$('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random());
});
//关键的代码
$("#btnLogin").click(function(){
if(checkUserName() && checkUserPwd() && checkCheckCode())
{
var data = {
UserName: $('#txtUserName').val(),
UserPwd: $('#txtUserPwd').val(),
CheckCode: $('#txtCheckCode').val()
};
//提交数据给Login.ashx页面处理
$.post("Ajax/Login.ashx",data,function(result){
if(result == "1") //登录成功
{
alert("登录成功!您可以进行其他操作了!");
// 关闭模拟窗口
window.parent.window.jBox.close();
}
else if(result == "2") //验证码错误
{
$('#txtCheckCode').next("span").css("color","red").text("*
验证码错误");
}
else
{
alert("登录失败!请重试");
}
});
}
else
{
checkUserName();
checkUserPwd();
checkCheckCode();
}
});
});

//check the userName
function checkUserName()
{
if($("#txtUserName").val().length == 0)
{
$("#txtUserName").next("span").css("color","red").text("*用户名不为空");
return false;
}
else
{
var reg = /^\d{9}$/;
if(!reg.test($('#txtUserName').val()))
{
$('#txtUserName').next("span").css("color","red").text("*正确的格式
如:030602888");
return false;
}
else
{
$("#txtUserName").next("span").css("color","red").text("");
return true;
}
}
}
//check the pwd
function checkUserPwd()
{
if($('#txtUserPwd').val().length == 0)
{
$('#txtUserPwd').next("span").css("color","red").text("*密码不为空");
return false;
}
else
{
$('#txtUserPwd').next("span").css("color","red").text("");
return true;
}
}
// check the check code
function checkCheckCode()
{
if($('#txtCheckCode').val().length == 0)
{
$('#txtCheckCode').next("span").css("color","red").text("*验证码不为空");
return false;
}
else
{
$('#txtCheckCode').next("span").css("color","red").text("");
return true;
}
}

ajax验证登录注册的更多相关文章

  1. js验证登录注册

    js验证登录注册的优势,在前台直接验证,不需要在后台读取返回数据验证,减轻服务器压力. 登陆验证得必要性,拦截恶意脚本的登录注册攻击.哈哈,当然有些高手是可以直接跳过js验证的. 所以还是后台验证,并 ...

  2. Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册

    说明:这里没练习静态自动验证:如果用到静态验证首先自定义一个控制器,再在Model文件夹里创建一个NiHaoModel.php 类  NiHao是自定义的,前缀可以随意,但是一定要用驼峰法(首字母大写 ...

  3. 解决:使用ajax验证登录信息返回前端页面时,当前整个页面刷新。

    源代码如下: function loginform(){ $.ajax({ url:"loginValidate.do", type:'post', data:{"nam ...

  4. JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册

    写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...

  5. php+ajax 登录注册页面

    主要是登录注册功能,前端后台验证没有什么,这个大家可以自己加上去,比如过滤啊,正则啊等 还是先放图吧 这是登录及注册界面  点击注册切换到注册界面,点击登录切换到登录界面 <!DOCTYPE h ...

  6. 【唯星宠物】——BootStrap/Mysql/PHP/Ajax爬坑之正则验证登录注册子页

    前言:唯星宠物产品官网的登录注册,单独一个子页,页面使用BootStrap实现响应式,PHP提供服务端,利用Ajax技术,从Mysql中获取JSON数据,并对表单信息进行正则验证.项目github地址 ...

  7. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  8. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  9. PHP+Ajax 异步通讯注册验证

    HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. UVA11987Almost Union-Find(并查集删除节点)

    题目链接 题意:n个数(即1-n)和m个操作: 1表示把x和y合并,2表示把x移到y集合里面,3表示统计x集合的元素个数 1,3好说,关键是2操作,可以先把2删除掉,删除的操作可以找一个其他的数字来取 ...

  2. css004 用样式继承节省时间

       css004 用样式继承节省时间 继承:inherit 继承可以简化样式表 继承是有局限的,有些样式没法继承,如:border,width,height

  3. 在spark-shell里用集群方式启动时加入用户需要的jar

    希望在spark-shell中测试集群方式的elasticsearch操作, # 1 首先下载相关的jar # 2 启动spark-shell时用--jars ./bin/spark-shell –m ...

  4. phpcms从表v9_news_data中字段content中用正则取出图片的地址输出

    preg_match ("<img.*src=[\"](.*?)[\"].*?>",$test,$match); echo "$match ...

  5. git 推送

    echo "# shops" >> README.md git init git add README.md git commit -m "first com ...

  6. JavaWeb学习笔记——开发动态WEB资源(一)Java程序向浏览器输出数据

    开发一个动态web资源,即开发一个Java程序向浏览器输出数据,需要完成以下2个步骤: 1.编写一个Java类,实现Servlet接口 开发一个动态web资源必须实现javax.servlet.Ser ...

  7. Win7环境下Eclipse连接Hadoop2.2.0

    准备: 确保hadoop2.2.0集群正常运行 1.eclipse中建立java工程,导入hadoop2.2.0相关jar包 2.在src根目录下拷入log4j.properties,通过log4j查 ...

  8. DrawCall

    [精]draw call 理解和优化 http://bubuko.com/infodetail-387899.html DrawCall 优化 . http://www.cnblogs.com/sof ...

  9. Lua与C的交互

    Lua 与 C 的交互 Lua是一个嵌入式的语言,它不仅可以是一个独立运行的程序,也可以是一个用来嵌入其它应用的程序库. C API是一个C代码与Lua进行交互的函数集,它由以下几部分构成: 1.  ...

  10. 注入问题0x00

    1.sqlmap遇到MySQL注入可以成功getshell,但是,遇到sqlserver注入未成功getshell. 2.xp_cmdshell 如何 getshell(1433未对外开放). 解决方 ...