JQUERY 登录验证

来源:互联网 发布:华讯网络校园招聘一面 编辑:程序博客网 时间:2024/06/01 14:41
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){

// 为看不清楚绑定事件
$("#see").click(function(){
$("#vimg").attr("src", "${ctx}/verify.action?random=" + Math.random());
});

// 为验证码绑定click与mouseover
$("#vimg").mouseover(function(){
$(this).css("cursor", "pointer");
}).click(function(){
$("#see").trigger("click");
});

// 登录验证
$("#loginBtn").click(function(){
// 做表单输入校验
var userId = $("#userId");
var password = $("#password");
var code = $("#code");
var msg = "";
if ($.trim(userId.val()) == ""){
msg = "用户名不能为空!";
userId.focus();
}else if (!/^\w{5,20}$/.test($.trim(userId.val()))){
msg = "用户名格式不正确!";
userId.focus();
}else if ($.trim(password.val()) == ""){
msg = "密码不能为空!";
password.focus();
}else if (!/^\w{6,20}$/.test($.trim(password.val()))){
msg = "密码格式不正确!";
password.focus();
}else if ($.trim(code.val()) == ""){
msg = "验证码不能为空!";
code.focus();
}else if (!/^[0-9a-zA-Z]{4}$/.test($.trim(code.val()))){
msg = "验证码格式不正确!";
code.focus();
}
if (msg != ""){
alert(msg);
}else{
// 获取表单中的参数
var params = $("#loginForm").serialize();
//alert(params);
// 发送登录的异步请求
$.post("${ctx}/loginAjax.action", params, function(data, status){
alert(data.tip);
}, "json");
}

});

// 为document绑定onkeydown事件监听是否按了回车键
$(document).keydown(function(event){
if (event.keyCode === 13){ // 按了回车键
$("#loginBtn").trigger("click");
}
});
});
</script>


<form  method="post" id="loginForm" >
用户名:<input type="text" id="userId" value="" size="20" >
密 码:<input type="password" id="password">  
验证码:<input type="text" style="margin-left:5px;width:35px;" id="code" maxlength="4"/>
<img title="验证码" width="55" height="22" id="vimg" src="${ctx}/verify.action">
<a href="javascript:void(0)" id="see">看不清楚</a></td>
</form>
0 0