jQuery验证表单属性是否为空
使用jQuery实现这个以前用js实现的功能，可以不用使用令人讨厌的alert警告框，而是在页面需要的地方给出错误提示信息。
注意：贴出来的代码只是帮助理解，完整的源代码已经打包上传了
1.登录页面
<!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 id="info1">请输入用户名</p> <input type="text" id="username" name="username" tabindex="1"/> <label for="password">密码</label> <p 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>
/*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;});});.errorinfo{ visibility:hidden; color: #DD4B39; line-height:18px; }.show{ visibility:visible}.redborder{ border:1px solid #DD4B39}