ajax验证登录注册
<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验证登录注册的更多相关文章
- js验证登录注册
js验证登录注册的优势,在前台直接验证,不需要在后台读取返回数据验证,减轻服务器压力. 登陆验证得必要性,拦截恶意脚本的登录注册攻击.哈哈,当然有些高手是可以直接跳过js验证的. 所以还是后台验证,并 ...
- Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
说明:这里没练习静态自动验证:如果用到静态验证首先自定义一个控制器,再在Model文件夹里创建一个NiHaoModel.php 类 NiHao是自定义的,前缀可以随意,但是一定要用驼峰法(首字母大写 ...
- 解决:使用ajax验证登录信息返回前端页面时,当前整个页面刷新。
源代码如下: function loginform(){ $.ajax({ url:"loginValidate.do", type:'post', data:{"nam ...
- JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册
写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...
- php+ajax 登录注册页面
主要是登录注册功能,前端后台验证没有什么,这个大家可以自己加上去,比如过滤啊,正则啊等 还是先放图吧 这是登录及注册界面 点击注册切换到注册界面,点击登录切换到登录界面 <!DOCTYPE h ...
- 【唯星宠物】——BootStrap/Mysql/PHP/Ajax爬坑之正则验证登录注册子页
前言:唯星宠物产品官网的登录注册,单独一个子页,页面使用BootStrap实现响应式,PHP提供服务端,利用Ajax技术,从Mysql中获取JSON数据,并对表单信息进行正则验证.项目github地址 ...
- 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
- PHP+Ajax 异步通讯注册验证
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
随机推荐
- 高可用与负载均衡(6)之聊聊LVS的三种模式
LVS的赘述 IPVS,ipvs ,ip_vs是负载均衡器中的内核代码 LVS是完整的负载均衡器+后端服务器.这些组件组成了虚拟服务器. LVS是一个4层负载均衡方案,标准的客户端-服务器网络语义也被 ...
- redhat安装VMware tools的方法
如果我们仔细看的话, 就会发现在VMware软件界面的左下角处显示着 "you don't have VMware Tools installed",即我们还没安装VMware T ...
- WinForm------GridControl右键添加动态菜单
转载:http://www.devexpresscn.com/Resources/Documentation-440.html 更加好用的方法: 1.添加一个GridControl控件,PopupMe ...
- 非阻塞socket学习,select基本用法
server #include <stdio.h> #include <winsock2.h> #include <iostream> #pragma commen ...
- JavaScript排序算法——堆排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaWeb学习笔记——开发动态WEB资源(六)ServletConfig和ServletContext
1.只有在第一次请求服务器产生实例的时候才会调用init()方法,有一种办法能在服务器一启动的时候就加载init()方法. 即服务器启动即加载Servlet,且按数字大小顺序实例化Servlet. 方 ...
- css div垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- setTimeout不断重复执行
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout(code,millisec) code 必需.要调用的函数后要执行的 JavaScript 代码串. ...
- Django笔记-登陆注册-1
1.项目结构(eclipse+PyDev工具)(粘上来后代码缩进格式没有了,就先不整了) 2.关键代码: test_log03.settings.py INSTALLED_APPS = ( 'djan ...
- thinkphp 3.2视图里添加URL参数 实例
使用TP的时候URL传参 到控制器里 视图里 <ul> <volist name="content" id="data"> <li ...