JavaScript Form form submission and validation

Original website: 79119701

First, the properties of the form object:

Name: Gets the names of the forms, which are typically used for JS

Method: How the form is submitted (get: Unsafe, data volume is small, cannot upload attachments) (post: A relatively safe mass of data can upload attachments)

Action: A handler for form data is typically a PHP file

Enctype: How the form data is encoded (encrypted)

application/x-www-form-urlencoded default multipart/form-data can upload attachments

Second, find the object by name in the form:

To find an object by name, it must be the beginning of the document. Typically use name in forms, other tags with id <div> ID

To find an object by name, you must conform to the three-tier structure format: DOCUMENT.FORMOBJ.ELEMENTOBJ

Three, the event return value:

The return value of the event that affects the default action of the event

If the return value of the event is false, the default action is prevented from executing

If the return value of the event is true or empty, the default action executes

If the event does not have any return value, the default action executes

There are two affected events: OnClick, onsubmit

The return value of other events does not affect the default action

Example: <form name= "Form1" method= "Post" action= "login.php" onsubmit= "return Checkform ()" > </form> <!-- There must be "return" here, and the Checkform () function should have a return value true,false-->

Iv. four ways to submit a form:

<form name= "Form1" method= "Post" action= "login.php" onsubmit= "return Checkform ()" > </form> checkform () Need to return

<input type= "Submit" value= "Submission Form" onclick= "return Checkform ()"/> Checkform () requires return

<input type= "button" value= "Submit Form" onclick= "return Checkform ()"/> js: Checkform () {document.form1.submit ();} No return required

Instance code: Simple Validation of forms:

<! DOCTYPE html>/*User name*/ //Get Focus:triggered when the cursor is connected to a text boxfunction Onfocus_username () {/*GetId=result_usernamethe Element Object*/var Divobj=document.getelementbyid ("Result_username");/*write a hint message*/Divobj.innerhtml= "Please enter your user name:";    Divobj.style.color= "#ccc"; }//Lose Focus:triggered when the cursor leaves a text boxfunction Onblur_username () {/*GetName=usernameand theId=result_usernamethe Element Object*/var inputobj=document.form1.username; var Divobj=document.getelementbyid ("Result_username");/*User Name Verification*/if (document.form1.username.value= "") {divobj.innerhtml= "Sorry, user name cannot be empty";            Divobj.style.color= "Red";        return false; }else if (document.form1.username.value.length<5| |            DOCUMENT.FORM1.USERNAME.VALUE.LENGTH&GT;20) {divobj.innerhtml= ' username must be between 5-20 characters long;            Divobj.style.color= "Red";        return false;            }else{divobj.innerhtml= "OK";        return true; }    }/*User Password*/ //Get Focus:triggered when the cursor is connected to a text boxfunction Onfocus_userpwd () {/*Getid=result_userpwdthe Element Object*/var Divobj=document.getelementbyid ("Result_userpwd");/*write a hint message*/Divobj.innerhtml= "Please enter your password:";    Divobj.style.color= "#ccc"; }//Lose Focus:triggered when the cursor leaves a text boxfunction Onblur_userpwd () {/*Getname=userpwdand theid=result_userpwdthe Element Object*/var inputobj=document.form1.userpwd; var Divobj=document.getelementbyid ("Result_userpwd");/*User Password Verification*/if (document.form1.userpwd.value= "") {divobj.innerhtml= "Sorry, password cannot be empty";            Divobj.style.color= "Red";        return false; }else if (document.form1.userpwd.value.length<5| | DOCUMENT.FORM1.USERPWD.VALUE.LENGTH&GT;20) {divobj.innerhtml= ' password must be between 5-20 characters long!            ";            Divobj.style.color= "Red";        return false;            }else{divobj.innerhtml= "OK";        return true;        }} function Checkform () {var flag_username=onblur_username ();        var flag_userpwd=onblur_userpwd (); if (flag_username&&flag_userpwd) {/*Submit Form*/return true; }else{//block form submissionreturn false; }}</script></body>
JavaScript Form form submission and validation