1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 *{ 9 font-family:Verdana; 10 font-size:96%; 11 } 12 label{ 13 width:10em; 14 float:left; 15 } 16 label.error{ 17 float:left; 18 color:red; 19 padding-left: 5em; 20 vertical-align: top; 21 } 22 p{ 23 clear:both; 24 } 25 .submit{ 26 margin-left: 12em; 27 } 28 em{ 29 font-weight: bold; 30 padding-right: 1em; 31 vertical-align: top; 32 } 33 </style> 34 <script src="jquery-1.11.1.min.js"></script> 35 <script src="jquery.validate.js"></script> 36 <script> 37 $(document).ready(function(){ 38 $('#commetForm').validate(); 39 }) 40 </script> 41 </head> 42 <body> 43 <form action="#" method='get' class="cmxform" id="commetForm"> 44 <fieldset> 45 <legend>使用jquery插件validate制作的表单验证案例</legend> 46 <p> 47 <label for="cusername">姓名</label><em>*</em> 48 <input id="cusername" name="username" size="25" class="required" minlength="2" > 49 </p> 50 <p> 51 <label for="cemil">电子邮件</label><em>*</em> 52 <input id="cemil" name="emil" size="25" class="required email" > 53 </p> 54 <p> 55 <label for="curl">网址</label><em>*</em> 56 <input id="curl" class="url" size="25"> 57 <p> 58 <label for="ccomment">你的评论</label><em>*</em> 59 <textarea name="" id="ccomment" cols="22" rows="10" class="required"></textarea> 60 </p> 61 <p> 62 <input class="submit" type="submit" value="提交"> 63 </p> 64 </fieldset> 65 </form> 66 67 </body> 68 </html>
效果图如下：
