Javascript learning note (12) initialization form and simple verification

In web development, users often need to enter some information and submit it to the database. In this case, forms are used. For the front-end, the good and bad form design directly affects the user experience.
In today's study notes, design a form first, and then improve the user experience step by step.
First look at the HTML code:
View sourceprint? 01 <form method = "post" action = "#" name = "register">

02 <p>

03 <label for = "user_name"> User name: </label>

04 <input type = "text" value = "Enter your username" name = "username" id = "user_name" class = "inputs"/> <span> * </ span>

05 </p>

06 <p>

07 <label for = "email"> email box: </label>

08 <input type = "text" value = "Enter your email address" name = "email" id = "email" class = "inputs"/> <span> * </ span>

09 </p>

10 <p>

11 <label for = "mobile_phone"> mobile phone number: </label>

12 <input type = "mobile_phone" value = "Enter your mobile phone number" name = "mobile phone number" id = "mobile_phone" class = "inputs"/> <span> * </ span>

13 </p>

14 <p>

15 <label for = "psw"> logon password: </label>

16 <input type = "password" value = "" name = "password" id = "psw" class = "inputs"/> <span> * </span>

17 </p>

18 <p>

19 <label for = "re_psw"> Confirm Password: </label>

20 <input type = "password" value = "" name = "password" id = "re_psw" class = "inputs"/> <span> * </span>

21 </p>

22 <p>

23 <input type = "submit" value = "register" class = "btn"/>

24 </p>

25 </form>

Let's first look at the "label" label in the Code. When the for Attribute Value in the labels label is the same as the id value in the input element, when we click the element name (text) on the foreground page, this element is triggered (focus and selected ). This is especially useful when the optional area of the form element is not large, such as single-choice buttons and multiple-choice buttons. the area to be clicked by the user is not large. If the label is set, when you directly click the element name, it is automatically selected. Therefore, it makes sense to set the label value.
However, this function is not supported by all browsers. It doesn't matter. We can use a simple js function labelFocus.
View sourceprint? 01 function labelFocus (){

02 var labels = document. getElementsByTagName ("label ");

03 for (var I = 0; I <labels. length; I ++ ){

04 var id = labels [I]. getAttribute ("");

05 var element = document. getElementById (id );

06 element. onclick = function (){

07 this. focus ();

08}

09}

10}

In the HTML code, we define a default value for each input element. This will guide you to enter the correct information. But it also causes a problem that the user needs to delete the default value defined by us and then fill in his or her own information. This is obviously a poor user experience. Here we can improve this. When the element gets the focus, the default value we define is automatically eliminated. If the focus is lost, if the user does not input anything, It is restored to the default value. See the resetFields () function we have defined.
View sourceprint? 01 function resetFields (){

02 var forms = document. forms;

03 for (var I = 0; I <forms. length; I ++ ){

04 for (var j = 0; j <forms [I]. elements. length; j ++ ){

05 var element = forms [I]. elements [j];

06 if (element. type = "submit") continue;

07 element. onfocus = function (){

08 if (this. value = this. defaultValue ){

09 this. value = "";

10}

11}

12 element. onblur = function (){

13 if (this. value = ""){

14 this. value = this. defaultValue;

15}

16}

17}

18}

19}

See example 1 of the complete code:
Show sourceview sourceprint? 001 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

002

004 <title> forms elements -- by zhangchen </title>

005 <style type = "text/css">

006/* -- common style --*/

007 *{

008 margin: 0;

009 padding: 0;

010}

011 body {

012 font-family: ver, verdana;

013 font-size: 12px;

014 background-color: # EFFFDF;

015}

016. container {

017 width: 960px;

018 margin: 0 auto;

019}

020. header {

021 height: 35px;

022 padding-top: 30px;

023