使用jquery插件validate制作的表单验证案例

 

 

 

 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>

效果图如下：

posted @ 2017-12-08 08:59  前端极客  阅读(311)  评论(0)  编辑  收藏  举报