Shulou(Shulou.com)06/03 Report--

This article shows you how to understand the focus events in the JavaScript user login form, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the details of this article.

I. Preface

In Web project development, you often see focus events in the form validation feature. For example, the text box gains focus to change the color of the text box, the text box loses focus to verify that the content of the entered text box is correct, and so on. =

II. Project preparation

Development tool: HBuilderX

Browsers: Google Chrome browser

III. Project objectives

1. Master the use of focus events.

two。 Understand to gain focus and lose focus knowledge.

3. Learn to use encapsulated functions.

4. Project implementation HTML

Account: password: login and registration

In the above code, the id of div is box equivalent to a big box, and the id of div is img, form, and show are small boxes.

Id is img, mainly to place pictures.

Id for form is mainly to place the form, and there is also a div nested inside. Its id is btn, mainly to place login and registration buttons.

Id is show and is used to display prompts.

CSS3#box {margin-top: 20px; width: 800px; height: 400px; display: flex; text-align: center; flex-direction: column; justify-content: center;} # form {display: flex; flex-direction: column; justify-content: center;} # btn {display: flex; text-align: center; flex-direction: row; justify-content: center;} # user {margin-bottom: 10px } # btn_ok {margin-top: 10px; margin-right: 20px;} # show {margin-top: 10px; color: red;}

In the above code, # box represents the style of the large box. The width and height of 800px and 400px, respectively, indicate that the top margin is 20px, using elastic layout display: flex

The flex-direction attribute indicates the direction of the control principal axis, colum indicates the vertical direction, and row indicates the horizontal direction.

The justify-content attribute represents the alignment of the project on the spindle, and the center represents the middle.

The text-align attribute represents text alignment.

The margin-bottom attribute represents the bottom margin of the setting element.

The margin-right attribute represents the right margin of the setting element.

JavaScript

1. Get the object of the element operation

Function $(id) {return document.getElementById (id);}

In the above code, the $(id) function is used to get the element based on id.

The id parameter represents the custom id name of the tag element, for example, the id= "abc" of the a tag, and the object of the element can be obtained by calling the $('abc') function.

two。 Adds a loss of focus event to the specified element

Function addBlur (m) {m.onblur=function () {isEmpty (this);}}

In the above code, the method that specifies that the element adds a loss of focus is the onblur method. Call the isEmpty () function to determine whether the form is empty or not.

3. Verify that the specified element loses focus and whether its value value is empty

_ window.onload=function () {addBlur ($('user')); addBlur ($(' pwd'));}

In the above code, _ window.onload means that the page is triggered as soon as the page is loaded.

Verify that the value value of an element whose id is user and pass is empty if it loses focus.

4. Verify that the form is empty

Function isEmpty (m) {if (m) (m. Valueworthiness created recently) {$('show'). Style.display='block'; $(' show') [xss_clean] = 'your input cannot be empty!' ;} else {$('show'). Style.display='none';}}

In the above code, if the form content is empty, insert prompt content into the id show object.

5. Handle the login button event-determine whether the account and password are correct

$('btn_ok'). Onclick=function () {if (($(' user'). Value=='abc') & & ($('pwd') .value=='123')) {$(' show'). Style.display='block'; $('show') [xss_clean] =' login successful!' ;} else {$('show') .style.display='block'; $(' show') [xss_clean] = 'wrong account or password!' ;}}

In the above code, the login button event is handled to determine whether the account number and password input box content are abc, 123, respectively. If the account number and password are entered correctly or incorrectly, insert prompt content into the id as show object.

The effect image is as follows:

In JavaScript, we first get the object of the operation element, add a loss of focus event to the specified element, then verify that the specified element loses focus, whether its value value is empty, and whether the form is empty. Finally, the event of the login button is handled.

The above is how to understand the focus events in the JavaScript user login form. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow 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.