The Jquery.validate big department that introduces on the net just introduces its API and usage, do not have a complete getting started an example, sometimes look half a day to know how to begin. So in order to quickly understand learning, I got a quick start example, although the use of knowledge is not much, write is not very good, but can quickly start.
The following is the source of reference (the following source code can be downloaded to this site is no longer available):
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>j2query.validate Quick Start Example </title>
<meta name= "keywords" content= ""/>
<meta name= "description" Content= Jquery.validate.js is a powerful form-verification plug-in, and here's a quick-start example that will showcase its rapid ease of use. "/>
<script src= "Jquery-1.8.0.min.js" type= "Text/javascript" ></script>
<script src= "Jquery.validate.min.js" type= "Text/javascript" ></script>
<style type= "Text/css" >
label.error{color:red;font-size:13px;}
</style>
<body>
<p> Information Entry </p>
<form action= "" Name= "Infos" id= "Infos" >
<p> User name: <input type= "text" name= "username"/></p>
<p> Work No.: <input type= "text" name= "Nums"/></p>
<p> Note: <input type= "text" name= "notes"/></p>
<p><input type= "Submit" Name= "Sub"/></p>
</form>
<script type= "Text/javascript" >
$ (function () {
$ (' #infos '). Validate ({
Debug:false,//false means do not automatically submit the form after validation passes
Onkeyup:false/////////////= Turn off key
rules:{//Validation rules
username:{
Required:true,//required fields
RANGELENGTH:[6,10]//length between 6-10
},
nums:{
Required:true,
Digits:true
},
NOTES: "Required"
},
messages:{//Custom error message, default to English, in addition to configuring here, you can configure it through a configuration file
username:{
Required: "User name must be filled in",
Rangelength: "Username must be 6-10 bits long"
},
nums:{
Required: "Work number must be filled out",
Digits: "The work number must be a number"
},
NOTES: "Notes Required"
},
Verify that by being able to do what you want to do here
Submithandler:function (form) {
Alert ("Validation passed");
}
});
});
</script>
</body>
The effect of the operation:
To make it clear to you on the project, we'll show you the. NET Example
New project, the project under the protection of JS directory, the main storage of jquery Plug-ins Jquery-1.4.2.min.js+jquery.validate.min.js as well as outside the chain Js,register.js
Images directory, a small icon that mainly holds the error message at the time of validation
CSS catalog, main store style file
First on the default page default.aspx
Introduction of JS and CSS in tags
1 <</span>link type= "text/css" href= "Css/css.css" rel= "stylesheet"/>
2 <</span>script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" ></</span>script>
3 <</span>script type= "Text/javascript" src= "Js/jquery.validate.min.js" ></</span>script>
4 <</span>script type= "Text/javascript" src= "Js/register.js" ></</span>script>
PS: Here is the following, is the jquery plugin in the verification plug-in before the reference, the wrong order may occur jquery invalid problem.
My page structure code is as follows:
View Code
Copy Code
1 <%@ Page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Regvalidator._default"% >
2
3 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
4
5 6 7 <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/>
8 <title>jqusery Learning Form Verification </title>
9 <link type= "Text/css" href= "Css/css.css" rel= "stylesheet"/>
<script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" ></script>
One <script type= "Text/javascript" src= "Js/jquery.validate.min.js" ></script>
<script type= "Text/javascript" src= "Js/register.js" ></script>
<body>
<form id= "Register_form" runat= "Server" >
<table border= "0" cellpadding= "0" cellspacing= "0" > <tr>
<th colspan= "2" >jqusery learning-form validation user registration </th>
</tr>
<tr>
<TD width= "25%" > Username:</td>
<td>
<asp:textbox id= "txtUserName" runat= "Server" cssclass= "Ipt_txt" ></asp:textbox><span ID= "MSG" > </span>
</td>
</tr>
<tr>
Num <td> Password:</td>
<td>
<asp:textbox id= "txtuserpwd" textmode= "Password" runat= "Server" cssclass= "Ipt_txt" ></asp:TextBox>
29
</td>
</tr>
<tr>
<td> Confirm Password:</td>
<td>
<asp:textbox id= "txtruserpwd" textmode= "Password" runat= "Server" cssclass= "Ipt_txt" ></asp:TextBox>
</td>
Panax Notoginseng </tr>
<tr>
<td> Address:</td>
<td>
<asp:textbox id= "txtaddress" runat= "Server" cssclass= "Ipt_txt" ></asp:TextBox>
</td>
</tr>
<tr>
<td> website:</td>
<td>
<asp:textbox id= "Txturl" runat= "Server" cssclass= "Ipt_txt" ></asp:TextBox>
</td>
</tr>
M <tr>
Wuyi <td> Telephone Number:</td>
<td>
<asp:textbox id= "Txtphone" runat= "Server" cssclass= "Ipt_txt" ></asp:TextBox>
</td>
</tr>
<tr>
<td> ZIP code:</td>
<td>
<asp:textbox id= "Txtzipcode" runat= "Server" cssclass= "Ipt_txt" ></asp:TextBox>
</td>
</tr>
<tr>
<td> e-mail address:</td>
<td>
<asp:textbox id= "Txtemail" runat= "Server" cssclass= "Ipt_txt" ></asp:TextBox>
</td>
</tr>
<tr>
<TD colspan= "2" >
<asp:button id= "Button1" runat= "Server" text= "registered" onclick= "Button1_Click"/></td>
</tr>
</table>
</form>
</body>
Copy Code
In the attached CSS file code:
View Code
Copy Code
1
2 body{text-align:center; margin:10px auto; font-size:12px;}
3 table{width:500px; text-align:center margin:0 auto; border-top:1px solid #B1C3D9; border-left:1px solid #B1C3D9;}
4 table TR th,table tr td{font-size:12px; border-bottom:1px solid #B1C3D9; border-right:1px solid #B1C3D9 line-height:30 px height:30px;}
5 Table TR th{background: #7F007F; color: #fff; font-size:14px;}
6 table tr td{padding-left:12px; text-align:left;}
7 Label.error
8 {
9 padding-left:12px;
Background:url (/images/error.png) no-repeat;
One color:red;
12}
Label.success{background:url (/images/succes.png) no-repeat;
ipt_txt{width:150px border:1px solid #B1C3D9; Background-color: #FBFBFB;}
Input.error{background-color: #FBE2E2}
Copy Code
Now the core of the JS code came, register.js file code:
View Code
Copy Code
1//Below is a custom method that is not in the Validate method
2//Determine whether two values are equal
3 JQuery.validator.addMethod ("Notequalto", function (value, element, param) {
4 return value!= $ (param). Val ();
5}, $.validator.format ("two times input cannot be the same!"));
6
7//Only digits can be entered
8 JQuery.validator.addMethod ("Isnum", function (value, Element) {
9 var RegExp =/^\d+$/;
Ten return Regexp.test (value);
One}, $.validator.format ("Only for Numbers!"));
12
13//Phone number verification
JQuery.validator.addMethod ("Istell", function (value, Element) {
var RegExp =/^ (\d{3}-(\d{8}) | ( \D{7}) $|^ (\d+) $|^ (\d{4}-(\d{7}) | ( \D{8}) $|^ (\d{7,8}) $/;
return regexp.test (value);
$.validator.format ("Incorrect phone number input!");
18
19
20//Page load call
$ (function () {
$ (' #register_form '). Validate ({
Rules: {
txtUserName: {
Required:true,
Maxlength:18,
Minlength:4,
Remote: {
Type: "Post",
URL: "Validator.asmx/checkuseravailable",
Data: {
Username:function () {
Return $ ("#txtUserName"). Val ()
34}
35},
DataType: "xml",
Notoginseng datafilter:function (dataxml) {
var result = $ (dataxml). Find ("Boolean"). Text ();
if (result = = "false")
return false;
Or else
The return is true;
43}
44}
45},
Txtuserpwd: {
Required:true,
Maxlength:18,
Minlength:6,
Notequalto: "#txtUserPwd"
51},
Txtruserpwd: {
Required:true,
Equalto: "#txtUserPwd"
55},
Txtaddress: {
Required:true,
Maxlength:50
59},
Txturl: {
Required:true,
Url:true
63},
Txtphone: {
Required:true,
Minlength:7,
Maxlength:13,
Istell:true
69},
Txtzipcode: {
Required:true,
Minlength:6,
Maxlength:6,
Isnum:true
75},
Txtemail: {
Required:true,
Email:true,
Maxlength:40
80}
81},
Messages: {
txtUserName: {
Required: "User name cannot be empty!" ",
MaxLength: "The longest is 18 characters!" ",
MinLength: "The shortest 4 characters!" ",
Remote: "The username is already occupied!" "
88},
Txtuserpwd: {
Required: "Password can not be empty!" ",
MaxLength: "The longest is 18 characters!" ",
MinLength: "The shortest 6 characters!" ",
Notequalto: "Username and password can not be the same!" "
94},
Txtruserpwd: {
Required: "Password can not be empty!" ",
Equalto: "Two times the input password is not the same!" "
98},
Txtaddress: {
Required: "Address can not be empty!" ",
MaxLength: "The longest 50 characters!" "
102},
Txturl: {
Required: "URL can not be empty!" ",
Address: "Please fill in the correct URL!" "
106},
Txtphone: {
108 Required: "The phone can't be empty!" ",
109 minlength: "At least 7 digits!" ",
MaxLength: "The longest 13 digits!" ",
Istell: "The phone format is not correct!" "
112},
113 Txtzipcode: {
114 Required: "ZIP code can not be empty!" ",
MinLength: "Zip code for 6 digits!" ",
116 maxlength: "ZIP code for 6 digits!" ",
117 Isnum: "Please enter a number!" "
118},
119 Txtemail: {
Required: "Mailbox can not be empty!" ",
121 Email: "The mailbox format is not correct!" ",
122 MaxLength: "The longest 40 characters!" "
123}
124},
Errorplacement:function (Error, Element) {
126 Error.appendto (Element.parent ());
127},
128 Submithandler:function (form) {
129 Form.submit ();
130},
131 Errorclass: "Error",
132//Focuscleanup:true,//validated elements get focus when removing error messages
Success:function (label) {
134 label.html ("<span style=\" color:green\ "> Fill in correctly!" </span> "). AddClass (" Success ");
135}
136});
137
138
139//All text boxes with the ". Ipt_txt" style plus effect, get the focus text box to turn into a yellowish
140 $ (". Ipt_txt"). focus (function () {
The $ (this). CSS ("Background-color", "#FFFFCC"). blur (function () {
$ (this). CSS ("Background-color", "#FBFBFB");
143});
144});
145});
Copy Code
There is also a Web service file Validator.asmx, which is used primarily for user name repeat checking, as follows:
View Code
Copy Code
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using Sys Tem. Web;
5 using System.Web.Services;
6
7 namespace Regvalidator
8 {
9///<summary>
///Validator Summary description
///</summary& Gt
[WebService (Namespace = "http://www.111cn.net/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
[System.ComponentModel.ToolboxItem (false)]
15//To allow the use of ASP.net AJAX to call this from script Web service, uncomment the downlink.
//[System.Web.Script.Services.ScriptService]
to public class Validator:System.Web.Services.WebService
{
[WebMethod]
public bool Checkuseravailable (string username)
{
-if (username = = ' Zwswood '
' return false;
}
' Else
' {
' return true;
}
'
'}
%}
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
