JavaScript登入注册界面,js制作登录注册页面
javascript html 设计一个登录界面
注册页面代码：
!DOCTYPE?html
html?lang="en"
head
????meta?charset="UTF-8"
????title注册/title
/head
body
form?method="post"?onsubmit="return?false"?id="form"
????input?type="text"?name="username"?placeholder="用户名"br
????input?type="password"?name="password"?placeholder="密码"br
????input?type="password"?name="rePassword"?placeholder="再次输入密码"br
????input?type="submit"?onclick="register_user()"?value="注册"br
/form
a?href="login.html"去登录/a
script
????var?localDB?=?openDatabase('localDB',?'1.0',?'Test?DB',?2?*?1024?*?1024);
????localDB.transaction(function?(ts)?{
????????ts.executeSql('CREATE?TABLE?IF?NOT?EXISTS?user(username,password)')
????});
????function?register_user()?{
????????var?username?=?document.getElementsByTagName("input")[0].value;
????????var?password?=?document.getElementsByTagName("input")[1].value;
????????var?rePassword?=?document.getElementsByTagName("input")[2].value;
????????if(password?!=?rePassword)
????????{
????????????alert("两次输入的密码不同，请重新输入");
????????}else
?{
????????????localDB.transaction(function(ts){
????????????????ts.executeSql("INSERT?INTO?user?(username,password)?VALUES?('"+username+"','"+password+"');");
????????????????alert("注册成功");
????????????});
????????}
????}
/script
/body
/html
登录页面代码：
!DOCTYPE?html
html?lang="en"
head
????meta?charset="UTF-8"
????title登录/title
/head
body
form?onsubmit="return?false"?method="post"
????input?type="text"?placeholder="用户名"br
????input?type="password"?placeholder="密码"br
????input?type="submit"?value="登录"?onclick="login()"br
/form
a?href="register.html"去注册/a
script
????var?localDB?=?openDatabase('localDB',?'1.0',?'Test?DB',?2?*?1024?*?1024);
????localDB.transaction(function?(ts)?{
????????ts.executeSql("SELECT?*?FROM?user",[],function?(tx,?results)?{
????????????var?len?=?results.rows.length;
????????????if(len=0)
????????????{
????????????????localDB.transaction(function?(ts)?{
????????????????????ts.executeSql('CREATE?TABLE?IF?NOT?EXISTS?user(username,password)')
????????????????});
????????????}
????????});
????});
????function?login()?{
????????var?username?=?document.getElementsByTagName("input")[0].value;
????????var?password?=?document.getElementsByTagName("input")[1].value;
????????localDB.transaction(function?(ts)?{
????????????ts.executeSql("SELECT?*?FROM?user?WHERE?username='"+username+"';",[],function?(ts,?res)?{
????????????????if(res.rows.length=0)
????????????????{
????????????????????alert("登录失败，用户未注册");
????????????????}else?if?(password?==?res.rows[0].password)
????????????????{
????????????????????alert("登录成功,三秒后跳转到百度");
????????????????????setInterval(function?()?{
????????????????????????location.href?=?"";
????????????????????},3000);
????????????????}else
?{
????????????????????alert("登录失败，密码错误");
????????????????}
????????????});
????????})
????}
/script
/body
/html
以上代码使用了WEB SQL，还请选择合适的浏览器查看。
javascript写的注册页面代码
只是写了 昵称 密码 确认密码 电子邮件地址
其余的自己写一下吧
就是这个格式
自己完成吧！
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleUntitled Document/title
script language="javascript"
function checkname(){
var div = document.getElementById("div1");
div.innerHTML = "";
var name1 = document.form1.text1.value;
if (name1 == "") {
div.innerHTML = "姓名不能为空！";
document.form1.text1.focus();
return false;
}
if (name1.length 4 || name1.length 16) {
div.innerHTML = "姓名输入的长度4-16个字符！";
document.form1.text1.select();
return false;
}
var charname1 = name1.toLowerCase();
for (var i = 0; i name1.length; i++) {
var charname = charname1.charAt(i);
if (!(charname = 0 charname = 9) (!(charname = 'a' charname = 'z')) (charname != '_')) {
div.innerHTML = "姓名包含非法字母，只能包含字母，数字，和下划线";
document.form1.text1.select();
return false;
}
}
return true;
}
function checkpassword(){
var div = document.getElementById("div2");
div.innerHTML = "";
var password = document.form1.text2.value;
if (password == "") {
div.innerHTML = "密码不位空！";
document.form1.text2.focus();
return false;
}
if (password.length 4 || password.length 12) {
div.innerHTML = "密码长度4-12位";
document.form1.text2.select();
return false;
}
return true;
}
function checkrepassword(){
var div = document.getElementById("div3");
div.innerHTML = "";
var password = document.form1.text2.value;
var repass = document.form1.text3.value;
if (repass == "") {
div.innerHTML = "密码不位空！";
document.form1.text3.focus();
return false;
}
if (password != repass) {
div.innerHTML = "输入密码和确认密码长度不一致";
document.form1.text3.select();
return false;
}
return true;
}
function checkEmail(){
var div = document.getElementById("div4");
div.innerHTML = "";
var email = document.form1.text5.value;
var sw = email.indexOf("@", 0);
var sw1 = email.indexOf(".", 0);
var tt = sw1 - sw;
if (email.length == 0) {
div.innerHTML = "电子邮件不能位空";
document.form1.text5.focus();
return false;
}
if (email.indexOf("@", 0) == -1) {
div.innerHTML = "电子邮件格式不正确，必须包含@符号！";
document.form1.text5.select();
return false;
}
if (email.indexOf(".", 0) == -1) {
div.innerHTML = "电子邮件格式不正确，必须包含.符号！";
document.form1.text5.select();
return false;
}
if (tt == 1) {
div.innerHTML = "邮件格式不对。@和.不可以挨着！";
document.form1.text5.select();
return false;
}
if (sw sw1) {
div.innerHTML = "电子邮件格式不正确，@符号必须在.之前";
document.form1.text5.select();
return false;
}
else {
return true;
}
return ture;
}
function check(){
if (checkname() checkpassword() checkrepassword() checkEmail()) {
return true;
}
else {
return false;
}
}
/script
/head
body
form name="form1" method="post" action="2.html" onsubmit="return check()"
table
tr
td
用户名：
/td
td
input id="text1" type="text" name="text1" onblur="check()"
div id="div1" style="display:inline"
/div
/td
/tr
tr
td
密码：
/td
td
input id="text2" type="password" name="text2" onblur="check()"
div id="div2" style="display:inline"
/div
/td
/tr
tr
td
确认密码：
/td
td
input id="text3" type="password" name="text3" onblur="check()"
div id="div3" style="display:inline"
/div
/td
/tr
tr
td
电子邮件地址：
/td
td
input id="text4" type="text" name="text4" onblur="check()"
div id="div4" style="display:inline"
/div
/td
/tr
tr align="center"
td align="center"
input type="submit" value="提交" name="tect6"input type="reset" value="重置" name="text7"
/td
/tr
/table
/form
/body
/html
注册登录页面用js需要注意的问题
用户名大小写。注册登录页面用js需要注意的是用户名大小写和规定密码长度，登录页面是需要提供帐号密码验证的界面，有控制用户权限、记录用户行为，保护操作安全的作用。
