<!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" /> <title>form</title> <mce:style><!-- --></mce:style><style mce_bogus="1"></style> <mce:script src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("form :input.required").each(function(){ var $required = $("<strong class='high' style="color:red" mce_style="color:red">*</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){ var errorMsg = '请输入至少6位的用户名.'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg = '输入正确'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } if($(this).is("#email")){ if(this.value==""||(this.value!=""&& !/.+@.+/.[a-zA-Z]{2,4}$/.test(this.value))){ var errorMsg = "请输入正确的E-Mail地址"; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg = '输入正确'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</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){ return false; } alert("注册成功") }); }); // --></mce: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" value="重置" /> </div> </form> </body> </html>