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

This article mainly introduces "how to use JS, CSS and HTML to achieve the registration page". In the daily operation, I believe many people have doubts about how to use JS, CSS and HTML to achieve the registration page. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use JS, CSS and HTML to realize the registration page". Next, please follow the editor to study!

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:

At this point, the study on "how to use JS, CSS and HTML to implement the registration page" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.