The main reasons are as follows:
1, Drag the control too troublesome , this is the Microsoft control common way, you want to use a control you have to drag from the toolbar to the page (of course you can not drag handwriting).
2. The validation object must be specified , and the validation control differs from other textbox,dropdownlist controls in that it verifies that the input of other controls is valid, so you must specify the object that you are validating.
3, affect the overall appearance of the page, like some management system will always require a large number of user input validation, so it may cause a page has dozens of validation controls seriously affect the original page of things, look very uncomfortable.
4,Ajax verification is inconvenient , now the system more and more focus on customer experience, so Ajax verification is necessary, but Microsoft's validation control does not provide Ajax verification (of course, you can also through the UpdatePanel of Microsoft), need to expand their own.
Said above so much, I just show that I mean, Microsoft's validation controls are not very good, so at this time I think there are no useful points of validation control?
There are 2 ways: 1, write your own one (considering your level is not so high, think or forget)
2, to find a perfect validation control (this is more reliable, after all, I can not do, others will still be able to do)
So according to my request: 1, do not drag the control
2, does not affect the page code
3. Simple AJAX Validation
To network search found 2 types of: 1, their own written asp.net validation control, although the encapsulation of more features but still can not meet my needs
2, JavaScript type of validation function library, this is more reliable, after all, JS can be separated from the page code (does not affect the page code), only need to call the function library in the validation code can be specified object validation (do not have to drag control), At the same time Ajax nature still depends on JavaScript to invoke (Ajax validation)
So I searched for the authentication libraries written using JavaScript based on the 2nd clue above-- Jquery.validate, this validation library is a jquery plug-in, written by Bassistance.de, and Bassistance.de also offers many other jquery plug-ins, such as Accordion,autocomplete (My use jquery.au Tocomplete complete The Imitation Taobao product search function (improved keyboard selection experience) is based on this AutoComplete written), tooltip and so on (specific can be viewed on their website).
Decide to use jquery.validate first download its JS plugin:
Enter http://bassistance.de/jquery-plugins/jquery-plugin-validation/select download Download, which contains a number of examples for us to learn
And then we started using it, building a basic web site, and building a master page (this is because there's a master page in a specific project that will have some common stuff, and this way, to simulate a real environment, create a master page, If you don't feel you need to create a page directly, you can then introduce jquery and jquery.validate to the master page:
<script src= ' <%= page.resolveclienturl ("~/scripts/jquery-1.4.1.js")%> ' type= ' Text/javascript ' ></ Script>
<script src= ' <%= page.resolveclienturl ("~/scripts/jquery.validate1.js")%> ' type= ' Text/javascript ' > </script>
Tip: Unlike a general reference, I'm here to take the path of the script using Page.resolveclienturl to get it, because in some project development, the code of different modules will be different directory to operate, and the master page is in the root of the site so in order to ensure that all the basic pages can be referenced, so the path needs to be retrieved ( But there's a downside to doing this. You can't dynamically add something to .
After you have referenced the basic required script, add the script to the master page to verify it.
Jquery.validate is the monitor form, before any action that submits the form, Jquery.validate will detect whether the entry in the form satisfies the rule and is satisfied before it is allowed to submit. So need
To authenticate the form when jquery (document). Ready () is registered
The specific code is as follows:
Copy Code code as follows:
<body>
<form id= "Form1" runat= "Server" >
<div>
<asp:contentplaceholder id= "ContentPlaceHolder1" runat= "Server" >
</asp:ContentPlaceHolder>
</div>
</form>
<script type= "Text/javascript" >
JQuery (document). Ready (function () {
JQuery ("#<%=form1.") ClientID%> "). Validate ();
});
</script>
</body>
There must be some doubt, why the Jquery.validate code written in the page <body>, this involves the validation of rule-making and group validation methods will be in the intermediate and advanced chapter.
After registering the verification monitoring we can start to write specific validation code, we build a child page through the master page, put a few basic input box code in the page as follows:
Copy Code code as follows:
<%@ Page title= "Employee information Management-primary authentication" language= "C #" masterpagefile= "~/masterpage.master" autoeventwireup= "true"
Codefile= "Base.aspx.cs" inherits= "_base"%>
<asp:content id= "Content1" contentplaceholderid= "Head" runat= "Server" >
</asp:Content>
<asp:content id= "Content2" contentplaceholderid= "ContentPlaceHolder1" runat= "Server" >
<table cellpadding= "1" cellspacing= "1" border= "1" width= "50%" align= "Center" >
<tr>
<td>
User name
</td>
<td>
<asp:textbox id= "Txtuid" runat= "Server" cssclass= "required" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:textbox id= "txtname" runat= "Server" cssclass= "required" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
Age
</td>
<td>
<asp:textbox id= "TextBox1" runat= "Server" cssclass= "number" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
Mailbox
</td>
<td>
<asp:textbox id= "TextBox2" runat= "server" cssclass= "email" ></asp:TextBox>
</td>
</tr>
<tr>
<TD colspan= "2" align= "Center" >
<asp:button id= "Button1" runat= "Server" text= "Submit"/>
</td>
</tr>
</table>
</asp:Content>
In the above code I have completed the user name, name, age, email verification, do not know what you found, is in each textbox in the class style, where required is required to fill in, number means must be digital, email said must be e-mail format, If written required email indicates that this field must be filled in and must be in the email format.
What do you think? is not quite simple, save the drag control, specify the validation control, such as verbose code, only a "style name" is done, Of course, Jquery.validate also provides a number of validation methods, such as date, range, maximum, Minimum, integer, value comparison, and other authentication methods, and you can also customize the verification method (of course, this kind of custom validation in the primary article will not be, please look forward to the intermediate level).
OK, let's click the Submit button to see the effect of the run:
Yes, the verification was successful, but there is a problem, how to prompt information is all in English?
We look at the next Jquery.validate source code, in line 236 there is a hint of the definition of the message, we can modify this side of the message changed to Chinese way, or customize a Chinese message jQuery.Validate.message_ Cn.js, and then use Jquery.extend to overwrite the message of Jquery.validate itself, the code is as follows:
Copy Code code as follows:
Define Chinese messages
var cnmsg = {
Required: "Required fields",
Remote: "Please fix this field",
Email: "Please enter the correct format email",
URL: "Please enter a valid URL",
Date: "Please enter a valid date",
Dateiso: "Please enter a valid date (ISO).",
Number: "Please enter legal numbers",
Digits: "Only integers can be entered",
CreditCard: "Please enter a valid credit card number",
Equalto: "Please enter the same value again",
Accept: "Please enter a string with a legal suffix name",
Maxlength:jQuery.format ("Please enter a string with a maximum length of {0}"),
Minlength:jQuery.format ("Please enter a string with a length of at least {0}"),
Rangelength:jQuery.format ("Please enter a string between {0} and {1}"),
Range:jQuery.format ("Please enter a value between {0} and {1}"),
Max:jQuery.format ("Please enter a value of max {0}"),
Min:jQuery.format ("Please enter a value of min {0}")
};
Jquery.extend (JQuery.validator.messages, cnmsg);
This simply refers to the JQuery.Validate.message_ in the master page. Cn.js will be able to replace the original English prompts, 2 ways is desirable, if you want to change the jquery.validate to fit their own validation control is to use the 1th way to directly change the source code, if you just want to use some basic features do not want to move the original source is the 2nd method.
Then we refreshed the next page, and sure enough, it all became Chinese. Look at the effect:
Note: This side of the error message style can be defined by itself, I modified the original style, plus a bug icon, more attractive, the style definition is as follows:
Copy Code code as follows:
<style type= "Text/css" >
/************jquery.validate Plug-in style start ********************/
Label.error
{
Background:url (images/error.png) no-repeat 0px 0px;
color:red;
padding-left:20px;
}
Input.error
{
border:dashed 1px red;
}
/************jquery.validate Plug-in style end ********************/
</style>
To this end, the use of jquery.validate for client-side validation of the primary article is finished, the specific code you can download the following source code to view, please look forward to the intermediate and advanced articles.
Ps:1, Jquery.validate.js for the official version of the code, and jquery.validate1.js for my revised version of the content in the intermediate and advanced articles I'll talk about.
2, Jquery.validate can only do client verification, and can not replace the server-side verification, for the system security, so the server side or to be validated.
Source code Download: Click here to download
Author: kyo-yo
