JavaScript登录界面制作
2024-04-09 00:23:41
主要使用javascript表单登录界面，内部加入图片，表单检测，随机生成验证码。
注册：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用户注册</title>
<style type="text/css">
pc{ /*表单元素引用样式*/font-family: "楷体";font-size: 16pt;color: #007FFF;border: 1px solid #99999;
}
h3{ /*表单元素引用样式*/font-family: "华文彩云";font-size: 30pt;color: #70DB93;border: 1px solid #99999;
}
</style>
</head>
<script language="javascript">
function checkemail(email){var str=email;//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; var objExp=new RegExp(Expression);if(objExp.test(str)==true){return true;}else{return false;}
}function check(form1){if(form1.email.value==""){alert("请输入Email地址!");form1.email.focus();return;}if(form1.phone1.value==""){alert("请输入手机号!");form1.phone1.focus();return;}if(form1.username.value==""){alert("请输入用户名!");form1.username.focus();return;}if(form1.password1.value==""){alert("请输入密码!");form1.password1.focus();return;}if(form1.password2.value==""){alert("请输入确认密码!");form1.password2.focus();return;}if(form1.password1.value!=form1.password2.value){alert("密码与确认密码不同!");form1.password1.focus();form1.password2.focus();return;}if(!checkemail(form1.email.value)){alert("您输入的Email地址不正确!");form1.email.focus();return;}form1.submit();
}</script>
<body>
<form name="form1">
<h3 align="center">用户注册</h3>
<pc>用户名：</pc><input type="text" name="username" size=20><br>
<pc>性别：</pc><input type="radio" name="field_name" checked value="男">男
<input type="radio" name="field_name" value="女">女 <br>
<pc>邮箱：</pc><input type="text" name="email" maxlength=30 size=30><br>
<pc>手机号：</pc><input type="text" name="phone1" maxlength=11 size=17><br>
<pc>密码：</pc><input type="password" name="password1" maxlength=15 size=21><br>
<pc>确认密码：</pc><input type="password" name="password2" maxlength=15 size=21><br>
<pc>用户照片：</pc><input type="file" name="photo"><br>
<pc>年龄：</pc><select name="hobby">
<option value="6-12" selected>6-12</option>
<option value="13-20">13-20</option>
<option value="21-30">21-30</option>
<option value="31-50">31-50</option>
</select><br><br>
<pc>你最擅长的编程语言：</pc><select name="hobby">
<option value="Python" selected>python</option>
<option value="C/C++">C/C++</option>
<option value="java">java/javascript</option>
<option value="其他">其他</option>
</select><br><br>
<input type="image" name="sub" src="denglu.bmp"onclick="check(form1)">
<input type="image" name="re" src="chongxie.bmp"onclick="form1.reset()">
</body>
</html>
登录：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用户登录</title>
<style type="text/css">
pc{ /*表单元素引用样式*/font-family: "楷体";font-size: 16pt;color: #007FFF;border: 1px solid #99999;
}
h3{ /*表单元素引用样式*/font-family: "华文琥珀";font-size: 30pt;color: #70DB93;border: 1px solid #99999;
}
</style>
</head>
<script language="javascript">function checkCode(digit){//自动生成验证码var result="";for(i=0;i<parseInt(digit);i++){result=result+(parseInt(Math.random()*10)).toString();}return result;
}
function cout(){//输出var result=checkCode(6);alert("验证码："+result);}
function ps(){//输出提示alert("游客登录将会无法编辑文章");
}
function check(form1){if(form1.phone.value==""){alert("请输入手机号!");form1.phone.focus();return;}if(form1.username.value==""){alert("请输入用户名!");form1.username.focus();return;}if(form1.password.value==""){alert("请输入密码!");form1.password.focus();return;}if(form1.yan.value==""){alert("请输入验证码!");form1.yan.focus();return;}form1.submit();
}
</script>
<body>
<form name="form1">
<h3 align="center">用户登录</h3>
<pc>手机号：</pc><input type="text" name="phone" maxlength=11 size=17><br>
<pc>用户名：</pc><input type="text" name="username" size=20><br>
<pc>密码：</pc><input type="password" name="password" maxlength=15 size=21><br>
<pc>验证码：</pc><input type="text" name="yan" maxlength=20 size=17>
<input type="image" name="yan" src="yan.bmp" onclick="cout()"><br>
<input type="image" name="sub" src="denglu.bmp"onclick="check(form1)">
<input type="image" name="re" src="chongxie.bmp"onclick="from1.reset()">
<input type="image" src="youke.bmp">
<input type="image" name="img" src="1.png"onclick="ps()">
</body>
</html>运行截图：
代码+图片：这里
JavaScript登录界面制作相关推荐
- html简单的登录界面制作
html简单的登录界面制作 话不多说,老铁们直接拿代码去用吧. <!DOCTYPE html> <html><head><meta charset=" ...
- 网易邮箱登录界面制作方法
今天用css和html制作一个简单的登录界面,下面是代码: <div class="box"><div class="top-box"> ...
- Swing学习----------QQ登录界面制作(一)
素材获取可关注微信公众号:开源IT,后台回复 "素材" 免费获取. 最近学习的课程有点紧,所以暂时放下了SSH的学习,等时间稍微松点再开始SSH博客的跟进.在这个学期的JAVA课程 ...
- Swing学习----------QQ登录界面制作（二）
素材获取可关注微信公众号:开源IT,后台回复 "素材" 免费获取. 上次把QQ界面的主题框架实现了,但是还没有完成最小化,关闭按钮等的功能,这次重新完善了QQ登录界面的功能,本次更 ...
- java做个简单的登录界面_java一个简单的登录界面制作
展开全部 import java.awt.EventQueue; import javax.swing.JFrame; import javax.swing.JPanel; import javax. ...
- 基于boostrap的登录注册界面制作（html+css）
这里写自定义目录标题 基于boostrap的登录界面制作 1. 安装bootstrap以及fontawesome环境 2. 表单设计 3. CSS样式 基于boostrap的登录界面制作 1. 安装b ...
- HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
- HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板...
科幻后台登录界面html模板 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
- 青柠起始页样式书写+清新风格登录界面——Html+Css+JavaScript
青柠起始页样式书写--Html+Css+JavaScript 效果展示 清新风格登录界面 首先是制作青柠其实起始页的html 构思一个结构 下面呈现代码 <!-- 作业专用html框架 --&g ...
- Myeclipse2017连接MySql数据库实现登录界面的制作（全过程）
毕业设计选题选的是B/S的系统,决定用Myeclipse+MySql来做,本人小白一枚,前段时间自学了java web的知识,目前已经做出来了登录功能及系统的主界面,接下来就是在主界面对数据库增删改查 ...
最新文章
- C++特化的应用——类型萃取
- int main(argc,*argv)中argc,argv的相关说明
- DuplicateHandle复制句柄保护文件
- 向web服务器传文件,c++实现向web服务器上传文件
- Linux开发板网线直连电脑配置方法
- stl向量_如何在C ++ STL中将数组元素复制到向量？
- qt5变成内部头文件 ubuntu_Ubuntu下Visual Studio Code软件的安装和使用
- 20155216 Exp6 信息搜集与漏洞扫描
- 最小二乘法拟合多项式原理以及c++实现
- jQuery 选择器简介
- JVM监控及诊断工具GUI篇之Visual VM
- UE5 C++教程（三、多人游戏网络基础）
- spring AOP的配置
- 象棋巫师魔法学校/象棋路边摊 前1050关
- 红帽RHCE考试下午-RHCE （RH294）任务概览[2021最新版]
- 社会生活——《哥哥又逃票了》
- 如何在Chrome浏览器中导入和导出密码
- android利用EpMedia给录像添加时间水印
- 支付宝支付接口遇到的问题总结
- 奇葩面试大赏：四年没见的前女友成了我的面试官