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. ...
随机推荐
- 【转】python编码规范
http://blog.csdn.net/willhuo/article/details/49300441 决定开始Python之路了,利用业余时间,争取更深入学习Python.编程语言不是艺术,而是 ...
- MySql视图、存储过程、函数、索引
一.视图 视图是查询命令结果构成的一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集合,并可以当作表来查询使用. 1创建视图 - ...
- ELKstack搭建
开源实时日志分析ELK平台部署 官网地址:https://www.elastic.co/products 介绍: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现 ...
- nginx主备配置
添加配置: proxy_next_upstream error timeout invalid_header http_500 http_503 http_502; upstream http.wea ...
- 记一次mysql故障恢复
事情要从俩月前的一个坑说起,一台新的测试服务器,新项目一元夺宝用的. 配置aws上的一台云主机,系统盘8G,一块300G的云硬盘. 拿到机器后,另一运维小哥安装php,nginx,mysql等软件. ...
- python开发_++i,i += 1的区分
python开发_++i,i += 1的区分 在很多编程语言(C/C++,Java等)中我们都会碰到这样的语法: 1 int i = 0; 2 ++ i; // -- i; 这样的语法在上述编程语言中 ...
- thinkphp查询
public function index(){ $result = M('content')->select() $this->assig('result',$result); $thi ...
- 常用的Sql 函数
常用的Sql 函数 1: replace 函数,替换字符. 语法 replace (original-string, search-string, replace-string ) 第一个参数你的字符 ...
- fibonacci 数列及其应用
fibonacci 数列及其延展 fibonacci计算 fibonacci数列是指 0,1,1,2,3,5,8,13,21……这样自然数序列,即从第3项开始满足f(n)=f(n-1)+f(n-2): ...
- ASP.NET Padding Oracle Attack EXP
#!/usr/bin/perl## PadBuster v0.3 - Automated script for performing Padding Oracle attacks# Brian Hol ...