Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you how to realize the relevant knowledge of JS, CSS and HTML on the registration page. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

The code is as follows:

Registration page * {margin: 0px; padding: 0px; box-sizing: border-box;} body {background: url ("img/register_bg.png") no-repeat center; padding-top: 25px;} .rg _ layout {width: 900px; height: 500px Border: 8px solid # EEEEEE; background-color: white; / * Center div horizontally * / margin: auto;} .rg _ left {/ * border: 1px solid red;*/ float: left; margin: 15px;} .rg _ left > p:first-child {color:#FFD026 Font-size: 20px;} .rg _ left > p:last-child {color:#A6A6A6; font-size: 20px;} .rg _ center {float: left; / * border: 1px solid red;*/} .rg _ right {/ * border: 1px solid red * / float: right; margin: 15px;} .rg _ right > p:first-child {font-size: 15px;} .rg _ right p a {color:pink;} .TD _ left {width: 100px; text-align: right; height: 45px } .TD _ right {padding-left: 50px;} # username,#password,#email,#name,#tel,#birthday,#checkcode {width: 251px; height: 32px; border: 1px solid # A6A6A6; / * set border fillet * / border-radius: 5px; padding-left: 10px } # checkcode {width: 110px;} # img_check {height: 32px; vertical-align: middle;} # btn_sub {width: 150px; height: 40px; background-color: # FFD026; border: 1px solid # FFD026 } .error {color: red;} # td_sub {padding-left: 150px } / / implement account password form verification _ window.onload = function () {/ / bind onsubmit events to the form / / that is, clicking the registration button will verify whether the user name and password are correct document.getElementById ("form"). Onsubmit = function () {/ / call the user verification method checkUsername () / / call password verification method checkPassword (); return checkUsername () & & checkPassword () } / / bind the user name and password to the defocus event / / verify whether the user name and password are correct when out of focus / / Note that the method here does not have parentheses document.getElementById ("username"). Onblur = checkUsername; document.getElementById ("password"). Onblur = checkPassword } / / verify the user name function checkUsername () {/ / 1, get the value of the user name var username = document.getElementById ("username"). Value; / 2, define the regular expression var reg_username = / ^ w {6c12} $/ / / 3. Determine whether the value conforms to the regular rule var flag = reg_username.test (username); / / 4, prompt message var s_username = document.getElementById ("s_username"); if (flag) {/ / prompt the green check box susername [XSS _ name] = "

";} else {/ / indicates that the red user name is incorrect s _ username [XSS _ clean] =" incorrect user name format ";} return flag } / / verify password function checkPassword () {/ / 1, get the value of the user name var password = document.getElementById ("password"). Value; / 2, define the regular expression var reg_password = / ^ w {6c12} $/ / / 3. Determine whether the value conforms to the regular rule var flag = reg_password.test (password); / / 4, prompt message var s_password = document.getElementById ("s_password"); if (flag) {/ / prompt the green check box spassword [XSS _ clean] = "

";} else {/ / indicates that the red user name is incorrect s_ password [XSS _ clean] =" incorrect password format ";} return flag;}

New user registration

USER REGISTER

User name and password Email name Mobile phone number, gender, male and female. Date of birth verification code

Do you already have an account? Immediate login

Running effect:

These are all the contents of the article "how to register JS, CSS and HTML". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.