JQUERY 登录验证

1 篇文章 0 订阅
<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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值