Home > Developer > JavaScript
Client verification can effectively reduce the number of data transfers between the server and the client, improve the resource utilization path of the server, and provide users with intuitive and fast responses. In the Web 2.0 era, this is especially important. I think everyone must hate using basic javascript to write annoying verification. Now there is a better framework for server-side verification, ASP. net mvc can do this well, so. for net development, having a good client rectification framework plays a vital role in improving development efficiency.
We can get this JS framework through the address below
Let's start with a simple example.JQuery Validation FrameworkYes
First, we need to add references to the above two JS files.
Copy codeThe Code is as follows:
<Head runat = "server">
<Title> Untitled Page </title>
<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. validate. js" type = "text/javascript"> </script>
</Head>
Next, declare the following HTML section
Copy codeThe Code is as follows:
<Form id = "customerForm" runat = "server">
<Div>
First 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, we will find that we add class = "required" to every input, which means that an error is prompted when the inpute label is empty.
Finally, we need to find a starting point for our framework. Generally, we can put the following code at the end of HTML.
Copy codeThe Code is as follows:
<Script language = "javascript" type = "text/javascript">
$ (Document). ready (function ()
{
$ ("# CustomerForm"). validate ();
});
</Script>
Run the command to see how it works
The following example shows how to create a regular verification for ListBox Control.
We can add rules in this way.
Copy codeThe 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 codeThe 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"
});
For more information, see
Okay, I'm not talking about it. It's very late to download the source code in this article.
Source code download http://xiazai.jb51.net/201010/yuanma/jQueryValidation_Demo_Download.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
