jquery登录的异步验证

//定义一个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;
	});
})

  

posted @ 2016-10-08 16:21  Yxh_blogs  阅读(835)  评论(0编辑  收藏  举报