您的位置:首页 > Web前端 > JQuery

ajax+springmvc+jquery用户登录验证

2017-08-12 16:54 495 查看

html

<form action="/SSM0626/user/register.action" id="myform" method="post">
<div class="form-group">
<label>用户名:</label>
<input type="text" name="userName" id="username" class="form-control">
<span id="span1"></span>
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" name="userPassWord" id="password" class="form-control">
<span id="span2"></span>
</div>
<div class="form-group">
<label>权限:</label>
<label class="radio-inline"><input type="radio" name="userPower" value="管理员">管理员</label>
<label class="radio-inline"><input type="radio" name="userPower" value="普通用户">普通用户</label>
<label class="radio-inline"><input type="radio" name="userPower" value="前台">前台</label>

</div>
<!--<input type="search" name="ttt" placeholder="搜索">-->
<input type="submit" value="注册" class="btn btn-default" >
</form>


js代码-用于字符验证

$(function(){
//失去焦点blur
var username_result = false;
var userpwd_result=false;
$("#username").blur(function(){
if($("#username").val() == ""){
$("#span1").html("username not null!!");
username_result = false;
}
else if(/^\w{6,30}$/.test($("#username").val()) ==false){
$("#span1").html("username 格式错误!!");
username_result = false;
}
else{
$("#span1").html("");
username_result = true;
}
});
$("#password").blur(function(){
if($("#password").val() == ""){
$("#span2").html("password not null!!");
userpwd_result = false;
}
else if(/^\w{6,30}$/.test($("#password").val()) ==false){
$("#span1").html("password 格式错误!!");
userpwd_result = false;
}
else{
$("#span1").html("");
userpwd_result = true;
}
});
//表单提交的时候
$("#myform").submit(function(){
if(username_result == true){
return true;
}
else{
return false;
}
});
});
</script>


ajax

$(function(){

$("#username").blur(function(){
var username_val=$("#username").val();
$.ajax({
async:true,
data:{"username":username_val},
dataType:"text",
url:"/SSM0626/user/checkName.action",
error:function(xhr,status){
console.log(status);
},
success:function(data){
$("#span1").html(data);
}
});
});
});


controller层

//参数和data的key相同
@RequestMapping("checkName.action")
@ResponseBody
//该方法的返回值是给ajax用的
public String checkName(String username){
boolean result=us.checkName(username);
if(result==true){
return "failure";
}else{
return "success";
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: