html+js实现注册页面及信息验证

一、代码

<!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>注册</title><style>html{height: 100%;width: 100%;overflow: hidden;margin: 0;padding: 0;background: url(background.png) 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{border:none; border-bottom:1px solid rgb(10, 10, 10);width: 300px;}p{text-align: center;color: rgb(116, 113, 113);}.register{margin-top: 50px;width: 600px;/*display: flex;*/justify-content: center;align-items: center;text-align: center;height: 600px;background-color: white;box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);}.d{margin-top: 50px;width: 300px;/*display: flex;*/justify-content: center;align-items: center;height: 600px;background-color: rgb(167, 150, 150);box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);}.register_button {border-color: cornsilk;background-color: rgba(243, 202, 20, 0.7);color: aliceblue;border-style: hidden;border-radius: 15px;width: 190px;height: 31px;font-size: 16px;}.login_button{border: 20px solid white;border-radius: 50%;color: rgb(167, 150, 150);;border-style: hidden;border-radius: 15px;width: 100px;height: 31px;font-size: 16px;}.title{color: white;text-align: center;}         </style><style type="text/css">input::-ms-input-placeholder{text-align: center;}input::-webkit-input-placeholder{text-align: center;}</style>
</head><body><div class="register"><h3>立即注册</h3><p >邮箱</p><p><input type="text" id="email"></p><p >用户名</p><p><input type="text" placeholder="用户名长度不能超过5位" id="username"></p><p> 性别</p><p ><span>男</span><span><input style="width: auto;" type="radio" name="sex" value="男" id="sex_man"></span><span>女</span><span><input style="width: auto;" type="radio" name="sex" value="女" id="sex_woman"></span></p><p >头像</p><p><input type="file" id="img"></p><p >密码</p><p><input type="password" placeholder="密码长度至少为6位，且为数字和字母的组合" id="password1"></p><p >确认密码</p><p><input type="password" placeholder="两次密码需一致" id="password2"></p><p><input type="button" class="register_button"  name="register" onclick="register_click()" value="注册"></input></p><!--<p><button class="register_button" onclick="" name="register" onclick="register_click()">注册</button></p>--></div><div class="d"><br><br><h3 class="title">已有账号？</h3><p style="color: white;">已有账号就登录吧，好久不见！</p><br><br><br><br><br><br><br><br><br><br><br><br><p><button class="login_button" onclick="login_click()">登录</button></p></div><script>var flag1=true;  //邮箱判断标识符var flag2=true;  //用户名判断标识符var flag3=true;  //密码判断标识符//判断邮箱格式是否正确email.onchange=function(){var email=this.value;var emailPattern=/^[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}$/;  //邮箱正则表达式if(!(emailPattern.test(email)) ){alert("邮箱格式不对！");flag1=false;}else{flag1=true;}}//判断用户名格式是否正确username.onchange=function(){var username=this.value;var usernamePattern = /^\S{1,5}$/;  //用户名正则表达式if(!usernamePattern.test(username) ){alert("用户名格式不对，不能超过五个字符！")flag2=false;}else{flag2=true;}}//判断密码格式是否正确password1.onchange=function(){var password1=this.value;var passwordPattern =  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;  //密码正则表达式if(!passwordPattern.test(password1)){alert("密码格式不对，长度至少为6位，且为数字和字母的组合");flag3=false;}else{flag3=true;}}//获取性别值function justify_sex(){var sex;if(document.getElementById("sex_man").checked){sex=document.getElementById("sex_man").value;}else if(document.getElementById("sex_woman").checked){sex=document.getElementById("sex_woman").value;}return sex;}//注册函数function register_click(){var username=document.getElementById("username").value;var password1=document.getElementById("password1").value;var password2=document.getElementById("password2").value;var email=document.getElementById("email").value;var sex=justify_sex();//localStory存储注册信息localStorage.setItem("username",username);localStorage.setItem("password",password1);localStorage.setItem("sex",sex);localStorage.setItem("email",email);//判断是否注册成功if (flag1 && flag2 && flag3 && password1!=''){if(password1==password2){alert("注册成功！");window.location.href="login.html";}else{alert("两次输入的密码不一样！");}}else{alert("信息格式不对，请输入正确的信息！")}}//登录函数function login_click(){window.location.href="login.html";}</script></body>
</html>

二、结果

背景图自己设置

html+js实现注册页面及信息验证相关推荐

2020使用html、js、正则表达式做一个前端注册表单信息验证
使用html.js.正则表达式做一个前端注册表单信息验证小小前端练手项目,主要运用正则表达式对用户名.密码.确认密码.电子邮箱.手机号码.生日.身份证号码的验证 1.用户名不正确(需由由英文字母和数 ...
使用js完成注册页面验证-注册有返回值的onsubmit事件函数
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>注册页 ...
【HTML、CSS、JS】注册页面实现（带验证码，密码强度验证，表格提交验证等）
由于是个刚学这方面的菜鸡,所以好多代码都是从各个大佬那儿粘贴复制过来的orz,边搬运边学习吧可以说是.以下为部分参考.图片字体我都在网上找的,没有商用应该不犯法吧quq 密码强度检测:https:// ...
JS完成注册页面的省市联动（JS内置对象全局函数，select标签操作）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
【JavaScript】案例1：使用JS完成注册页面校验
JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位验证邮箱符合规则,并且不能为空重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
【JS】制作注册页面
使用js制作注册页面,使用正则表达式验证该数据是否符合要求 <!DOCTYPE html> <html><head><meta charset="U ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
WordPress自定义登录和注册页面样式并且添加验证码
通过一番尝试和验证以及网络搜索,终于实现了WordPress默认的登录和注册界面的样式修改,下面把过程记录下来.笔者主要是通过在主题中添加WordPress的钩子来实现登录和注册界面的样式修改的.Wo ...
修改方维分享系统注册页面的标题
不知道方维购物分享系统为什么即使设置了网站名称后,在注册页面标题上依然带着方维分享系统,既然开源了,就大方点呗..... 去掉注册页面版权信息的方式为: 在你的网站跟目录下打开:public\ ...

html+js实现注册页面及信息验证

一、代码

二、结果

html+js实现注册页面及信息验证相关推荐

最新文章

热门文章