也可以提交给一个php页面处理，post到一个php文件，对注册信息进行过滤，
符合就添加不符合继续注册，信息符合后就连接数据库，插入这条数据。
登录的时候实际上是做一个查询，看数据表中有没有你登录输入的数据，有就登录成功，没有就跳到登录页提示用户名或者密码不正确，或者跳转到注册页提示此账号不存在请先注册。逻辑就是这样，代码量也蛮少。
登录页面 login.html
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<script>
window.addEventListener('load',function(){
var form = document.forms[0]
form.addEventListener('submit',function(e){
e.preventDefault()
var userName = form.userName.value
var pwd = form.pwd.value
var userInfo = JSON.parse(localStorage.getItem(userName))
if(userInfo && userInfo.pwd === pwd)
return alert('登录成功!')
alert('登录失败 请先注册!')
})
document.getElementsByTagName('button')[0].addEventListener('click',function(e){
e.preventDefault()
location.href = 'regist.html'
})
})
</script>
</head>
<body>
<form action="#">
<input name="userName" type="text" placeholder="账户名" required>
<input name="pwd" type="password" placeholder="密码" required>
<input type="submit" value="登录">
<button>注册</button>
</form>
</body>
</html>
注册页面 regist.html
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>regist</title>
<script>
window.addEventListener('load',function(){
var form = document.forms[0]
var getUserInfo = function(){
var value ={}
for(var i=0,len=form.elements.lengthi<leni++){
var el = form.elements[i]
if(/text|password/.test(el.type)){
value[el.name] = el.value
}
}
return value
}
form.addEventListener('submit',function(e){
e.preventDefault()
var userInfo = getUserInfo()
localStorage.setItem(userInfo.userName,JSON.stringify(userInfo))
alert('注册成功!')
})
document.getElementsByTagName('button')[0].addEventListener('click',function(e){
e.preventDefault()
var value = getUserInfo()
var out = []
for(var name in value)
out.push(name+'='+value[name])
alert(out.join(','))
})
})
</script>
</head>
<body>
<form action="#">
<input name="userName" type="text" placeholder="账户名" required>
<input name="pwd" type="password" placeholder="密码" required>
<input name="confirmPwd" type="password" placeholder="确认密码" required>
<input type="submit" value="注册">
<button>验证</button>
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）