Implementing form validation using jquery Validate

First we download jquery and validate rack packs, and then develop.

DEMO.CSS file

@charset: "Utf-8";
* {
margin:0;
padding:0;
}
/*å¼ Å...¥å-ä½ "图æ‡*/
@font-face {font-family: "Iconfont";
Src:url (' Iconfont.eot '); /* ie9*/
Src:url (' Iconfont.eot #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */
URL (' iconfont.woff ') format (' Woff '),/* Chrome, Firefox */
URL (' Iconfont.ttf ') format (' TrueType '),/* Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/
URL (' iconfont.svg#iconfont ') format (' SVG '); /* IOS 4.1-* *
}
. iconfont {
font-family: "Iconfont"!important;
font-size:16px;
Font-style:normal;
-webkit-font-smoothing:antialiased;
-webkit-text-stroke-width:0.2px;
-moz-osx-font-smoothing:grayscale;
}
/*表å æ å¼è®¾ç½®*/
#demo {
Display:block;
width:600px;
min-height:300px;
Background: #fff;
box-shadow:0 4px 20px 0 #ddd;
margin:0 Auto;
margin-top:30px;
padding:20px;
font-size:16px;
font-family: ' 微软é›...é» ';
line-height:50px;
}
P. tip {
Display:inline-block;
width:100px;
margin-right:15px;
Text-align:right;
Float:left;
}
Input[type= "text"],input[type= "password"] {
Outline:none;
width:200px;
height:32px;
line-height:32px;
border:1px solid #eee;
Background: #fff;
border-radius:3px;
text-indent:15px;
font-size:16px;
font-family: ' 微软é›...é» ';
}
Input[type= "Radio"],input[type= "checkbox"]{
Display:inline-block;
Outline:none;
width:16px;
height:16px;
Float:left;
margin-top:17px;
margin-right:3px;
Cursor:pointer;
}
. radiospan,.checkboxspan {
Float:left;
Display:inline-block;
width:50px;
}
button {
Display:inline-block;
Border:none;
Outline:none;
width:200px;
height:40px;
border-radius:5px;
Background: #73d66e;
border:1px solid #96d293;
line-height:40px;
margin-left:115px;
font-size:16px;
Color: #fff;
Cursor:pointer;
}
/*è®¾ç½®é»˜è®¤çš "é" ™è¯¯æç¤ºçš "æ å¼*/
. prompot {
margin-left:115px;
max-width:485px;
Clear:both;
}
. false {
color:red;
}
. Right {
Color:green;
}
Input.false {
border:1px solid red;
}
Input.right {
border:1px solid Green;
}

Test.js file

/* Will default hints in culture start*/
Jquery.extend (JQuery.validator.messages, {
Required: "Required field",
Remote: "Please fix this field",
Email: "Please enter the correct format of e-mail",
URL: "Please enter a valid URL",
Date: "Please enter a valid date",
Dateiso: "Please enter a valid date (ISO).",
Number: "Please enter a valid digit",
Digits: "Can only enter integers",
CreditCard: "Please enter a valid credit card number",
Equalto: "Please enter the same value again",
Accept: "Please enter a string with a valid suffix name",
Maxlength:jQuery.validator.format ("Please enter a string with a maximum length of {0}"),
Minlength:jQuery.validator.format ("Please enter a string with a minimum length of {0}"),
Rangelength:jQuery.validator.format ("Please enter a string between {0} and {1}"),
Range:jQuery.validator.format ("Please enter a value between {0} and {1}"),
Max:jQuery.validator.format ("Please enter a value of {0} max"),
Min:jQuery.validator.format ("Please enter a value of minimum {0}")
});
/* Will default hints in culture end*/




/* Verify demo form start*/
$ (function () {
JQuery.validator.addMethod (' Tel ', function (value,element) {
var telmatch =/^1[0-9]{10}$/;
return this.optional (Element) | | (Telmatch.test (value));
}, ' Please enter the correct mobile number ');


$ (' #demo '). Validate ({
Errorelement: ' Span ',
Errorclass: ' false ',
Validclass: ' Right ',
Onfocusout:function (Element) {
$ (Element). valid ();
},
Errorplacement:function (error,element) {
Element.parent (). Next (). Append (Error);
},
Highlight:function (element, Errorclass, Validclass) {
$ (Element). Removeclass (' right '). AddClass (' false ');
$ (Element). Removeclass (' right '). AddClass (' false '). "Find (' I '). html (' & #xe606; ');
},
Success:function (span) {
Span.parent (). Removeclass (' false '). addclass (' right ');
Span.prev ('. Iconfont '). html (' & #xe607; ');
},
Rules: {
Username: {
Required:true
},
Password: {
Required:true,
Minlength:6,
Maxlength:16
},
Password2: {
Required:true,
Equalto: ' #password ',
Minlength:6,
Maxlength:16
},
Tel: {
Required:true,
Minlength:11,
Maxlength:11,
Digits:true
}

},
Messages: {
Username: {
Required: ' Please set a user name '
},
Password: {
Required: ' Please set a password ',
MinLength: ' Password length of not less than 8 characters ',
MaxLength: ' Password length is not greater than 16 characters '
},
Password2: {
Required: ' Please confirm password again ',
Equalto: ' Two input passwords are not the same ',
MinLength: ' Password length of not less than 8 characters ',
MaxLength: ' Password length is not greater than 16 characters '
},
Tel: {
Required: ' Please enter your usual mobile number ',
MinLength: ' Phone number is 11 bits long ',
MaxLength: ' Phone number is 11 bits long ',
Digits: ' Mobile phone number can only be entered by number '
}

}
});
})

test.html file

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Registration Form validation using jquery validate</title>
<link rel= "stylesheet" href= "Css/demo.css"/>
<script type= "Text/javascript" src= "Js/jquery-1.7.2.js" ></script>
<script type= "Text/javascript" src= "Js/validate-1.14.0.min.js" ></script>
<script type= "Text/javascript" src= "Js/test.js" ></script>
<body>
<form id= "Demo" autocomplete= "Off" >
<p>
<span class= "Tip" > User name:</span>
<input type= "text" name= "username" >
</p>
<p class= "Prompot" ><i class= "Iconfont" ></i></p>
<p>
<span class= "Tip" > Password:</span>
<input type= "password" name= "password" id= "password" >
</p>
<p class= "Prompot" ><i class= "Iconfont" ></i></p>
<p>
<span class= "Tip" > Confirm password:</span>
<input type= "Password" name= "Password2" >
</p>
<p class= "Prompot" ><i class= "Iconfont" ></i></p>
<p>
<span class= "Tip" > Mobile phone number:</span>
<input type= "Text" name= "Tel" class= "Tel" >
</p>
<p class= "Prompot" ><i class= "Iconfont" ></i></p>

<button> Confirmation </button>
</form>
</body>