1.html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //增加红星标识 $("form :input.required").each(function(){ $(this).parent().append("<strong class='high'>*</strong>"); }); $("form :input").blur(function(){ var j_parent = $(this).parent(); j_parent.find(".formtips").remove(); var message = ""; if($(this).is("#username")){ if(this.value==""|| this.value.length < 6){ message ="请输入至少六位的用户名！"; j_parent.append("<span class='formtips onError'>"+message+"</span>"); }else{ message ="输入正确！"; j_parent.append("<span class='formtips onSuccess'>"+message+"</span>"); } } //邮件验证 if($(this).is("#email")){ if( this.value==""||( this.value!="" && ) ) ){ message = '请输入正确的E-Mail地址！'; j_parent.append('<span class="formtips onError">'+message+'</span>'); }else{ message = '输入正确！'; j_parent.append('<span class="formtips onSuccess">'+message+'</span>'); } } //相应键盘按键弹起事件 }).keyup(function(){ $(this).triggerHandler("blur"); //得到焦点事件 }).focus(function(){ $(this).triggerHandler("blur"); }); $("#send").click(function(){ $("form .required:input").trigger("blur"); var numError = $("form .onError").length; if(numError > 0){ return false; } alert("数据已发送！"); }); }); </script></head><body><form method="post" action="">
<div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="required" /> </div> <div class="int"> <label for="email">邮箱:</label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="personinfo">个人资料:</label> <input type="text" id="personinfo" /> </div> <div class="sub"> <input type="submit" value="提交" id="send"/><input type="reset" id="res"/> </div></form></body>
</html>
2.css code
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}.int label { float:left; width:100px; text-align:right;}.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}.sub { padding-left:100px;}.sub input { margin-right:10px; }.formtips{width: 200px;margin:2px;padding:2px;}.onError{ background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center; padding-left:25px;}.onSuccess{ background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center; padding-left:25px;}.high{ color:red;}3.image
4.效果
