<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><linkhref="css/style.css"rel="stylesheet"type="text/css"/><!--引入jQuery--><scriptsrc="../../scripts/jquery.js"type="text/javascript"></script><scripttype="text/javascript">//<![CDATA[$(function(){//如果是必填的，则加红星标识.$("form:input.required").each(function(){var$required=$("<strongclass='high'>*</strong>");//创建元素$(this).parent().append($required);//然后将它追加到文档中});//文本框失去焦点后$('form:input').blur(function(){var$parent=$(this).parent();$parent.find(".formtips").remove();//验证用户名if($(this).is('#username')){if(this.value==""||this.value.length<6){varerrorMsg='请输入至少6位的用户名.';$parent.append('<spanclass="formtipsonError">'+errorMsg+'</span>');}else{varokMsg='输入正确.';$parent.append('<spanclass="formtipsonSuccess">'+okMsg+'</span>');}}//验证邮件if($(this).is('#email')){if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){varerrorMsg='请输入正确的E-Mail地址.';$parent.append('<spanclass="formtipsonError">'+errorMsg+'</span>');}else{varokMsg='输入正确.';$parent.append('<spanclass="formtipsonSuccess">'+okMsg+'</span>');}}}).keyup(function(){$(this).triggerHandler("blur");}).focus(function(){$(this).triggerHandler("blur");});//endblur//提交，最终验证。$('#send').click(function(){$("form:input.required").trigger('blur');varnumError=$('form.onError').length;if(numError){returnfalse;}alert("注册成功,密码已发到你的邮箱,请查收.");});//重置$('#res').click(function(){$(".formtips").remove();});})//]]></script></head><body><formmethod="post"action=""><divclass="int"><labelfor="username">用户名:</label><inputtype="text"id="username"class="required"/></div><divclass="int"><labelfor="email">邮箱:</label><inputtype="text"id="email"class="required"/></div><divclass="int"><labelfor="personinfo">个人资料:</label><inputtype="text"id="personinfo"/></div><divclass="sub"><inputtype="submit"value="提交"id="send"/><inputtype="reset"id="res"/></div></form></body></html>

img素材：

css代码

body{font:12px/19pxArial,Helvetica,sans-serif;color:#666;}formdiv{margin:5px0;}.intlabel{float:left;width:100px;text-align:right;}.intinput{padding:1px1px;border:1pxsolid#ccc;height:16px;}.sub{padding-left:100px;}.subinput{margin-right:10px;}.formtips{width:200px;margin:2px;padding:2px;}.onError{background:#FFE0E9url(../img/reg3.gif)no-repeat0center;padding-left:25px;}.onSuccess{background:#E9FBEBurl(../img/reg4.gif)no-repeat0center;padding-left:25px;}.high{color:red;}

浏览器效果：