Jquery 表单验证

 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
 <script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
 <SCRIPT LANGUAGE="JavaScript">
	$(function(){
	     $('form :input').blur(function(){
             $(this).removeClass("warning").parents("td")
			 .find("span.error").remove()
			 .end()
			 .find("span.ok").remove();

		     var $listItem =  $(this).parents("td").find("span:last");
			 
			  //验证用户名
			  if( $(this).is('#username') ){
				if( this.value=="" || this.value.length < 3 ){
                      var errorMsg = '用户名不能为空并且长度不能小于3！';
					  $('<span class="error"></span>').css("color","red")
					  .text(errorMsg)
					  .appendTo($listItem);
					  $listItem.css("backgroundColor","#eee");
					  $(this).addClass("warning");
				}
				else{
                       var okMsg = '验证通过！';
					  $('<span class="ok"></span>').css("color","blue")
					  .text(okMsg)
					  .appendTo($listItem);
					  $listItem.css("backgroundColor","#eee");
					  $(this).addClass("rightok");
				}//end if
			 }//end if

             //验证邮件
			 if( $(this).is('#email') ){
				if( this.value=="" ||  ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                      var errorMsg = '请输入正确的email格式！';
					  $('<span class="error"></span>').css("color","red")
					  .text(errorMsg)
					  .appendTo($listItem);
					  $listItem.css("backgroundColor","#eee");
					  $(this).addClass("warning");
				}
				else{
                       var okMsg = '验证通过！';
					  $('<span class="ok"></span>').css("color","blue")
					  .text(okMsg)
					  .appendTo($listItem);
					  $listItem.css("backgroundColor","#eee");
					  $(this).addClass("rightok");
				}//end if
			 }//end if


		 })//end blur


		 //提交，最终验证。
		 $('#send').click(function(){
			$("#sub_Msg").remove();
			$(":input.required").trigger('blur');
			var numWarning = $('.warning',$('form')).length;
            if(numWarning){
			    var errorFieldList = [];
                $(".warning").each(function(){
					errorFieldList.push( $(this).prev("span").text() );
				})
				$('<div></div>)').attr({'id':'sub_Msg','class':'warning'})
				.append("你输入的数据有"+numWarning+"处 不合法！<br/>")
				.append("&bull;"+errorFieldList.join("<br/>&bull;"))
				.insertBefore('#send');
				return false;
			} 
			alert("提交成功!");
		 })
	})
 </SCRIPT>

<style>
input{
border : 1px solid #999;
}
.warning{
border : 1px solid red;
}
.rightok{
border : 1px solid blue;
}
.code{
  font-size:12px;
}
</style>

<h3>表单验证简单例子</h3>

<form>
<table>

<tr>
<td>
 <span>用户名</span> :<input type="text"  id="username" class="required" /><span></span>
</td>
</tr>

<tr>
<td>
 <span>邮箱</span> :<input type="text"  id="email" class="required" /><span></span>

</td>
</tr>

</table>
</form>
<br/><br/>
 <input type="submit" id="send"/>

 

评论

1 楼 wangyazhen 2009-12-17  

这样写似乎不大好，比普通的js要简洁，但是通用性还是差了点，建议使用jValidate表单检测插件，本想上网搜不用jValidate别的比较好的方法，看来还是没有！