jQuery验证表单属性是否为空 -

跟随我的心

浏览: 3156 次
性别:
来自: 石家庄

最近访客更多访客>>

月亮不懂夜的黑

liulangren123

mycpoo

yanglin920y

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-10 ( 1)
更多存档...

jQuery验证表单属性是否为空

博客分类：

jquery

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 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}