How to realize easy login and registration page with JavaScript

Editor to share with you how to achieve JavaScript easy login registration page, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The details are as follows

Login login registration

Account number

Password

User name

Please enter a user name that begins with a letter of at least 4 digits

Password

Please enter a password of at least six digits

Mailbox

Please enter your email account * {margin: 0; padding: 0;} .error {color: red; font-size: 14px;} .cg {color: greenyellow; font-size: 14px;} body {background: # f3f3f3 } .control {width: 340px; background: white; position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%); border-radius: 5px;} .item {width: 340px; height: 60px; background: # eeeeee;} .item div {width: 167px Height: 60px; display: inline-block; color: black; font-size: 18px; text-align: center; line-height: 60px; cursor: pointer;} .content {width: 100%;} .content div {margin: 20px 30px; display: none; text-align: left } p {color: # 4a4a4a; margin-top: 30px; margin-bottom: 6px; font-size: 15px;} .content input [type= "text"], .content input [type= "password"] {width: 100%; height: 40px; border-radius: 3px; border: 1px solid # adadad; padding: 0 10px Box-sizing: border-box;} .content input [type= "submit"] {margin-top: 40px; width: 100%; height: 40px; border-radius: 5px; color: white; border: 1px solid # adadad; background: # 00dd60; cursor: pointer; letter-spacing: 4px; margin-bottom: 40px .active {background: white;} .item div:hover {background: # f6f6f6;} _ window.onload = function () {var item = document.querySelectorAll (".item"); var it = item [0] .querySelectorAll ("div") var content = document.querySelectorAll (".content"); var con = content [0] .querySelectorAll ("div") Var na1 = document.querySelectorAll ('[name= "use1"]') var na2 = document.querySelectorAll ('[name= "use2"]') var span1 = document.querySelectorAll ('.box2 span') var span2 = document.querySelectorAll (' .box1 span') var zc = document.querySelector ('[value= "registration"]') var dl = document.querySelector ('[value= "login"]') Console.log (span2) var userReg = / ^ [a-zA-Z] [a-zA-Z0-9] {3 a-zA-Z 9} $/ var telReg = / ^ [0-9a-zA-Z]. {4 a-zA-Z 14} $/ var emailReg = / (^ [a-zA-Z]\ w {5 a-zA-Z 17} @ (126163)\ .com | yeah\ .net) $) | (^ [1-9]\ d {4j 10} @ qq\ .com $) / for (let I = 0) I

< it.length; i++) { it[i].onclick = function () { for (let j = 0; j < it.length; j++) { it[j].className = ''; con[j].style.display = "none"; } this.className = "active"; it[i].index = i; con[i].style.display = "block"; } } var flag = false // 封装 function cf(trr, srnr, index, str, str1) { var a1 = trr.test(srnr) if (!a1) { index.className = 'error' index.innerText = str return true } else { index.className = 'cg' index.innerText = str1 return false } } // 正则验证 na1[0].oninput = () =>

Cf (userReg, na1 [0] .value, span1 [0],'x user name does not conform to specification', '√ passed authentication') na1 [1] .oninput = () = > cf (telReg, na1 [1] .value, span1 [1],'x password does not conform to specification', '√ pass authentication') na1 [2] .oninput = () = > cf (emailReg, na1 [2] .value, span1 [2] 'x mailbox writing does not conform to the standard' '√ passed verification') var arr= [] zc.onclick = () = > {flag = true if (na1 [0] .value = ='') {span1 [0] .className = 'error' return flag = false} else if (na1 [1] .value = ='') { Span1 [1] .className = 'error' return flag = false} else if (na1 [2] .value =''| | span1 [2] .className = = 'error') {span1 [2] .className =' error' return flag = false} else {if (flag & & na1 [2] ] .className! = 'error') {/ / for (let I = 0 I

< na1.length; i++) { // // arr[i]=arr.push(na1[i].) // console.log(arr[i]) // na1[i].value = '' // } alert('注册成功') } } } dl.onclick = function () { if (na1[0].value != na2[0].value || na1[0].value == '') { span2[0].className = 'error' span2[0].innerText = '用户名不一致' } else { span2[0].innerText = '' span2[0].className = '' } if (na1[1].value === '' || na1[1].value != na2[1].value) { span2[1].className = 'error' span2[1].innerText = '密码错误' } else { span2[1].innerText = '' span2[1].className = '' } if (flag) { alert('登录成功') } else if(na1[0].value != na2[0].value&& na1[1].value != na2[1].value) { alert('账号不存在') } } } 效果

The above is all the contents of the article "how to easily sign in and register on JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!