10天内免登陆
10 登陆
2023-09-14 09:07:54 时间
今天我给大家带来用原生js实现表单登陆的10天内免登陆
![](https://images2018.cnblogs.com/blog/1430556/201808/1430556-20180814150416102-1805943817.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单正则验证</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: #eee; } a{ text-decoration: none; } ul,ol{ list-style: none; } #Msg-form{ width: 700px; border: 1px solid #e5e5e5; border-radius: 10px; background: #44D0F6; margin: 0 auto; } #top{ width: 100%; height: 12px; padding: 10px 10px 20px 10px; border-bottom: 1px dashed #e4e4e4; } #top h3{ width: 12%; float: left; text-align: center; line-height: 30px; } #top span{ float: left; color: #FDA010; border: 1px solid #FDA010; font-size: 14px; line-height: 20px; padding: 2px 8px; } #top a{ float: right; text-align: center; color: #fff; background: #F95050; line-height: 20px; padding: 2px 8px; border-radius: 10px; font-size: 14px; } #box{ padding: 0px 20px ; overflow: hidden; } #box div{ margin: 30px; height: 21px; } #box div label{ float: left; font-size: 14px; text-align: right; } #box div span{ float: left; color: red; text-align: left; width: 30%; height: 21px; } #box div input{ float: left; border: 0; height: 21px; width: 200px; font-size: 10px; padding:2px 8px; background: #eee; border-radius: 5px; } em{ color: red; font-weight: 900; } #reset{ margin: 0 30px; } #last{ width: 500px; text-align: center; } </style> </head> <body> <form action="javascript:;" id="Msg-form"> <div id="top"> <h3>注册账号</h3> <span>*号为必填项!</span> <a href="#">反馈意见</a> </div> <div id="box"> <div id="login-Id"> <label for="Id">登录账号</label> <span>*</span> <input type="text" id="Id" placeholder="字母开头数字下划线组成" required> <em></em> </div> <div id="login-Name"> <label for="Name">你的昵称</label> <span></span> <input type="text" id="Name" placeholder="中英文皆可"> <em></em> </div> <div id="login-Email"> <label for="Email">你的邮箱</label> <span>*</span> <input type="text" id="Email" placeholder="格式:2438387860@qq.com" required> <em></em> </div> <div id="login-Password"> <label for="Password">设置密码</label> <span>*</span> <input type="password" id="Password" placeholder="英文字母/数字/特殊字符" required> <em></em> </div> <div id="login-CheckPassword"> <label for="CheckPassword">确认密码</label> <span>*</span> <input type="password" id="CheckPassword" required> <em></em> </div> <div id="login-CheckPassword"> <div id="left"></div> <div id="strong"></div> </div> <div id="last"> <input id="btn" type="submit" value="提交"> <input type="reset" id="reset"> </div> </div> <input id="day" type="checkbox"><label for="">10天内免登陆</label> </form> <script src="form.js"></script> </body> </html>
js如下:
function $(id){ return document.getElementById(id); } var oId = $('Id'); var sId = oId.value; var oMsg = $('Msg-form'); var oName = $('Name'); var oEmail = $('Email'); var oPassword = $('Password'); var oCheckPassword = $('CheckPassword'); var str = document.getElementsByTagName('em'); oMsg.onsubmit = function(){ // 账号判断 var sId = oId.value; var regId = /^[a-zA-Z0-9_]\w{4,15}$/; if(regId.test(sId)){ str[0].innerHTML = '√'; } else{ str[0].innerHTML = '×'; } // 判断中英文 var sName = oName.value; var regName = /^[\u2E80-\u9FFF]+$/; if(regName.test(sName)){ str[1].innerHTML = '√'; } else{ str[1].innerHTML = '×'; } // 判断邮箱 var sEmail = oEmail.value; var regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/; if(regEmail.test(sEmail)){ str[2].innerHTML = '√'; }else{ str[2].innerHTML = '×'; } // 判断密码 var sPassword = oPassword.value; var regPassword = /^[a-zA-Z0-9]\w{3,15}$/; if(regPassword.test(sPassword)){ str[3].innerHTML = '√'; }else{ str[3].innerHTML = '×'; } // 判断再次输入的密码是否和上一次一致 var sCheckPassword = oCheckPassword.value; if(sCheckPassword === sPassword){ str[4].innerHTML = '√'; }else{ str[4].innerHTML = '×'; } function setCookie(name,value,days,path){ days = days || 0; path = path || '/'; var oDate = new Date(); oDate.setDate(oDate.getDate() + days); document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + oDate + ';path=' + path; } var oDay = $('day'); if(oDay.checked){ setCookie('username',sId,10); setCookie('pwd',sPassword,10); } }
// 设置cookie
// 封装
相关文章
- paddlepaddle 10 支持任意维度数据的标签平滑LabelSmoothingCrossEntropyLoss实现
- 【BSP视频教程】STM32H7视频教程第10期:STM32H7的GPIO专题,非阻塞式驱动编程思想,按键FIFO,蜂鸣器驱动的新式玩法(2022-03-23)
- 我的这10年——从机械绘图 到 炼油 到 微软MVP 的华丽转身
- AI:2020年6月24日北京智源大会演讲分享之强化学习专题论坛 ——10: 40-11: 10 安波《竞争环境下的强化学习 》
- DayDayUp:2020年全球顶尖计算机科学家1000排名正式发布!恭喜两位华人学者步入全球Top 10!
- 这10个Python性能调优的小技巧,你知道几个?
- 干货!分享 10 个用于并行和分布式机器学习任务的Python框架
- 蓝的成长记——追逐DBA(10):飞刀防身,熟络而非专长:摆弄中间件Websphere
- OpenCV-Python学习(10)—— OpenCV 图像二值化处理(cv.threshold)
- FPGA 20个例程篇:10.遍历DDR3内存颗粒读写循环校验