嗯哼，验证用户名，密码，重复密码，手机号，邮箱。提交时全部进行验证，通过才跳转。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jquery.js"></script> 7 <style> 8 /* input{ 9 float:left; 10 }*/ 11 span{ 12 /*display:inline;*/ 13 color: red; 14 font-weight: bold; 15 font-family: '微软雅黑'; 16 display: none; 17 } 18 </style> 19 </head> 20 <body> 21 <form action="regist.php" method="get"> 22 <div> 23 <p>用户名</p> 24 <p><input type="text" name="username"><span>用户名至少为6位！</span></p> 25 </div> 26 <div> 27 <p>密码</p> 28 <p><input type="text" name="password"><span>密码至少为6位！</span></p> 29 </div> 30 <div> 31 <p>再次输入密码</p> 32 <p><input type="text" name="repassword"><span>两次密码不一致！</span></p> 33 </div> 34 <div> 35 <p>手机号</p> 36 <p><input type="text" name="tel" maxlength="11"><span>手机号码格式错误！</span></p> 37 </div> 38 <div> 39 <p>邮箱</p> 40 <p><input type="text" name="mail"><span>邮箱格式错误！</span></p> 41 </div> 42 <div> 43 <p><input type="submit" value="提交"></p> 44 </div> 45 </form> 46 </body> 47 <script> 48 //原文是用data给每个标签添加一个属性，为了便于理解，直接采用了变量 49 var check1 = 0; 50 var check2 = 0; 51 var check3 = 0; 52 var check4 = 0; 53 var check5 = 0; 54 //用户名 55 $('input[name="username"]').blur(function(){ 56 if($(this).val().length<6){ 57 $(this).next('span').css({"display":"inline"}); 58 check1 = 0; 59 }else{ 60 $(this).next('span').css({"display":"none"}); 61 check1 = 1; 62 } 63 }); 64 //密码 65 $('input[name="password"]').blur(function(){ 66 if($(this).val().length<6){ 67 $(this).next('span').css({"display":"inline"}); 68 check2 = 0; 69 }else{ 70 $(this).next('span').css({"display":"none"}); 71 check2 = 1; 72 } 73 }); 74 //再次输入密码 75 $('input[name="repassword"]').blur(function(){ 76 if($(this).val()!=$('input[name="password"]').val()){ 77 $(this).next('span').css({"display":"inline"}); 78 check3 = 0; 79 }else{ 80 $(this).next('span').css({"display":"none"}); 81 check3 = 1; 82 } 83 }); 84 //手机号 85 $('input[name="tel"]').blur(function(){ 86 //此处注意正则表达式的使用，正则.test(‘字符串’)，字符串.match(正则) 87 if(!$(this).val().match(/^188\d{8}$/)){ 88 $(this).next().show(); 89 check4 = 0; 90 }else{ 91 $(this).next().hide(); 92 check4 = 1; 93 } 94 }); 95 //邮箱 96 $('input[name="mail"]').blur(function(){ 97 if(!$(this).val().match(/^\w+@\w+\.com$/)){ 98 $(this).next('span').css({"display":"inline"}); 99 check5 = 0; 100 }else{ 101 $(this).next('span').css({"display":"none"}); 102 check5 = 1; 103 } 104 }); 105 $('form').submit(function(){ 106 $('input').blur(); 107 var sum = check1 + check2 + check3 + check4 + check5; 108 if(sum!=5){ 109 return false; 110 } 111 }); 112 </script> 113 </html>
