1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <link href="css/style.css" rel="stylesheet" type="text/css" /> 7 <!-- ??引入jQuery --> 8 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 9 <script type="text/javascript">10 //<![CDATA[11 $(function(){12 ??//如果是必填的，则加红星标识.13 ??$("form :input.required").each(function(){14 ???var $required = $("<strong class=‘high‘> *</strong>"); //创建元素15 ???$(this).parent().append($required); //然后将它追加到文档中16 ??});17 ?????????//文本框失去焦点后18 ?????$(‘form :input‘).blur(function(){19 ????var $parent = $(this).parent();20 ????$parent.find(".formtips").remove();21 ????//验证用户名22 ????if( $(this).is(‘#username‘) ){23 ?????if( this.value=="" || this.value.length < 6 ){24 ?????????var errorMsg = ‘请输入至少6位的用户名.‘;25 ????????????????????????$parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘);26 ?????}else{27 ?????????var okMsg = ‘输入正确.‘;28 ?????????$parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘);29 ?????}30 ????}31 ????//验证邮件32 ????if( $(this).is(‘#email‘) ){33 ????if( this.value=="" || ( this.value!="" && ) ) ){34 ??????????????????????var errorMsg = ‘请输入正确的E-Mail地址.‘;35 ???????$parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘);36 ????}else{37 ??????????????????????var okMsg = ‘输入正确.‘;38 ???????$parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘);39 ????}40 ????}41 ??}).keyup(function(){42 ?????$(this).triggerHandler("blur");43 ??}).focus(function(){44 ???????$(this).triggerHandler("blur");45 ??});//end blur46 47 ??48 ??//提交，最终验证。49 ???$(‘#send‘).click(function(){50 ????$("form :input.required").trigger(‘blur‘);51 ????var numError = $(‘form .onError‘).length;52 ????if(numError){53 ?????return false;54 ????} 55 ????alert("注册成功,密码已发到你的邮箱,请查收.");56 ???});57 58 ??//重置59 ???$(‘#res‘).click(function(){60 ????$(".formtips").remove(); 61 ???});62 })63 //]]>64 </script>65 </head>66 <body>67 68 <form method="post" action="">69 ?<div class="int">70 ??<label for="username">用户名:</label>71 ??<input type="text" id="username" class="required" />72 ?</div>73 ?<div class="int">74 ??<label for="email">邮箱:</label>75 ??<input type="text" id="email" class="required" />76 ?</div>77 ?<div class="int">78 ??<label for="personinfo">个人资料:</label>79 ??<input type="text" id="personinfo" />80 ?</div>81 ?<div class="sub">82 ??<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>83 ?</div>84 </form>85 86 </body>87 </html>jquery表单验证
原文地址：https://www.cnblogs.com/dqh123/p/9470054.html