js本地注册跳转到另外一个页面显示注册信息
0
悬赏园豆：30
[已解决问题]
解决于 2019-04-08 16:59
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
background: #F6F9FB;
}
label {
width: 40px;
display: inline-block;
}
span {
color: red;
}
.container {
position: relative;
margin: 100px auto;
width: 600px;
height: 400px;
padding-left: 350px;
line-height: 40px;
background: white;
box-shadow: -10px 10px 10px rgb(232,235,236);
}
span {
margin-left: 30px;
font-size: 12px;
}
.wrong {
color: red
}
.right {
color: green;
}
.defau {
width: 200px;
height: 20px;
}
.de1 {
background-position: 0 -20px;
}
.button{
margin-left: 100px;
}
h3{
text-align: center;
padding-top: 20px;
margin-right: 50px;
margin-top: 50px;
}
label{
font-size: 12px;
}
.yzm{
width: 100px;
height: 30px;
position: absolute;
left: 1050px;
top: 490px;
}
.body{
position: absolute;
}
label{
margin-top: 25px;
}</style>
</head>
<body>
<div class="title">
<h3>用户注册</h3>
</div>
<div class="container" id="dv">
<div class="body">
<label for="username">用户名:</label><input type="text" id="username" placeholder="请输入用户名"><span></span><br/>
<label for="phone">手机</label><input type="text" id="phone" placeholder="请输入手机号"><span></span><br/>
<label for="e-mail">邮箱</label><input type="text" id="e-mail" placeholder="请输入邮箱"><span></span><br/>
<label for="telephone">座机</label><input type="text" id="telephone" placeholder="请输入座机号"><span></span><br/>
<label for="code_input">验证码</label><input type="text" id="code_input" placeholder="请输入验证码"><span></span><br/>
<div class="button"><label><input type="submit"value="提交" id="my_button"></label></div>
</div>
</div>
<div id="v_container" class="yzm"></div>
<script src="common.js"></script>
<script src="gVerify.js"></script>
<script>
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function(){
var res = verifyCode.validate(document.getElementById("code_input").value);
if(res){
alert("注册成功");
window.location.href='123.html';
}else{
alert("注册失败");
}
};
//用户名
checkInput(my$("username"),/^[a-zA-Z0-9_-]{4,16}$/);
//手机
checkInput(my$("phone"),/^\d{11}$/);
//邮箱
checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
//座机号码
checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
function checkInput(input,reg) {
input.onblur=function () {
if(reg.test(this.value)){
this.nextElementSibling.innerText="正确了";
this.nextElementSibling.style.color="green";
}else{
this.nextElementSibling.innerText="输入错误";
this.nextElementSibling.style.color="red";
}
};
}
</script>
</body>
</html>
我不懂有什么方法能在不应数据库的情况下从另外一个网页调用数据.
最佳答案
0
解决代码
<label for="username">用户名:</label><input name="user" type="text" id="username" placeholder="请输入用户名"><span></span><br/>
js:
var txt = document.getElementById("username");
var str = localStorage.getItem("username");
if (str) {
txt.value = str;
}
window.onbeforeunload = function () {
localStorage.setItem("username",txt.value);
}
其他回答(2)
0
把注册的信息报错到Session中，
在另一个页面中读取Session，显示到前台
收获园豆：15
能举个例子吗，没用过这种操作，JS也才学了1周
@窗外雨，夜微寒。: 这个涉及到服务端代码。SESSION就保存在服务端的内存中，可以设置失效时间。纯客户端的话，可以考虑cookie实现。html5支持的本地存储也可以，也就是楼下说的方法，比cookie存储的空间更大。
@寻找薛定谔的猫: 不懂为什么我的sessionStorage的值始终只有在一个网页,不过用了localStorage之后就可以在两个网页传值了.
0
sessionStorage.setItem("registerMessage",val);
此处的val必须是字符串，你的注册信息的值。
另外一个页面取就直接var str = sessionStorage.getItem("registerMessage");
console.log(str);
打印看一下就有了。
收获园豆：15
本楼的使用H5本地存储功能，比楼上的session好很多的，建议用这个。
@一禅·小和尚: 这种方法为什么只能存储最后一个input的数值呢
@窗外雨，夜微寒。:你是不是循环覆盖掉了？ 几个输入框就写几个sessionStorage。。。他是key+value形式。或者拼接起来，整体存入一个sessionStorage也可以。