jQuery Validation example code makes validation so easy_jquery

Using client-side verification can effectively reduce the number of data trips between the server and the client, which is beneficial to improving the resource utilization of the server, and can also give users an intuitive and fast response. In the Web 2.0 era, this is especially important. I think everyone must hate annoying verification written in basic javascript as much as I do. Nowadays, there are better frameworks for server-side verification. ASP.NET MVC can complete such work very well. Therefore, for .net development, having a good client-side maintenance framework plays an important role in improving development efficiency. vital role.

We can get this JS framework through the following address

• JQuery
  
• jQuery Validation Framework
  

Let us start our understanding of jQuery Validation Framework with a simple example

First, we need to add references to the above two JS files

Copy the code The code is as follows:

Next, declare the following HTML segment

Copy the code The code is as follows:

First Name:
Last Name:

Through the above code, you will find that we have added class="required" to each input Its function is to prompt the user for an error when the input tag is empty.
Finally we need to find an entry point for our framework. Usually, we can put the following code at the end of the HTML

Copy code The code is as follows:

Run it and see how it works

Look at a larger example below to create regular validation for a ListBox Control
We can add rules like this

Copy code The code is as follows:

$("#customerForm").validate(
{
rules:
{
FirstName: { required:true },
LastName : { required:true },
Countries: { validateCountries:true }
},
messages:
{
FirstName: { required: "First Name is required" },
LastName: { required: "Last Name is required" },
Countries: { validateCountries:"Please select at least 2 items from the Countries" }
},

});
// add the validate countries method
jQuery.validator.addMethod("validateCountries", function(value, element)
{
var noOfSelectedCountries = $("#Countries :selected").length;
if(noOfSelectedCountries < 2) return false;
return true;
});

Provide error information for errors

Copy code The code is as follows:

$("#customerForm").validate(
{
rules:
{
FirstName: { required:true },
LastName: { required:true } ,
Countries: { validateCountries:true }
},

messages:
{
FirstName: { required: "First Name is required" },
LastName: { required: "Last Name is required" },
Countries: { validateCountries:"Please select at least 2 items from the Countries" }
},

errorContainer:"#errors",
errorLabelContainer:"#errors ul",
wrapper:"li"

});

See the picture below for the effect

Okay, not much to say. This article provides source code download. Study it yourself. It’s very late. 🎜>