Ajax异步方式实现登录与验证
本文实例讲述了Ajax异步方式实现登录与验证的详细代码，分享给大家供大家参考。具体如下：
登录代码
这个是使用Bootstrap3的组件功能实现的
<divclass="login_con_R"> <h4>登录</h4> <FORMid="loginFormId"class="form-horizontal"action="login"method="post"> <divclass="form-groupinput-group"> <spanclass="input-group-addon"><spanclass="glyphiconglyphicon-user"></span></span> <inputtype="text"class="form-control"placeholder="用户名"name="username"id="j_username"value="koala"> </div> <divclass="form-groupinput-group"> <spanclass="input-group-addon"><spanclass="glyphiconglyphicon-lock"></span></span> <inputtype="password"name="password"id="j_password"class="form-control"placeholder="密码"value="888888"/> </div> <divclass="form-groupinput-group"style="margin-top:45px;"> <buttontype="button"class="btnbtn-primarybtn-block"id="loginBtn">登录</button> </div> </FORM> </div>
异步登录请求的代码
<script>
$(function(){
varbtnLogin=$('#loginBtn');
varform=$('#loginFormId');
$('body').keydown(function(e){
if(e.keyCode==13){
dologin();
}
});
btnLogin.on('click',function(){
dologin();
});
vardologin=function(){
varuserNameElement=$("#j_username");
varpasswordElement=$("#j_password");
varusername=userNameElement.val();
varpassword=passwordElement.val();
if(!Validation.notNull($('body'),userNameElement,username,'用户名不能为空')){
returnfalse;
}
if(!Validation.notNull($('body'),passwordElement,password,'密码不能为空')){
returnfalse;
}
btnLogin.attr('disabled','disabled').html('正在登录...');
varparam=form.serialize();
$.ajax({
url:contextPath+"/login.koala",
dataType:"json",
data:param,
type:"POST",
success:function(data){
if(data.success){
$('.login_con_R').message({
type:'success',
content:'登录成功！'
});
/*这里使用的异步请求，当请求登录成功的时候，重新定位到index界面*/
window.location.href=contextPath+"/index.koala";
}else{
btnLogin.removeAttr('disabled').html('登录');
$('.login_con_R').message({
type:'error',
content:data.errorMessage
});
}
}
});
};
});
</script>
使用到的验证js代码Validation.js
Validator={
Require:{expression:/.+/,errorMsg:"该字段不能为空"},
Email:{expression:/^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/,errorMsg:"Email格式不正确"},
Mobile:{expression:/^(1[3|5|8]{1}\d{9})$/,errorMsg:"手机格式不正确"},
TelePhone:{expression:/^(((0\d{2,3}-)?\d{7,8}(-\d{4})?))$/,errorMsg:"电话号码格式不正确"},
IdCard:{expression:/^\d{15}(\d{2}[A-Za-z0-9])?$/,errorMsg:"身份证号码格式不正确"},
Number:{expression:/^-?(\d+|[1-9]\d*\.\d+|0\.\d*[1-9]\d*|0?\.0+|0)$/,errorMsg:"仅支持数字"},
English:{expression:/^[A-Za-z]+$/,errorMsg:"仅支持英文字符"},
Chinese:{expression:/^[\u0391-\uFFE5]+$/,errorMsg:"仅支持中文字符"},
URL:{expression:/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,errorMsg:"URL地址格式不正确"},
Regex:{errorMsg:"格式不正确"},
UnSafe:/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
IsSafe:function(str){return!this.UnSafe.test(str);},
SafeString:{expression:"this.IsSafe(value)",errorMsg:"仅支持中文字符"},
ErrorItem:[document.forms[0]],
ErrorMessage:["以下原因导致提交失败：\t\t\t\t"],
Validate:function(theForm,mode){
varobj=theForm||event.srcElement;
varcount=obj.elements.length;
this.ErrorMessage.length=1;
this.ErrorItem.length=1;
this.ErrorItem[0]=obj;
for(vari=0;i<count;i++){
with(obj.elements[i]){
if(disabled)continue;
var_dataType=getAttribute("dataType");
if(typeof(_dataType)=="object"||typeof(this[_dataType])=="undefined")continue;
this.ClearState(obj.elements[i]);
if(getAttribute("require")=="false"&&value=="")continue;
varerrorMsg=getAttribute("errorMsg")?getAttribute("errorMsg"):this[_dataType].errorMsg;
errorMsg=errorMsg||"invalid";
varvalidateExpr=getAttribute("validateExpr");
validateExpr=validateExpr||this[_dataType].expression;
switch(_dataType){
case"Date":
case"Repeat":
case"Range":
case"Compare":
case"Custom":
case"Group":
case"Limit":
case"LimitB":
case"SafeString":
if(!eval(validateExpr)){
this.AddError(i,errorMsg);
}
break;
default:
if(!eval(validateExpr).test(value)){
this.AddError(i,errorMsg);
}
break;
}
}
}
if(this.ErrorMessage.length>1){
varcontent=this.ErrorMessage[1].replace(/\d+:/,"");
var$element=$(this.ErrorItem[1]);
varname=$element.attr('name');
if(name.indexOf('DTO')!=-1){
name=name.split('.')[1];
}
var$targetElement=$element;
var$tempElement=$targetElement.closest('form').find('#'+name+'ID');
if($tempElement.hasClass('select')){
$targetElement=$tempElement;
}
showErrorMessage($element.closest('.modal'),$targetElement,content);
returnfalse;
}
returntrue;
},
limit:function(len,min,max){
min=min||0;
max=max||Number.MAX_VALUE;
returnmin<=len&&len<=max;
},
LenB:function(str){
returnstr.replace(/[^\x00-\xff]/g,"**").length;
},
ClearState:function(elem){
with(elem){
if(style.color=="red")
style.color="";
varligertipid=getAttribute("ligertipid");
if(ligertipid&&ligertipid!=""){
removeAttribute("ligertipid");
$(elem).ligerHideTip();
}
}
},
AddError:function(index,str){
this.ErrorItem[this.ErrorItem.length]=this.ErrorItem[0].elements[index];
this.ErrorMessage[this.ErrorMessage.length]=this.ErrorMessage.length+":"+str;
},
Exec:function(op,reg){
returnnewRegExp(reg,"g").test(op);
},
compare:function(op1,operator,op2){
switch(operator){
case"NotEqual":
return(op1!=op2);
case"GreaterThan":
return(op1>op2);
case"GreaterThanEqual":
return(op1>=op2);
case"LessThan":
return(op1<op2);
case"LessThanEqual":
return(op1<=op2);
default:
return(op1==op2);
}
},
MustChecked:function(name,min,max){
vargroups=document.getElementsByName(name);
varhasChecked=0;
min=min||1;
max=max||groups.length;
for(vari=groups.length-1;i>=0;i--)
if(groups[i].checked)hasChecked++;
returnmin<=hasChecked&&hasChecked<=max;
},
IsDate:function(op,formatString){
formatString=formatString||"ymd";
varm,year,month,day;
switch(formatString){
case"ymd":
m=op.match(newRegExp("^\\s*((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})\\s*$"));
if(m==null)returnfalse;
day=m[6];
month=m[5]--;
year=(m[2].length==4)?m[2]:GetFullYear(parseInt(m[3],10));
break;
case"dmy":
m=op.match(newRegExp("^\\s*(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))\\s*$"));
if(m==null)returnfalse;
day=m[1];
month=m[3]--;
year=(m[5].length==4)?m[5]:GetFullYear(parseInt(m[6],10));
break;
default:
break;
}
vardate=newDate(year,month,day);
return(typeof(date)=="object"&&year==date.getFullYear()&&month==date.getMonth()&&day==date.getDate());
functionGetFullYear(y){return((y<30?"20":"19")+y)|0;}
}
};
varValidation={
notNull:function($container,$element,content,errorMessage){
if(isNull(content)){
showErrorMessage($container,$element,errorMessage);
returnfalse;
}
returntrue;
},
email:function($container,$element,content,errorMessage){
varreg=newRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/);
if(!reg.test(content)){
showErrorMessage($container,$element,errorMessage);
returnfalse;
}
returntrue;
},
serialNmuber:function($container,$element,content,errorMessage){
varreg=newRegExp(/^[0-9a-zA-Z_-]*$/);
if(!reg.test(content)){
showErrorMessage($container,$element,errorMessage);
returnfalse;
}
returntrue;
},
number:function($container,$element,content,errorMessage){
varreg=newRegExp(/^[0-9]*$/);
if(!reg.test(content)){
showErrorMessage($container,$element,errorMessage);
returnfalse;
}
returntrue;
},
humanName:function($container,$element,content,errorMessage){
varreg=newRegExp(/(^[A-Za-z]*$)|(^[\u4e00-\u9fa5]*$)/);
if(!reg.test(content)){
showErrorMessage($container,$element,errorMessage);
returnfalse;
}
returntrue;
},
checkByRegExp:function($container,$element,regExp,content,errorMessage){
varreg=newRegExp(regExp);
if(!reg.test(content)){
showErrorMessage($container,$element,errorMessage);
returnfalse;
}
returntrue;
}
};
/**
*检查是否为空
*/
varisNull=function(item){
if(item==null||item==""||item.replace(/(^\s*)|(\s*$)/g,"")==""){
returntrue;
}
returnfalse;
};
/**
*显示提示信息
*/
varshowErrorMessage=function($container,$element,content){
$element.popover({
content:content,
trigger:'manual',
container:$container
}).popover('show').on({
'blur':function(){
$element.popover('destroy');
$element.parent().removeClass('has-error');
},
'keydown':function(){
$element.popover('destroy');
$element.parent().removeClass('has-error');
}
}).focus().parent().addClass('has-error');
};
希望本文所述对大家学习有所帮助。