//定义一个json
var validate = {
username : false,
pwd : false,
pwded : false,
verify : false,
loginUsername : false,
loginPwd :false
} //存储错误信息
var $msg = ""; //验证注册表单
$(function(){
//获取表单对象
var register = $('form[name=register');
register.submit(function(){
var isOK = validate.username && validate.pwd && validate.pwded && validate.verify;
if(isOK){
return true;
}
//点击提交按钮依次触发失去焦点再次验证
$('input[name=username]',register).trigger('blur');
$('input[name=pwd]',register).trigger('blur');
$('input[name=pwded]',register).trigger('blur');
$('input[name=verify]',register).trigger('blur');
return false;
}); //验证用户名
$('input[name=username]',register).blur(function(){
var username = $(this).val();
var span = $(this).next(); //用户名不能为空
if(username == ''){
msg = '用户名不能为空';
span.html(msg).addClass('error');
validate.username = false;
return;
} //正则判断
if(!/^\w{2,14}$/g.test(username)){
msg = '必须是2-14个字符,字母,数字,下划线';
span.html(msg).addClass('error');
validate.username = false;
return;
} //异步验证用户名是否存在
$.post(APP + '/Reg/ajax_username',{username : username},function(status){
console.log(status);
if(status){
msg = '通过检测';
span.html(msg).removeClass('error');
validate.username = true;
}else{
msg = '用户名已经存在';
span.html(msg).addClass('error');
validate.username = false;
}
},'json');
}); //验证密码
$('input[name=pwd]',register).blur(function(){
var pwd = $(this).val();
var span = $(this).next(); //密码不能为空
if(pwd == ''){
msg = '密码不能为空';
span.html(msg).addClass('error');
validate.pwd = false;
return;
} //正则验证
if(!/^\w{6,20}$/g.test(pwd)){
msg = '密码必须由6-20个字母,数字,或者下划线组成';
span.html(msg).addClass('error');
validate.pwd = false;
return;
} msg = '通过检测';
span.html(msg).removeClass('error');
validate.pwd = true;
}); //确认密码
$('input[name=pwded]',register).blur(function(){
var pwded = $(this).val();
var span = $(this).next(); //确认密码
if(pwded == ''){
msg = '请确认密码';
span.html(msg).addClass('error');
validate.pwded = false;
return;
} //判断密码是否一致
if(pwded != $('input[name=pwd]',register).val()){
msg = '密码不一致';
span.html(msg).addClass('error');
validate.pwded = false;
returnl;
} msg = '通过检测';
span.html(msg).removeClass('error');
validate.pwded = true;
}); //验证验证码
$('input[name=verify]',register).blur(function(){
var verify = $(this).val();
var span = $(this).next().next(); //不能为空
if(verify == ''){
msg = '请输入验证码';
span.html(msg).addClass('error');
validate.verify = false;
return;
} //异步判断验证码
$.post(APP + '/Reg/ajax_code',{verify : verify},function(status){
if(status){
msg = '通过检测';
span.html(msg).removeClass('error');
validate.verify = true;
}else{
msg = '验证码错误';
span.html(msg).addClass('error');
validate.verify = false;
return;
}
},'json');
}); //登录form表单验证
var login = $('form[name=login]'); //登录提交事件
login.submit(function(){
if(validate.loginUsername && validate.loginPwd){
return true;
}
//依次触发失去焦点动作
$('input[name=username]',login).trigger('blur');
$('input[name=pwd',login).trigger('blur');
return false;
}); //验证登录用户名
$('input[name=username]',login).blur(function(){
var username = $(this).val();
var span = $('#login-msg'); //判断是否为空
if(username == ''){
msg = '请输入账号';
span.html(msg).addClass('error');
validate.loginUsername = false;
return;
}
msg = '';
span.html(msg);
validate.loginUsername = true;
}); //验证登录密码
$('input[name=pwd]',login).blur(function(){
var pwd = $(this).val();
var span = $('#login-msg'); //判断登录密码是否为空
if(pwd == ''){
msg = '请输入密码';
span.html(msg).addClass('error');
validate.loginPwd = false;
return;
} var data = {
username : $('input[name=username]',login).val(),
pwd : pwd
}; //异步验证
$.post(APP + '/Login/ajax_login',data,function(status){
if(status){
msg = '';
span.html(msg).removeClass('error');
validate.loginUsername = true;
validate.loginPwd = true;
}else{
msg = '用户名或密码错误';
span.html(msg).addClass('error');
validate.loginUsername = false;
validate.loginPwd = false;
}
},'json'); msg = '';
span.html(msg);
validate.loginPwd = true;
});
})

  

