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

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

登录页面

<!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("注册成功")

}

相关文章
|
2天前
|
前端开发 JavaScript API
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
8 0
|
3天前
|
前端开发 网络协议 JavaScript
程序员必知:前端之HTML
程序员必知:前端之HTML
|
3天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置
|
1月前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记(一)
前端性能优化的整理笔记(一)
114 0
|
2天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
26天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
29 2
|
1月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
52 1
|
1月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
1月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
41 2
|
1月前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
31 1