JQuery用户登录时的检测

一、在web开发中经常会遇到用户登录进行检测

var z_user=0,z_psword=0,z_code=0;var code_reg = new RegExp("^[\\da-z]{4}$", "i");var pass_reg = new RegExp("^.{6,}$", "i");var user_reg = new RegExp("^[\\d\\.a-z_A-Z]{4,20}|[\u4e00-\u9fa5]$", "i");$('#user').focus(function() {if($(this).val() == '') {           $('#r_name').html('<p style="color:#2FA7F8"><img style="margin-right:2px;" src="/Style/M/images/zhuce1.gif">请输入用户名！</p>');           z_user = 0;       }}).keyup(function() {       if($(this).val() == ''){       $('#r_name').html('<p style="color:#2FA7F8"><img style="margin-right:2px;" src="/Style/M/images/zhuce1.gif">请输入用户名！</p>');       z_user = 0;       }else if (!user_reg.test($(this).val())){       $('#r_name').html('<p style="color:#FE6201"><img style="margin-right:2px;" src="/Style/M/images/zhuce2.gif">您输入的用户名格式不正确！</p>');       z_user = 0;       }else{       $('#r_name').html('<p style="color:#A6E217"><img style="margin-right:2px;" src="/Style/M/images/zhuce3.gif">您输入的用户名格式正确！</p>');       z_user = 1;       }   }).blur(function() {       if($(this).val() == ''){       $('#r_name').html('<p style="color:#2FA7F8"><img style="margin-right:2px;" src="/Style/M/images/zhuce1.gif">请输入用户名！</p>');       z_user = 0;       }else if (!user_reg.test($(this).val())){       $('#r_name').html('<p style="color:#FE6201"><img style="margin-right:2px;" src="/Style/M/images/zhuce2.gif">您输入的用户名格式不正确！</p>');       z_user = 0;       }else {       $('#r_name').html('<p style="color:#A6E217"><img style="margin-right:2px;" src="/Style/M/images/zhuce3.gif">您输入的用户名格式正确！</p>');       z_user = 1;       }});   $('#psword').focus(function() {if($(this).val() == '') {           $('#r_psword').html('<p style="color:#2FA7F8"><img style="margin-right:2px;" src="/Style/M/images/zhuce1.gif">请输入密码！</p>');           z_psword = 0;       }}).keyup(function() {       if($(this).val() == ''){       $('#r_psword').html('<p style="color:#2FA7F8"><img style="margin-right:2px;" src="/Style/M/images/zhuce1.gif">请输入密码！</p>');       z_psword = 0;       }else if (!pass_reg.test($(this).val())){       $('#r_psword').html('<p style="color:#FE6201"><img style="margin-right:2px;" src="/Style/M/images/zhuce2.gif">您输入的密码格式不正确！</p>');       z_psword = 0;       }else {       $('#r_psword').html('<p style="color:#A6E217"><img style="margin-right:2px;" src="/Style/M/images/zhuce3.gif">您输入的密码格式正确！</p>');       z_psword = 1;       }   }).blur(function() {       if($(this).val() == ''){       $('#r_psword').html('<p style="color:#2FA7F8"><img style="margin-right:2px;" src="/Style/M/images/zhuce1.gif">请输入密码！</p>');       z_psword = 0;       }else if (!pass_reg.test($(this).val())){       $('#r_psword').html('<p style="color:#FE6201"><img style="margin-right:2px;" src="/Style/M/images/zhuce2.gif">您输入的密码格式不正确！</p>');       z_psword = 0;       }else {       $('#r_psword').html('<p style="color:#A6E217"><img style="margin-right:2px;" src="/Style/M/images/zhuce3.gif">您输入的密码格式正确！</p>');       z_psword = 1;       }});    $('#psvercode').focus(function() {if($(this).val() == '') {           $('#r_psvercode').html('<p style="color:#2FA7F8"><img style="margin-right:2px;" src="/Style/M/images/zhuce1.gif">请输入验证码！</p>');           z_code = 0;       }}).keyup(function() {       if($(this).val() == ''){       $('#r_psvercode').html('<p style="color:#2FA7F8"><img style="margin-right:2px;" src="/Style/M/images/zhuce1.gif">请输入验证码！</p>');       z_code = 0;       }else if (!code_reg.test($(this).val())){       $('#r_psvercode').html('<p style="color:#FE6201"><img style="margin-right:2px;" src="/Style/M/images/zhuce2.gif">验证码格式不正确！</p>');       z_code = 0;       }else {       $('#r_psvercode').html('<p style="color:#A6E217"><img style="margin-right:2px;" src="/Style/M/images/zhuce3.gif">验证码格式正确！</p>');       z_code = 1;       }   }).blur(function() {       if($(this).val() == ''){       $('#r_psvercode').html('<p style="color:#2FA7F8"><img style="margin-right:2px;" src="/Style/M/images/zhuce1.gif">请输入验证码！</p>');       z_code = 0;       }else if (!code_reg.test($(this).val())){       $('#r_psvercode').html('<p style="color:#FE6201"><img style="margin-right:2px;" src="/Style/M/images/zhuce2.gif">验证码格式不正确！</p>');       z_code = 0;       }else {       $('#r_psvercode').html('<p style="color:#A6E217"><img style="margin-right:2px;" src="/Style/M/images/zhuce3.gif">验证码格式正确！</p>');       z_code = 1;       }});function login(){var sUserName = $('#user').val();var sPassword = $('#psword').val();var sVerCode = $('#psvercode').val();if (z_user == 1 && z_psword == 1 && z_code == 1) {$.ajax({                 url:'*******',                 type:'post',                 data:{            'sUserName':sUserName,            'sPassword':sPassword,            'sVerCode':sVerCode            },            async : false, //默认为true 异步                 dataType: "json",            error:function(){                     layer.msg('error');                 },            success: function (d, s, r) {if(d){if(d.status == 0){layer.msg(d.message,{icon: 2});}else{                    var url = "****";window.location.href = url;}}}        });}}

二、html代码

<div class="row"><label class="control-label col-md-3 text-right" for="user" style="margin-top: 8px;">用户名</label><div class="col-md-9"><input type="text" id="user" class="form-control" placeholder="用户名"/><div id="r_name" style="float: left;font-size: 12px;color: #ff0000;height: 22px;line-height: 22px;"></div></div></div><div class="row"><label class="control-label col-md-3 text-right" for="psword" style="margin-top: 8px;">密　码</label><div class="col-md-9"><input type="password" id="psword" class="form-control" placeholder="请输入密码"/><p id="r_psword">　</p></div></div><div class="row"><label class="control-label col-md-3 text-right" for="psvercode" style="margin-top: 8px;">验证码</label><div class="col-md-5"><input type="text" id="psvercode" class="form-control" placeholder="请输入验证码" /><div id="r_psvercode" style="float: left;font-size: 12px;color: #ff0000;height: 22px;line-height: 22px;"></div></div><div class="col-md-3"><img  src="__URL__/verify"  onclick="this.src=this.src+'?t='+Math.random()" id="imVcode" alt="点击换一个校验码"  style=" width: 115px; height:36px;border: 1px solid #ccc;"/></div></div><div class="row"><button class="btn btn-info col-md-10 col-md-offset-1" onclick="login();">登录</button></div>

注意此验证引用了JQuery和layer弹出框控件