jquery登录的异步验证的更多相关文章

  1. 使用 jQuery Ajax 异步登录,并验证用户输入信息(maven)

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  2. ASP.NET MVC验证 - jQuery异步验证

    本文主要体验通过jQuery异步验证. 在很多的教材和案例中,MVC验证都是通过提交表单进行的.通过提交表单,可以很容易获得验证出错信息.因为,无论是客户端验证还是服务端验证,总能找到与Model属性 ...

  3. MVC验证11-对复杂类型使用jQuery异步验证

    原文:MVC验证11-对复杂类型使用jQuery异步验证 本篇体验使用"jQuery结合Html.BeginForm()"对复杂类型属性进行异步验证.与本篇相关的"兄弟篇 ...

  4. ASP.NET MVC异步验证是如何工作的03,jquery.validate.unobtrusive.js是如何工作的

    在上一篇"ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建"中了解了ASP.NET异步验证是如何创建表单元素的,本篇体验jquery.validate.uno ...

  5. ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后

    ASP.NET MVC借助jQuery的验证机制,提供了一套从客户端到服务端异步验证的解决方案,通常情况下,用起来相当方便.但面对一些相对特殊的情况,可能会遇到验证失效的场景,比如在使用ajax动态异 ...

  6. ssm框架整合+Ajax异步验证

    SSM框架是目前企业比较常用的框架之一,它的灵活性.安全性相对于SSH有一定的优势.说到这,谈谈SSM和SSH的不同点,这也是企业常考初级程序员的面试题之一.说到这两套框架的不同,主要是持久层框架Hi ...

  7. formValidator输入验证、异步验证实例 + licenseImage验证码插件实例应用

    实例技术:springmvc 实现功能:完整用户登录流程.输入信息规则校验.验证码异步校验. 功能清单: 1.springmvc控制器处理get请求(/member/login.html),进行静态页 ...

  8. validate+jquery+ajax表单验证

    1.案例 1.1 Html form表单内容 <form class="cForm" id="cForm" method="post" ...

  9. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

随机推荐

  1. AngularJs + html 5 实现 裁剪上传

    直接上代码 directive.js app.directive('fileUploadersm', function () { return { restrict: 'E', transclude: ...

  2. Process Autocad by python

    一.处理AutoCad模块 -pyautocad 1.安装 pip install pyautocad 注:1.该操作会自动安装 comtypes模块,如果其他方式安装,请自行安装comtypes模块 ...

  3. Linux中的du和df命令

    现在也将前阵子学习到du/df两个命令总结一下吧.前阵子测试工作中有遇到过由于磁盘空间满导致程序无法执行到情况,所以使用了df和du两个命令. du查看目录大小,df查看磁盘使用情况.我常使用的命令( ...

  4. Ubuntu 静态IP

    linux 用了好多年了,每次设置静态ip都上网查,就是记不住.唉~ cat /etc/network/interfaces auto lo iface lo inet loopback #auto ...

  5. 04 http协议模拟登陆发帖

    <?php require('./http.class.php'); $http = new Http('http://home.verycd.com/cp.php?ac=pm&op=s ...

  6. [Python爬虫] Selenium自己主动訪问Firefox和Chrome并实现搜索截图

    前两篇文章介绍了安装.此篇文章算是一个简单的进阶应用吧.它是在Windows下通过Selenium+Python实现自己主动訪问Firefox和Chrome并实现搜索截图的功能. [Python爬虫] ...

  7. Create an OData v4 Endpoint Using ASP.NET Web API 2.2(使用ASP.NET Web API 2.2创建OData v4端点)

    开放数据协议Open Data Protocol(OData)是web的一种数据存取协议,OData通过设置CRUD操作(Create创建.Read读取.Update更新,Delete删除)提供一种统 ...

  8. 2018年东北农业大学春季校赛 B wyh的矩阵【规律】

    题目链接 https://www.nowcoder.com/acm/contest/93/B 思路 先加入 中间的那行 和中间的那列 再减去 最中间那个数 因为它 加了两次 然后逐行往下加 会发现是一 ...

  9. const与define应用上该怎么取舍

    const与define应用上该怎么取舍 #define WYB 100; const float WYB = 100; define是在预编译的时候展开替换的,const是编译运行阶段使用 defi ...

  10. Code Review 规范

    CodeReview规范 CodeReivew 标准 通用原则 提交 PR 的代码必须保证自测通过 只 review 代码规范.业务逻辑,不 review 架构设计(那是写代码前应该做的事情) 干掉重 ...