使用jQuery实现这个以前用js实现的功能，可以不用使用令人讨厌的alert警告框，而是在页面需要的地方给出错误提示信息。
[i]注意：[/i]贴出来的代码只是帮助理解，完整的源代码已经打包上传了
1.登录页面
[img]http://dl.iteye.com/upload/attachment/576969/7076d0ee-ddc3-3f48-a2fa-f7f79e612c2c.png[/img]
2.jQuery代码
3.css相关代码
[i]注意：[/i]贴出来的代码只是帮助理解，完整的源代码已经打包上传了
1.登录页面
[img]http://dl.iteye.com/upload/attachment/576969/7076d0ee-ddc3-3f48-a2fa-f7f79e612c2c.png[/img]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/login.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<title>用户登录</title>
</head>
<body>
<div id="sign_in">
<form action="" method="post">
<label for="username">用户名</label>
<p class="errorinfo" id="info1">请输入用户名</p>
<input type="text" id="username" name="username" tabindex="1"/>
<label for="password">密码</label>
<p class="errorinfo" id="info2">请输入密码</p>
<input type="password" id="password" name="password" tabindex="2" />
<button type="submit" id="submit" name="submit" tabindex="3">登录</button>
</form>
</div>
</body>
</html>
2.jQuery代码
/*jQuery验证表单属性是否为空*/
$(document).ready(function(){
$("form").submit(function(){
//获得表单值
var username=$("#username").val();
var password=$("#password").val();
//如果表单为空，提示用户
if(username==""){
//显示错误提示信息
$("#username").addClass("redborder");
$("#info1").addClass("show");
return false;
}
if(password==""){
$("#password").addClass("redborder");
$("#info2").addClass("show");
return false;
}
return true;
});
});
3.css相关代码
.errorinfo{
visibility:hidden;
color: #DD4B39;
line-height:18px;
}
.show{ visibility:visible}
.redborder{ border:1px solid #DD4B39}
687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
