JavaScript with jquery for smooth front-end verification

When doing the front-end is generally used to use JavaScript simple validation of forms such as non-null validation and regular expression validation, so that the filtered data submitted to the server and then by a dedicated controller to do data processing, which can reduce the burden of servers, the following look at the simple steps of front-end verification:

Let's start with a simple form as an example:

1 <formAction= "query.php"name= "Form1"Method= "Get"Target= "_blank">2         <label>Please enter what you want to query:</label>3         <BR/>4         <BR/>5         <inputname= "Neirong"type= "text"class= "INPUT1" />6         <inputtype= "Submit"value= "Query"class= "Anniu"onclick= "return Yanzheng ()" />7 </form>

This form style is defined in class, this is no longer specific, the specific style

So in general, the script we use JavaScript to verify is as follows:

1 functionYanzheng ()2     {3         varshuju=Document.form1.neirong;4         if(shuju.value==0)5         {6Alert ("The content cannot be empty!") ");7 Shuju.focus (); Return focus to input box8             return false;9         }Ten}

This is a simple non-null validation, it is important to note that the JavaScript definition variable is to correspond to the name of the form form, the OnClick event of the Submit button and the method, if not null default returns True, the method does not have to write

This time if the content is empty submit the form, will pop up the prompt box, this is the traditional authentication method, below uses the jquery to implement a simple slide hint effect

First, to load the jquery library, precede the form with a sentence

<type= "Text/javascript"  src= "Jquery/jquery-1.11.1.min.js " ></ Script >

This library Google and Microsoft website can be downloaded to, Microsoft has not been wall, go to Microsoft Download it, there are many versions of the library, of course, can also directly reference, reduce their own server pressure, jQuery library link: http://www.asp.net/ajax/cdn#jQuery_ Releases_on_the_cdn_0

Then the form is placed in the appropriate position with a line of prompts, I put in the above form code, after the 5th line, it feels very appropriate, such as:

<style= "margin-left:360px; color: #09f; font-family: Microsoft Jas; margin-top:20px; display: none; " class = "Yanzhengtishi" > Please enter the content Oh! </ Div >

Style content can also be placed in the head or a separate style file, attention must be display:none; this sentence means that the div content is not displayed by default and written in class like this:

 1  .yanzhengtishi  {2   Margin-left : 360px ; 3  :  #09f ; 4   font-family :  Microsoft Jas Black ; 5   Margin-top : 20px ; 6   display : none ; 7 } 

<class= "Yanzhengtishi"> Please enter the content! </ Div >

Then add the jquery code and replace the JavaScript code just now:

1 functionYanzheng ()2     {3         varshuju=Document.form1.neirong;4         if(shuju.value==0)5         {6$ (document). Ready (function(){7$ (". Yanzhengtishi"). Slidedown ("slow"));8                 });9 Shuju.focus ();Ten             return false; One}Else{ A$ (document). Ready (function(){ -$ (". Yanzhengtishi"). Slideup ("slow")); -             }); the         } -}

Else clause content represents, if the content is not empty, then re-hide the hint, notice the content of the class to join the jquery location, overall is so simple, but I expressed some wordy, general changes like,

In fact, jquery can also achieve a lot of pure click events Very cool special effects, do not have to write their own logic can be achieved, this is really a very interesting library

JavaScript with jquery for smooth front-end verification