程序员必知:完成登录与注册页面的前端

简介: 程序员必知:完成登录与注册页面的前端

登录页面

<!DOCTYPE html

[/span>html lang="en"

[/span>head

[/span>meta charset="UTF-8"

[/span>title

[/span>script type="text/javascript" src="static/js/ma.js"

[/span>body

[/span>p id="meto"

[/span>script

[/span>div id="container" style="width: 300px"

[/span>div id="header" style="background-color: darkorange"h2 align="center"

[/span>div id="content"

[/span>p align="center"input id="uname" type="text" name="user" placeholder="请输入账号"

[/span>p align="center"input id="upass" type="password" name="psw" placeholder="请输入密码"

[/span>br

[/span>div id="error_box"br

[/span>input type="radio" value="stu"

[/span>input type="radio" value="tea"

[/span>br

[/span>input type="checkbox" value="true"a href=""

[/span>p align="center"button onclick="fnLogin()"

nbspnbspnbsp

[/span>div id="footer" style="background-color: //代码效果参考:http://www.zidongmutanji.com/bxxx/587180.html

darkgoldenrod"h3 align="center"

function fnLogin() {

var oUname = document.getElementById("uname")

var oUpass = document.getElementById("upass")

var oError = //代码效果参考:http://www.zidongmutanji.com/bxxx/352988.html

document.getElementById("error_box")

oError.innerHTML="[/span>br

if (oUname.value.length > 20 || oUname.value.length [/span> 6) {

oError.innerHTML = "请输入用户名6-20位字符"

return;

}else if ((oUname.value.charCodeAt(0)=57)){

oError.innerHTML="用户名首字母必须是字母"

return;

}else for(var i=0; i

if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)97)||(oUname.value.charCodeAt(i)

oError.innerHTML="用户名必须为字母或数字";

return;

}

}

if (oUpass.value.length > 20 || oUpass.value.length [/span> 6) {

oError.innerHTML = "请输入密码 6-20位字符"

return;

}

window.alert("登陆成功")

注册页面

[/span>html lang="en"

[/span>head

[/span>meta charset="UTF-8"

[/span>title

[/span>script type="text/javascript" src="static/js/ma.js"

[/span>body

[/span>p id="meto"

[/span>script

[/span>div id="container" style="width: 300px"

[/span>div id="header" style="background-color: darkorange"h2 align="center"

[/span>div id="content"

[/span>p align="center"input id="uname" type="text" name="user" placeholder="请输入账号"

[/span>p align="center"input id="upass" type="password" name="psw" placeholder="请输入密码"

[/span>p align="center"input id="upass2" type="password" name="psw2" placeholder="请再次输入密码"

[/span>br

[/span>div id="error_box"br

[/span>input type="radio" value="stu"

[/span>input type="radio" value="tea"

[/span>br

[/span>input type="checkbox" value="true"a href=""

[/span>p align="center"button onclick="fnLogin()"

nbspnbspnbsp

[/span>div id="footer" style="background-color: darkgoldenrod"h3 align="center"

function fnLogin() {

var oUname = document.getElementById("uname")

var oUpass = document.getElementById("upass")

var oUpass2=document.getElementById("upass2");

var oError = document.getElementById("error_box")

oError.innerHTML="[/span>br<span style="color: rgba(0, 0, 255, 1)"]"

if (oUname.value.length > 20 || oUname.value.length [/span> 6) {

oError.innerHTML = "请输入用户名6-20位字符"

return;

}else if ((oUname.value.charCodeAt(0)=57)){

oError.innerHTML="用户名首字母必须是字母"

return;

}else for(var i=0; i

if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)97)||(oUname.value.charCodeAt(i)

oError.innerHTML="用户名必须为字母或数字";

return;

}

}

if (oUpass.value.length > 20 || oUpass.value.length [/span> 6) {

oError.innerHTML = "请输入密码 6-20位字符"

return;

}

else if (oUpass.value!==oUpass2.value){

oError.innerHTML="两次密码不一致";

return;

}

window.alert("注册成功")

}

相关文章
|
8月前
|
存储 小程序 前端开发
微信小程序进阶——后台交互个人中心授权登录
微信小程序进阶——后台交互个人中心授权登录
132 0
|
2天前
|
前端开发 JavaScript 程序员
程序员必知:完成登录与注册页面的前端
程序员必知:完成登录与注册页面的前端
|
1月前
|
SQL 前端开发 API
前端登录流程
前端登录流程
42 0
|
1月前
|
存储 SQL 安全
uniapp-含有后端的登录注册页面编写(一)
uniapp-含有后端的登录注册页面编写
218 0
|
1月前
|
前端开发 数据安全/隐私保护
uniapp-含有后端的登录注册页面编写(二)
uniapp-含有后端的登录注册页面编写(二)
128 0
|
1月前
|
存储 小程序 前端开发
uniapp微信小程序不强制登陆的逻辑(模仿大厂登陆)
uniapp微信小程序不强制登陆的逻辑(模仿大厂登陆)
95 0
|
10月前
|
前端开发 API
前端如何写后台管理系统登录验证详细流程和代码
后台管理系统是公司必备的,从前些年由于技术人员的稀有,导致后台系统非常昂贵,近些年IT行业的快速发展,使得一些中小型公司开始自己写后台,自己维护,从而获取利益的最大化。
245 0
前端如何写后台管理系统登录验证详细流程和代码
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-登录页简单验证2
前端学习笔记202305学习笔记第二十二天-登录页简单验证2
31 0
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-登录页简单验证1
前端学习笔记202305学习笔记第二十二天-登录页简单验证1
31 0
uniapp登陆页面功能
uniapp登陆页面功能
152 0