Head first JavaScript (v)

Each table input has a form object that can be used as a parameter, such as:

<input id = "ZipCode" name = "ZipCode" type = "Text"     ... onclick = "Showit (this.form)"/>...function Showit (theform) {    alert (theform["ZipCode"].value);}

This.form means that the form object of the table is passed into the function as a parameter, and the object is referenced by "ZipCode" in the Showit () function.

Onfocus,onblur/onchange

There are several dialog boxes that enter text information, the one that is being entered is onfocus, and onblur/onchange when you leave the current box and switch to the next box. Then the next input box changes to Onfocus.onchange and onblur is different from the current dialog box when the input changes will be triggered, and onblur just leave the current input box will be triggered.

It is often necessary to verify that some of the inputs are empty and give the user some hints:

<input id = "..." ... onblur = "validatenonempty (this);" />...function Validatenonempty (Inputfield) {    if (inputField.value.length = = 0) {//input content is empty        alert ("please Enter a value. ");        return false;    }    Return true;//returned value not used}

Using pop-up hints is not a user-friendly gesture, you can use a different method to give some text hints after the input box

<input id = "Phone" name = "Phone" type = "Text"     onblur = "Validatenonempty (this, document.getElementById (' Phone_he LP ')); " /><span id = "Phone_help" ></span>...function validatenonempty (Inputfield, helpText) {    if ( InputField.value.length = = 0) {        //the data is empty        if (helpText! = null)//make sure the text element exists.            helptext.innerhtml = "Please enter a value.";        return false;    }    else{        //the Data is valid        if (helpText! = null)            helptext.innerhtml = "";        return true;    }

The innerHTML property inside the HelpText can modify the content displayed on the <span> tab of the page.

The same method can be used to check the degree of input text to meet the requirements, as follows:

function validatelength (min, Max, Inputfield, helpText) {    if (inputField.value.length < min | |  InputField.value.length > Max) {        if (helpText! = null)            helptext.innerhtml = "Please enter a value" + min + "to" + Max + "in length";    return false;    }    else{        if (helpText! = null)            helptext.innerhtml = "";        return true;    }

Even after each input box has the prompt user to enter the format, but still cannot guarantee the user submits the time must enter the information which conforms to the request, therefore needs to check again when clicking the Submit button, for example:

<input type = "button" value = ... onclick = "PlaceOrder (this.form);" />...function PlaceOrder (form) {    if (validatelength (...) && validate && validate ...)        Form.submit ();    else{        Alert ("There is something wrong with the info.");    

Passing the parameter to the PlaceOrder function passes the this.form, which is the entire table object, because it is legal to check the contents of the entire table. The table can be submitted via the Form.submit () function after the check is valid.

Check the legitimacy of the input date: In the form of a date such as mm/dd/yyyy, or month/day/year, it is necessary to verify that 3 parts are numbers and that the number of digits meets the requirements. We need to use JS's regular expression here.

Pattern =/Expression/

JS's regular also need to set its pattern, the format for both sides with/expand, such as just match 5 number of regular:

Pattern =/^\d{5}$/

The regular expression in JS is represented by a RegExp object, and can be directly declared with a RegExp object, such as:

var regex =/^\d{5}$/;

The test () pattern inside the RegExp object can be used for matching, such as:

if (! Regex.test (Inputfield.value) ...

With the simple use of regular expressions, you can verify that the strings you have entered are correctly matched, such as:

function Validateregex (regex, Inputstr, HelpText, helpmessage) {if (!regex.test (INPUTSTR)) {//invalidif (helpText! =) NULL) helptext.innerhtml = Helpmessage;return false;} Else{if (HelpText! = null) HelpText = ""; return true;}}

The function here is to facilitate the reuse of functions, you can determine whether a given string matches and will give the error helpmessage, the following can call the Validateregex function to determine whether the date format is legitimate:

function Validatedate (Inputfield, HelpText) {if (!validatenonempty (Inputfield, HelpText))//input is an empty string return false; Return Validateregex (/^\d{2}\/\d{2}\/\d{4}$/, Inputfield.value,helptext, "Please enter a date such as 01/14/2000");}

Head first JavaScript (v)