【web结课大作业】创建一个注册页面并引用正则表达式，点击注册按钮后可以弹窗显示刚刚注册输入的信息(表单传值)

这个代码有借鉴其它博主的部分，借鉴了别的博主的css样式和框架（嘻嘻算是站在巨人的肩膀上），内容自己改了七七八八。参考博文如下（这个原博文只能实现正则判断，没有表单传值功能）：

HTML——登录、注册页面的跳转_weixin_58811914的博客-CSDN博客_html注册成功跳转登录页面https://blog.csdn.net/weixin_58811914/article/details/117793576我做的修改主要是为了符合我们web老师的要求，例如，不少于6个元素（我添加了手机号码及手机号码的正则表达式部分）、修改了背景图、还有最麻烦的注册后弹窗显示刚刚注册时输入的信息部分（涉及表单传值）这个是我最大的修改部分。

Talk is cheap，show you the code！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>web结课作业注册页面</title><style>html{height: 100%;width: 100%;overflow: hidden;margin: 0;padding: 0;background: url(https://img0.baidu.com/it/u=937138868,3188563838&fm=26&fmt=auto) no-repeat 0px 0px;background-repeat: no-repeat;background-size: 100% 100%;-moz-background-size: 100% 100%;}body{display: flex;align-items: center;justify-content: center;height: 100%;}input{text-align: center;border:none; background-color: rgba(239, 248, 250, 0.1);border-bottom:1px solid rgb(80, 196, 241);width: 260px;}p{text-align: center;color:#000;}.R_register{margin-top: 30px;width: 600px;justify-content: center;align-items: center;text-align: center;height: 600px;background-color: rgba(246, 250, 250, 0.7);box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4);}#R_registerbtn {border-color: cornsilk;background-color: rgba(59, 194, 248, 0.6);color: aliceblue;border-style: hidden;border-radius: 15px;width: 190px;height: 31px;font-size: 16px;}color: black;text-align: center;}</style><script language="javascript">email.onchange = function(){var email = this.value;var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if(!reg.test(email)){alert("邮箱格式不正确，请重新输入！");return false;}}tel.onchange = function(){var tel = this.value;var reg= /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])d{8}$/;if(!reg.test(tel)){alert("手机号码格式不正确，请重新输入！");return false;}}user.onchange = function(){var user= this.value;var reg = /^\S{1,5}$/;if(!reg.test(user)){alert("用户名长度不能超过5位！");return false;}}pwd.onchange = function(){var pwd = this.value;var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;if(!reg.test(pwd)){alert("密码长度要大于6位，由数字和字母组成,请重新输入！");return false;}}function checkpassword() {var password = document.getElementById("R_pwd").value;var repassword = document.getElementById("R_repwd").value;if(password == repassword) {document.getElementById("tishi").innerHTML="<font color='green'>两次密码输入一致</font>";}else {document.getElementById("tishi").innerHTML="<font color='red'>两次输入密码不一致!</font>";} }function show(){var email = document.myform.email.value;alert("邮箱:"+email);var tel = document.myform.tel.value;alert("邮箱:"+tel);  var user = document.myform.user.value;alert("用户名:"+user);var sex;if(document.myform.sex[0].checked){sex=document.myform.sex[0].value;}else{sex=document.myform.sex[1].value;   }alert("性别:"+sex);  var password = document.myform.password.value;alert("密码:"+password);var Repassword = document.getElementById("R_repwd");if(email.value == "" || name.value ==""|| tel.value=="" || password.value =="") {            alert("邮箱、用户名、手机号码或密码不能为空！");            return false;            }  else if(Password.value == Repassword.value) {alert("注册成功！");}else{alert("注册信息有误！");}}</script>
</head>
<body><div class="R_register"><h3 style="color:#000;">立即注册</h3><br>
<form action="" method="post" name="myform"><p>邮箱</p><p><input type="text" name="email"></p><p >手机号码</p><p><input type="text" name="tel"></p><p >用户名</p><p><input type="text" name="user"></p><p> 性别</p><p><span>男</span><span><input style="width: auto;" type="radio" name="sex" value="男" checked></span><span>女</span><span><input style="width: auto;" type="radio" name="sex" value="女" ></span></p><p >密码</p><p><input type="password" placeholder="密码长度至少为6位且为数字和字母的组合" name="R_pwd"></p><p >确认密码</p><p><input type="password" placeholder="两次密码需一致" name="R_repwd" onkeyup="checkpassword()"></p><p><input type="button" id="R_registerbtn" value="注册" onClick="show()"></p></form></div></body>
</html>

运行结果如下：

这个代码只要不细心去测试，交作业用是没问题的，我感觉我的代码的确有的地方有问题，因为当时期末复习没时间去仔细雕琢这个代码，用了一天的时间自学了一点javaweb的内容然后修改了代码，使其能够表单传值，然后就草草交了作业，最后分数也还行，90多。欢迎大家发现问题并请大家指正，趁我还没完全忘记web所学.......

【web结课大作业】创建一个注册页面并引用正则表达式，点击注册按钮后可以弹窗显示刚刚注册输入的信息(表单传值)相关推荐

基于 Python 的开源Web开发框架django/哈工大学生成绩管理系统html实现/python结课大作业
python结课大作业 (一)django安装 (1)django是什么 (2)基于django的网站 (3)django的设计理念 (4)django安装 (二)数据库安装 (1)数据库(DataB ...
HTML网页设计结课大作业~仿凡客服装商城主页纯HTML模板源码(HTML+CSS+JS)
HTML网页设计结课作业~服装商城主页纯HTML模板源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多 ...
最优解matlab机械大作业,最速下降法求最优解西安电子科技大学matlab结课大作业...
07112016.最速下降法求最优解六. 结果评价本次测试分别从两组不同的初始搜索位置,两组不同 a,b,c,d 值出发, 两两比较可得结论:测试用例 abcd 为某些特定值时,不同初始搜索位置可 ...
matlab选修结课作业,MATLAB结课大作业.doc
雏蓄列旧愤环员凉箕毫陆一拥梧犯圆缴战倍奇濒倔晒窿必峙蚜逢骋斩吴郭潍韵巩恭烈甲政售翔少灰浸巩感焕拙嗜匆菌王爵挚辟血铱窿曹啥析躬斟烯琵砸噎猴版骨脾州棘甥育海熙问梯周打膝司规槽捉糠疏仲响愁刚条吸款得乌烩滚筑 ...
HTML5期末大作业：在线音乐娱乐网站设计——在线音乐网站模板(22页) HTML+CSS+JavaScript web结课音乐作业的源码线音乐网站毕业设计网页html
HTML5期末大作业:网站设计--在线音乐网站(22页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
《 Python程序设计项目案例》— 人脸识别考勤可视化分析系统签到打卡记录到Excel表格项目参考代码(课程设计、期末结课大作业、毕业设计)
声明本文仅在CSDN发布,其他均为盗版.请支持正版! 正版链接: https://blog.csdn.net/meenr/article/details/107348867 Python课程设计(程 ...
SDUc++课结课大作业：基于qt类库c++实现简单的音乐播放器
2021年11月的项目,版本一,功能简单,UI界面难看,代码架构拉跨,没有核心内容,技术含量低 2022年6月21日准备重构一下代码,让架构清晰一点,加点多线程和网络通信的内容,然后这次打算在visu ...
应用数据分析第二课第一次作业——创建一个数值范围为0~1，间隔为0.01的数组
1.创建一个数值范围为0~1,间隔为0.01的数组 2.创建100个服从正态分布的随机数 3.对创建的两个数组进行四则运算 4.对创建的随机数组进行简单的统计分析 import numpy as np ...
C++结课大作业——职工管理系统
这个项目分为头文件和CPP文件和一个.txt文件实现功能如图所示我一一列出来(头文件,cpp文件,txt文件) 按着这三个复制粘贴就可以用 boss.h #pragma once //普通员工头文 ...

【web结课大作业】创建一个注册页面并引用正则表达式，点击注册按钮后可以弹窗显示刚刚注册输入的信息(表单传值)

【web结课大作业】创建一个注册页面并引用正则表达式，点击注册按钮后可以弹窗显示刚刚注册输入的信息(表单传值)相关推荐

最新文章

热门文章