Native JS Verification Concise Registration Login page _javascript tips

Order

A JS to verify the form of a concise registration login page, not to say directly on the map

Effect

Main documents

Complete code

1 sign_up.html Registration Form

<! DOCTYPE html>  

 2 log_in.html Login Form

<! DOCTYPE html>  

3 common_form.css form CSS styles

/* Reset STYLE * * * html, body, Div, span, applet, object, IFRAME, H1, H2, H3, H4, H5, H6, p, blockquote, Pre, A, ABBR, acronym, add Ress, big, cite, code, Del, DFN, EM, img, INS, KBD, Q, S, Samp, small, strike, strong, sub, SUP, TT, VAR, b, U, I, DL, DT , DD, OL, UL, Li, FieldSet, form, label, legend, table, Caption, Tbody, TFOOT, THEAD, tr, TH, TD, Article, aside, canvas, Details, embed, figure, figcaption, footer, Header, Hgroup, menu, nav, output, section, summary, time, mark, audio, video
 {margin:0;
 padding:0;
 border:0} body {font-family: "Microsoft Ya Black";
Background: #f4f4f4;
 }/*header*/. header-line {width:100%;
 height:4px;
Background: #0dbfdd;
 }/*content*/. content {width:28%;
 margin:70px Auto 0;
Text-align:center;
 }. Content-logo {width:80px;
height:80px;
 }. Content-title {margin:10px 0 25px 0;
 Font-size:2em;
 Color: #747474;
Font-weight:normal;
 }. content-form {width:100%;
 padding:36px 0 20px;
 border:1px solid #dedede;
 Text-align:center; BackgrounD: #fff;
 }. Content-form form div {margin-bottom:19px}. content-form form. User,. content-form form. password {width:77%;
 height:20px;
 padding:10px;
 Font-size:1em;
 border:1px solid #cccbcb;
 border-radius:7px;
letter-spacing:1px;
 }. Content-form form Input:focus {outline:none;
  -webkit-box-shadow:0 0 5px #0dbfdd;
box-shadow:0 0 5px #0dbfdd;
 }. content-form-signup {width:84%;
 margin:0 Auto;
 padding:10px;
 border:1px solid #cccbcb;
 border-radius:7px;
 Font-size:1em;
 Font-weight:bold;
 Color: #fff;
 Background: #0dbfdd;
Cursor:pointer;
 }. content-form-signup:hover {background: #0cb3d0;} content-form-signup:focus {outline:none;
border:1px solid #0cb3d0;
 }. content-login-description {margin-top:25px;
 line-height:1.63636364;
 Color: #747474;
Font-size:. 91666667rem;
 }. content-login-link {font-size:16px;
 Color: #0dbfdd;
Text-decoration:none;
 * * Input box without content will prompt/#remind_1, #remind_2 {width:76%;
 margin:0 Auto 2px; Text-align:lefT
 Font-size:. 2em;
Color: #f00;

 }

 4 common_form_test.js Register logon script

Global variables A and B, get the value value of the User box and Password box respectively var a = document.getElementsByTagName ("input") [0].value;

var B = document.getelementsbytagname ("input") [1].value; Validation value function oblur_1 () {if (!a) {//user box value is empty document.getElementById ("Remind_1") after the user box loses focus. InnerHTML = "Please enter the username!"
 ";
 document.getElementById ("Change_margin_1"). Style.marginbottom = 1 + "px";
 The else {//user box value value is not empty document.getElementById ("Remind_1"). InnerHTML = "";
 document.getElementById ("Change_margin_1"). Style.marginbottom = + "px"; }//Password box after losing focus Verify value function oblur_2 () {if (!b) {//Password box value is empty document.getElementById ("Remind_2"). InnerHTML = "Please lose Enter the password!
 ";
 document.getElementById ("Change_margin_2"). Style.marginbottom = 1 + "px";
 document.getElementById ("Change_margin_3"). Style.margintop = 2 + "px";
 else {//Password box value is not an empty document.getElementById ("Remind_2"). InnerHTML = "";
 document.getElementById ("Change_margin_2"). Style.marginbottom = + "px"; document.getElementById ("Change_margin_3"). Style.margintop = + "PX ";
 }//The user box has the hidden reminder function ofocus_1 () {document.getElementById ("remind_1") for focus. InnerHTML = "";
document.getElementById ("Change_margin_1"). Style.marginbottom = + "px";
 The//Password box gets the focus of the hidden reminder function ofocus_2 () {document.getElementById ("Remind_2"). InnerHTML = "";
 document.getElementById ("Change_margin_2"). Style.marginbottom = + "px";
document.getElementById ("Change_margin_3"). Style.margintop = + "px"; ///If the input box is empty, prevents the form from submitting the function submittest () {if (!a &&!b) {//user box value and password box value are null document.getElementById ("Re Mind_1 "). InnerHTML =" Please enter user name! "
 ";
 document.getElementById ("Change_margin_1"). Style.marginbottom = 1 + "px"; document.getElementById ("Remind_2"). InnerHTML = "Please enter the password!"
 ";
 document.getElementById ("Change_margin_2"). Style.marginbottom = 1 + "px";
 document.getElementById ("Change_margin_3"). Style.margintop = 2 + "px"; return false; Only returns a true form will submit} else if (!a) {//user box value is empty document.getElementById ("Remind_1"). InnerHTML = "Please enter the username!"
 "; Document.getelementbyiD ("change_margin_1"). Style.marginbottom = 1 + "px";
 return false; The else if (!b) {//Password box value is an empty document.getElementById ("Remind_2"). InnerHTML = "Please enter a password!"
 ";
 document.getElementById ("Change_margin_2"). Style.marginbottom = 1 + "px";
 document.getElementById ("Change_margin_3"). Style.margintop = 2 + "px";
 return false;

 }
}

5 Form_logo.png Logo Photos

Here, a simple Registration login page is complete, the following will continue to update, make it more powerful.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.