The use of client-side validation can effectively reduce the number of data to and from the server and the client, is conducive to improving the server's resource utilization, and can also give users intuitive, fast response. This is especially important in the Web 2.0 era, and I think you must be as annoying as I am with the basics of JavaScript writing annoying validation. Now the server side of the validation has a better framework to solve, asp.net mvc can do a good job, so for. NET development, have a good client-side framework for the development of efficiency plays a vital role.
We can get this JS frame from the following address
- Jquery
- JQuery Validation Framework
Let's start with a simple example of what we know about the JQuery Validation framework .
First, we need to add a reference to the two JS files above
Copy Code code as follows:
<title>untitled page</title>
<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "Jquery.validate.js" type= "Text/javascript" ></script>
Next, declare the following HTML segment
Copy Code code as follows:
<form id= "CustomerForm" runat= "Server" >
<div>
Name: <input type= "text" id= "FirstName" class= "required" name= "FirstName"/>
Last Name: <input type= "text" id= "LastName" class= "required" name= "LastName"/>
<input type= "Submit" value= "Register"/>
</div>
</form>
Through the above code, you will find that we have to each input is added class= "required" His role is in this inpute tag is empty, will prompt the user error.
Finally, we'll find an entry point for our framework, and usually we can put the next piece of code in the final HTML
Copy Code code as follows:
<script language= "javascript" type= "Text/javascript" >
$ (document). Ready (function ()
{
$ ("#customerForm"). Validate ();
});
</script>
Run to see how it works
Let's look at a larger example to create general validation for the ListBox control
We can add rules like this
Copy Code code as follows:
$ ("#customerForm"). Validate (
{
Rules
{
FirstName: {required:true},
LastName: {required:true},
Countries: {validatecountries:true}
},
Messages
{
FirstName: {required: "The Name is required"},
LastName: {required: "Last Name is required"},
Countries: {validatecountries: "Please select on 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 error
Copy Code code as follows:
$ ("#customerForm"). Validate (
{
Rules
{
FirstName: {required:true},
LastName: {required:true},
Countries: {validatecountries:true}
},
Messages
{
FirstName: {required: "The Name is required"},
LastName: {required: "Last Name is required"},
Countries: {validatecountries: "Please select on least 2 items from the Countries"}
},
Errorcontainer: "#errors",
Errorlabelcontainer: "#errors ul",
Wrapper: "Li"
});
Results see the following figure
Okay, no more. This article provides the source code to download its own research it's late.
Source code Download Http://xiazai.jb51.net/201010/yuanma/jQueryValidation_Demo_Download.rar
