Make sure that you have downloaded the latest version of
jqueryelement in http://code.google.com/p/zsharedcode/wiki/Download .
Use the directive to refer to the following namespaces:
| code is as follows |
copy code |
<%@ Register assembly=" zoyobar.shared.panzer.JQueryElement "
Namespace = "Zoyobar.shared.panzer.ui.jqueryui.plusin"
tagprefix= "Je"%>
<%@ Register assembly= " Zoyobar.shared.panzer.JQueryElement "
namespace=" Zoyobar.shared.panzer.web.jqueryui
tagprefix= "Je"%>< /pre> |
In addition to namespaces, you need to refer to the jQueryUI scripts and styles, http://code.goo Gle.com/p/zsharedcode/wiki/download The downloaded Compression pack contains a custom style jQueryUI, and if more styles are required, you can color= "#0066cc" in http:// Jqueryui.com/download Download:
| The code is as follows |
Copy Code |
<link type= "Text/css" rel= "stylesheet" href= "[Style path]/jquery-ui-1.8.15.custom.css"/>
<script type= "Text/javascript" src= [Script path]/jquery-1.6.2.min.js] ></script>
<script type= "Text/javascript" src= [Script path]/jquery-ui-1.8.15.custom.min.js] ></script>
<script type= "Text/javascript" src= [Script path]/jquery.ui.datepicker-zh-cn.js] ></script> |
Client-side validation
By simply introducing Validator's properties, you can get a general idea of how to do client-side validation:
DefaultValue represents the default value when the user does not enter a value, which can be set to a string, numeric value, etc., such as: ' ABC ', 100.
Target/equal represents a selector for a target/match target, such as: #pw, #pw2, unlike the Selector attribute, target and Equal do not need to add single quotes to the selector, and if Equal is not set, the value of two targets is not judged to be the same.
Tip represents the message when a rule is not met, except for Successtip, because Successtip represents the information when the validation succeeds, such as:
maxtip= "Maximum value cannot exceed".
Event indicates the occurrence of the start verification operation, which defaults to change.
Max/min If the data is a string, the maximum/minimum length of the string is represented, and the maximum/minimum value is represented if the data is a numeric value.
Name, which is set by the validation key, is generally not set.
Need Indicates whether the data is required and false by default.
Provider is a custom format conversion function.
Reg is a JavaScript regular expression that the data must conform to, for example:/^d+$/.
Showtip Indicates whether the prompt is displayed, and the default is true.
Type represents a data type, which can be a string, number, Boolean, or one of the date, if set to String, #, Boolean, which means that the data should be converted to a string, a numeric value, a Boolean value. If you need to determine that the minimum length of a string is greater than or equal to 1, you also need to set the
min= "1" to represent the judgment of the string by setting the
type= "string" . Setting the Type to date does not determine whether the data is a date, but instead attempts to convert the data into a date-formatted string in
Ajax , setting
reg= "$.panzer.reg.dateiso" If you need to determine whether the data is in date format. /c4>.
Set the Need property to True to restrict the target from being empty:
| The code is as follows |
Copy Code |
<input id= "Email" type= "text"/>
<je:validator id= "Vemail" runat= "Server" isvariable= "true"
target= "#email" need= "true"
needtip= ' <font color= "red" > Please fill in your email address </font> '
>
</je:Validator> |
Target is a #email that indicates that the Validator's validation target is a text box with an email id. Need set to True to indicate that the user must fill out the e-mail address. Needtip indicates that you can include HTML code when you do not have a prompt to fill out the e-mail address.
you can limit the length of a string by setting Max and Min, and we recommend that you set
type= "string"because if you do not set the data type and default values, then no input value defaults to ' 0 ' instead of ':
| The code is as follows |
Copy Code |
<input id= "password" type= "password"/>
<je:validator id= "Vpassword" runat= "Server" isvariable= "true" target= "#password"
Min= "4" mintip= ' <font color= "red" > Password length at least 4 bits </font> '
max= "maxtip= ' <font color=" red "> Password maximum 10 bits </font> ' >
</je:Validator> |
type= "string", because even if the default is ' 0 ', the length is still less than 4.
Similar to the limit string, setting Max and Min can also limit the size range of numeric values, and you need to set
type= "number":
| The code is as follows |
Copy Code |
<input id= "Age" type= "text"/>
<je:validator id= "Vage" runat= "Server" isvariable= "true" target= "#age"
Type= "number" typetip= ' <font color= "red" > Please fill in a digital </font> '
Min= "mintip=" can not be less than 10 years old "
max= "maxtip=" Are you still alive? >
</je:Validator> |
Verify email, url, date
You can use the Reg property to make validation more powerful, and you can use several regular expressions preset in
$.panzer.reg to determine the format of mailboxes:
| The code is as follows |
Copy Code |
<input id= "Email" type= "text"/>
<je:validator id= "Vemail" runat= "Server" isvariable= "true" target= "#email"
Reg= "$.panzer.reg.email" regtip= ' <font color= "red" > Please fill in a correct email address </font> ' >
</je:Validator> |
$.panzer.reg.email string of ' 2011-1-1 '.
Gets whether to validate the successful and transformed data
Use client Properties valid can get the target validation for a Validator control, and use value to get the data that the target contains:
| code is as follows |
copy code |
function Refresh (value, Tip, valid) {
if (vemail.__validator (' option ', ' valid ') &&am P
Vpassword.__validator (' option ', ' valid ') &&
vnickname.__validator (' option ', ' valid ') && Amp
Vage.__validator (' option ', ' valid '))
Cmdregister.button (' Enable ');
Else
Cmdregister.button (' Disable ');
The Vemail in
} |
Code is the ID of the Validator control, which requires setting the Isvariable property of Validator to T Rue, access the valid property of
validator to obtain the result of the last validation, and if true, indicates that the validation was successful.
The JavaScript function refresh is set to the Checked event for each Validator control, so that the refresh is invoked after the
Validator has been validated to determine whether the registration button is available.
The following is the code for the registration button, which calls the method Registerweibo, and the value of the parameter is obtained by the
validator Value property.
| The code is as follows |
Copy Code |
<je:button id= "Cmdregister" runat= "Server" isvariable= "true" label= "register" disabled= "true" >
<clickasync url= "Webservice.asmx" methodname= "Registerweibo"
function (data) {
alert (data);
}
">
<ParameterList>
<je:parameter name= "Email" type= "Expression"
Value= "Vemail.__validator" (' option ', ' value ')/>
<je:parameter name= "Password" type= "Expression"
Value= "Vpassword.__validator" (' option ', ' value ')/>
<je:parameter name= "nickname" Type= "Expression"
Value= "Vnickname.__validator" (' option ', ' value ')/>
<je:parameter name= "Age" type= "Expression"
Value= "Vage.__validator" (' option ', ' value ')/>
</ParameterList>
</ClickAsync>
</je:Button>
|
You can also setThe Parameter Type property is Selector, value is the selector to get the value of the text box, and with DataType to set the data type to be passed to the server, where the value attribute using the
validator can also reach To the same effect, because the type of value is the type that is set by the Validator type property.
In addition to the client, you can verify the legality of the content on the server side, such as verifying that the nickname is already registered on the server side:
| The code is as follows |
Copy Code |
<input id= "nickname" type= "text"/>
<je:validator id= "Vnickname" runat= "Server"
target= "#nickname"
>
<checkasync url= "Webservice.asmx" methodname= "Checknickname"
Success= "
function (PE, e) {
if (!e.valid && null!= e.tip) {
Pe.jquery.html (E.tip);
}
}
">
</CheckAsync>
</je:Validator> |
PassCheckasync can set the
Ajax operation settings at the time of validation, where the server-side Checknickname method is invoked. In the Success property, set the JavaScript function that handles the return result, and the parameter E contains Val UE, TIP, valid three attributes, representing the validated value, prompting the information, whether the validation is successful, and the jquery attribute of the parameter PE is represented.
The following is the server-side Checknickname method:
| code is as follows |
copy code |
[WebMethod]
[Scriptmethod]
Public sorteddictionary<string, Object> Checknickname ( String value)
{
this. Context.Response.Cache.SetNoStore ();
sorteddictionary<string, object> values = new sorteddictionary<string, object> (),
Values. ADD ("value", value);
values. ADD ("Tip", value = = "abc"?
"<font color=" Red ">abc this nickname has been registered, please change a bar </font>": null);
values. ADD ("valid", Value!= "abc");
return values;
} |
The method for server-side validation should have a parameter named value, the type of the parameter can be int, string, bool, and so on, and the method should return the following formatJSON:
| The code is as follows |
Copy Code |
{
"Value": < value,
"Tip": < hint,
"Valid": < Boolean value that indicates whether the success is true or false>
} |
The http://code.google.com/p/zsharedcode/wiki/Download page downloads the DLL or is the source code.
Welcome to Panzer Open Source project, http://zsharedcode.googlecode.com/, which contains Iebrowser control WebBrowser execute various JS and JQuery scripts as well as recording capabilities and jQueryUI asp.net control jqueryelement.
Instance Downloads
http://zsharedcode.googlecode.com/files/jqueryelementdemo.rar
