jQuery 实现表单提交前检验元素值是否为空

jQuery 实现表单提交前检验元素值是否为空

在<form>标签中添加 οnsubmit="return checkForm()"

<form  class="form1" οnsubmit="return checkForm()" action="user/add.action">
		  <div class="div1">
<ul>
 			<li>
 			<div class="div2">
 				
 			id:<input  type="text" name="id" id="id" >
 				<span style="display:none;border:0;float:right;margin-right:180px" id="t1" >请输入数字</span><br />
 			</div>
 			<div id="id1" class="id2" style="dispaly:block">
				  <span class="id2">请输入你的id</span>
			</div>
 			</li>
			
			
			
			<li >
				
				<div >
					用户名:<input type="text" name="username" id="username" >
					<span style="display:none;border:0;float:right;margin-right:50px" id="t2" >用户名长度为3-6位</span><br />
				</div>
				<div id="usern" class="username1" style="dispaly:block">
				  <span class="username1">请输入你的用户名</span>
				</div>
			</li>
			
			<li>
				
				<div class="div2">
					密码    :<input type="text" name="password" id="password">
					<span style="display:block	;border:0;float:right;margin-right:50px" id="t3" >请输入6-18位字母或数字</span><br />
				</div>
				<div id="pwd" class="pwd1" style="dispaly:block">
				  <span class="pwd1">请输入你的密码</span>
				</div>
			</li>
			
			<li>
				
				<div class="div2">
					性别    :<input type="radio" name="sex" id="sex" checked="checked" value="0">男
					<input type="radio" name="sex" id="sex" value="1">女<br />
				</div>
			</li>
			</ul>
		  </div>
		  <div class="div1">
		  	<div></div>
		  	<input type="reset" value="重置">
		  	<input type="submit" value="确定" >
		  </div>
		  
		</form>

jQuery代码如下

<script type="text/javascript">
    	
 	 var flag = true;
 	 var flag1= true;
 	 var flag2= true;
 	 function checkForm(form1){ 
		if($("#id").val() == ""){
		$("#id1").show();
		flag = false;
		}else{
			$("#id1").hide();
			flag = true;
			}
			if($("#username").val() == ""){
			$("#usern").show();
			flag1 = false;
			}else{
			$("#usern").hide();
			flag1 = true;
			}
			 if($("#password").val() == ""){
				
					$("#pwd").show();
					flag2 = false;
					
				}else {
					$("#pwd").hide();
					flag2 = true;
				}
				if(flag && flag1 && flag2){
				$(".form1").submit();
				
				return true;
			    }else{
			    	return false;
			    }
			return flag;
 	 }
</script>

实现如下;

如果不输入内容则显示如下：