如题目的这么一个问题，
A页面代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="signup.css"> 7 </head> 8 9 <body> 10 <div class="creal"> 11 <div class="title"> 12 </div> 13 14 <div class="title"> 15 <h2>用户注册</h2> 16 </div> 17 <div class="container" id="dv"> 18 <div class="body"> 19 <label for="username">用户名:</label><input name="username" type="text" id="username" placeholder="请输入用户名"><span></span><br/> 20 <label for="pwd">密码:</label><input type="password" name="pwd" id="pwd" placeholder="请输入密码"><span></span><br/> 21 <label for="e-mail">邮箱:</label><input type="text" id="e-mail" placeholder="请输入邮箱"><span></span><br/> 22 <label for="telephone">手机号:</label><input type="text" id="telephone" placeholder="请输入手机号"><span></span><br/> 23 <label for="code_input">验证码:</label><input type="text" id="code_input" placeholder="请输入验证码"><br/> 24 <div class="button"><label><input type="submit"value="提交" id="my_button" style=" 50px"></label></div> 25 </div> 26 </div> 27 <div id="v_container" class="yzm"></div> 28 </div> 29 30 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script> 31 32 <script src="common.js"></script> 33 <script src="gVerify.js"></script> 34 35 <script type="text/javascript"> 36 var verifyCode = new GVerify("v_container"); 37 document.getElementById("my_button").onclick = function(){ 38 var res = verifyCode.validate(document.getElementById("code_input").value); 39 if(res){ 40 //存储信息 41 var _data = [$("#username").val(), $("#pwd").val(), $("#e-mail").val(), $("#telephone").val()]; 42 localStorage.setItem("data", _data); 43 console.log(_data); 44 alert("注册成功"); 45 //var _data = $("#username").val() + "," + $("#pwd").val() + "," + $("#e-mail").val(); 46 window.open("123.html"); 47 }else{ 48 alert("注册失败"); 49 } 50 51 checkuser(document.getElementById("username"),/^[a-zA-Z0-9_-]{4,16}$/); 52 //密码 53 checkpwd(my$("pwd"),/^[a-zA-Z0-9_-]{4,16}$/); 54 //邮箱 55 checkemail(my$("e-mail"),/^[0-9a -zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/); 56 //座机号码 57 checktel(my$("telephone"),/^d{7,20}$/); 58 59 function checkuser(input,reg) { 60 input.onblur=function () { 61 if(reg.test(this.value)){ 62 this.nextElementSibling.innerText="输入正确"; 63 this.nextElementSibling.style.color="green"; 64 }else{ 65 this.nextElementSibling.innerText="用户名有误 请输入4-16个英文大小写和数字的组合"; 66 this.nextElementSibling.style.color="red"; 67 } 68 }; 69 } 70 71 function checkpwd(input,reg) { 72 input.onblur=function () { 73 if(reg.test(this.value)){ 74 this.nextElementSibling.innerText="输入正确"; 75 this.nextElementSibling.style.color="green"; 76 }else{ 77 this.nextElementSibling.innerText="密码有误 请输入4-16个英文大小写和数字的组合"; 78 this.nextElementSibling.style.color="red"; 79 } 80 }; 81 } 82 83 function checkemail(input,reg) { 84 input.onblur=function () { 85 if(reg.test(this.value)){ 86 this.nextElementSibling.innerText="输入正确"; 87 this.nextElementSibling.style.color="green"; 88 }else{ 89 this.nextElementSibling.innerText="输入邮件有误 邮件格式为xx@xx.com"; 90 this.nextElementSibling.style.color="red"; 91 } 92 }; 93 } 94 95 function checktel(input,reg) { 96 input.onblur=function () { 97 if(reg.test(this.value)){ 98 this.nextElementSibling.innerText="输入正确"; 99 this.nextElementSibling.style.color="green"; 100 }else{ 101 this.nextElementSibling.innerText="手机号为11个纯数字组合"; 102 this.nextElementSibling.style.color="red"; 103 } 104 }; 105 } 106 </script> 107 108 </body> 109 </html>
B页面获取数据并显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户信息</title> </head> <style> body{ margin: 0 auto; width: 1060px; text-align: center; } h2{ text-align: center; } </style> <body> <h2>用户信息</h2> <script> //获取信息 var _data = localStorage.getItem("data", _data); if (localStorage.getItem("data") != null) { _data = _data.split(","); document.write("用户名:"); document.write("<br>"); document.write(_data[0]); document.write("<br>"); document.write("密码:"); document.write("<br>"); document.write(_data[1]); document.write("<br>"); document.write("邮箱:"); document.write("<br>"); document.write(_data[2]); document.write("<br>"); document.write("座机号:"); document.write("<br>"); document.write(_data[3]); document.write("<br>"); //清空数据 localStorage.removeItem("data"); }else{ alert('数据不存在，请登录') } </script> </body> </html>
这个也可以归结为是localStorage的使用方法来解决的，很困了，先写这么多了。