css+js模拟用户注册和登录页面

制作一个注册页面用户名不能为空并且（6-20位英文字母数字下划线）
密码重复密码 6位以上英文字母数字下划线密码和重复密码必须一致
身份证号：旧身份证号为15位数字
新身份证号为18位数字，或17位数字，最末位为x或X
email正常的邮箱规则

用户注册：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>TzhangRong</title><script>function vali() {var pws1 = document.getElementById("name");var as = pws1.value;var pws2 = new RegExp(/^\w{6,20}$/);if (pws1 != null && pws2.test(as)) {alert("名字格式正确");} else {alert("名字格式错误");}var pass = document.getElementById("pwd");var reg = new RegExp(/^[a-zA-Z0-9_-]{6,16}$/);var reg1 = pass.value;if (reg.test(reg1)) {alert("密码正确");} else{alert("密码错误");return false;}var passAB=document.getElementById("pwd1");var reg2=new RegExp(/^[a-zA-Z0-9_-]{6,16}$/);var reg3=passAB.value;if (reg1==reg3){alert("密码验证成功");}else{alert("两次密码不一样");}var email=document.getElementById("email1");var reg=new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/);var em=email.value;if(reg.test(em)){alert("邮箱正确");}else{alert("邮箱错误");}var id6=document.getElementById("zid");var reg=new RegExp(/^\d{15}$|^(\d{18}|\d{17}[xX])$/);var email2=id6.value;if(reg.test(email2)){alert("id正确");}else{alert("id错误");}alert("恭喜您注册成功");}function open_win() {window.open("登录界面.html")}</script><style>#table-a{width: 400px;height: 420px;border: #ffd6d5 solid;background-color: #ffe3e3;position: relative;left: 500px;top: 70px;}#box{position: absolute;left: 90px;top: 100px;/*border: yellow solid;*/font-size: 20px;}#tit{position: absolute;left: 120px;top: 20px;}body{background-image: url("timg.jpg");background-size:100% ;width:1024px ;height:700px;}</style>
</head>
<body><div id="table-a">
<form id="from1" onsubmit="return vali()" method="get"><div id="tit"><h2>用户注册</h2></div><div id="box">用户名：<input type="text" id="name"><br>密码：<input type="password"  id="pwd"><br>确认密码：<input type="password" id="pwd1"><br>邮箱：<input type="text" id="email1"><br>身份证号：<input type="text" id="zid"><br>爱好：<input name="hobby" type="checkbox"value="1">吃吃<input value="2"type="checkbox" name="hobby">喝喝<br><input type=button value="登录" onclick="open_win()" /><input type="submit"/><br></div>
</div></tr>
</form>
</div>
</body>
</html>

登录界面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{/*background-image: url("u=1782042621,287065208&fm=26&gp=0.jpg");*/background-color: #ffd6d5;background-size:100% ;width:1024px ;height:700px;}#box{width: 400px;height: 450px;border: #fceaff solid;background-color: #fff6f6;position: relative;left: 500px;top: 50px;}.d2{position: absolute;left: 90px;top: 120px;/*border: yellow solid;*/font-size: 20px;}#d1{top: 60px;position: absolute;left: 160px;/*border:rebeccapurple solid;*/}#ti{position: absolute;left: 120px;top: 80px;}#t{position: absolute;left: 10px;top: 115px;}</style><script>function de() {var n=document.getElementById("name1");var name1=n.value;var reg=new RegExp(/^\w{6,20}$/);if (n!=null&&reg.test(name1)){alert("姓名正确");}else {alert("重新输入");}var n=document.getElementById("pwd");var pass=n.value;var reg1=new RegExp(/^[a-zA-Z0-9_-]{6,16}$/);if (n!=null&&reg1.test(pass)){alert("密码正确");}else {alert("密码错误");}if(name1==reg&&reg1==pass){alert("登陆成功");}}</script></head>
<body>
<div id="box"><form id="table_1" onsubmit="return de()"><div id="d1"> <h2 id="font1">欢迎登陆</h2></div><div class="d2"><h5>姓名：<input type="text" width="500" height="30" id="name1"></h5><h5>密码：<input type="text"width="50" height="30"  id="pwd"></h5><div id="ti"> <h2><input type="submit" value="登录" height="80" width="80"/></h2></div><div id="t">   <input type=button value="Open Window" onclick="open_win()" /> </div></div></form>
</div>
</body>
</html>

注册实现图：

登录实现：

css+js模拟用户注册和登录页面相关推荐

html + css +js:仿原神游戏登录页面（初步）
效果图: html: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
火影忍者网页设计html,html+css+js实现火影背景切换登录页面
1.效果图(代码往下滑) 2.html代码 3.css代码 *{ margin:0px; padding:0px; } /* *号是全部的都外边距和内边距都为0,而body只是主题的外边距和内边距都为 ...
vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
github效果在线预览仓库地址: https://github.com/zhongyoucong/vuejs/ vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入 ...
Node.js连接数据库实现注册、登录、判断注册
Node.js连接数据库实现注册,登录,在登录时检测账号是否进行注册. 准备工作创建文件夹此创建文件夹可以不是使用Vue-cli进行创建,只是简单创建文件夹便可. 使用npm进行mysql插件的安 ...
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面
使用H5+css3+js实现带验证码的登录页面发布时间:2020-10-28 19:51:18 来源:亿速云阅读:151 作者:Leah 本篇文章为大家展示了使用H5+css3+js实现带验证码的 ...
Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
使用JS的promise实现前端登录页面和后端的交互
使用JS的promise实现前端登录页面和后端的交互个人认为JS的promise的作用和ajax差不多,形式上也是相似,接下来一起来看看 1.布局一个简单的前端登录页面,不要求细致,能看就问题不大. ...
Flutter 一个优美的用户体验的登录页面抖动提示文本提示
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力 Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日 ...

css+js模拟用户注册和登录页面

用户注册：

登录界面：

css+js模拟用户注册和登录页面相关推荐

最新文章

热门文章

css+js模拟用户 注册和登录页面

用户注册：

登录界面：

css+js模拟用户 注册和登录页面相关推荐

最新文章

热门文章

css+js模拟用户注册和登录页面

css+js模拟用户注册和登录页面相关推荐