查看 | 历史 | 提交 | 提交对比
hjg
2024-10-30 8cf23534166c07e711aac2a25911ada317ba01f0
提交 | 用户 | 时间
58d006 1 <!DOCTYPE html>
A 2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
5 <title>Test for jQuery validate() plugin</title>
6
7 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
8
9 <script src="../lib/jquery.js" type="text/javascript"></script>
10 <script src="../lib/jquery.metadata.js" type="text/javascript"></script>
11 <script src="../jquery.validate.js" type="text/javascript"></script>
12
13 <style type="text/css">
14 .cmxform fieldset p.error label { color: red; }
15 div.container {
16     background-color: #eee;
17     border: 1px solid red;
18     margin: 5px;
19     padding: 5px;
20 }
21 div.container ol li {
22     list-style-type: disc;
23     margin-left: 20px;
24 }
25 div.container { display: none }
26 .container label.error {
27     display: inline;
28 }
29 form.cmxform { width: 30em; }
30 form.cmxform label.error {
31     display: block;
32     margin-left: 1em;
33     width: auto;
34 }
35 </style>
36
37 <script type="text/javascript">
38 // only for demo purposes
39 $.validator.setDefaults({
40     submitHandler: function() {
41         alert("submitted! (skipping validation for cancel button)");
42     }
43 });
44
45 $().ready(function() {
46     $("#form1").validate({
47         errorLabelContainer: $("#form1 div.error")
48     });
49     
50     var container = $('div.container');
51     // validate the form when it is submitted
52     var validator = $("#form2").validate({
53         errorContainer: container,
54         errorLabelContainer: $("ol", container),
55         wrapper: 'li',
56         meta: "validate"
57     });
58     
59     $(".cancel").click(function() {
60         validator.resetForm();
61     });
62 });
63 </script>
64
65 </head>
66 <body>
67
68 <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
69 <div id="main">
70
71 <form method="get" class="cmxform" id="form1" action="">
72     <fieldset>
73         <legend>Login Form</legend>
74         <p>
75             <label>Username</label>
76             <input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
77         </p>
78         <p>
79             <label>Password</label>
80             <input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" />
81         </p>
82         <div class="error">
83         </div>
84         <p>
85             <input class="submit" type="submit" value="Login"/>
86         </p>
87     </fieldset>
88 </form>
89
90 <!-- our error container -->
91 <div class="container">
92     <h4>There are serious errors in your form submission, please see below for details.</h4>
93     <ol>
94         <li><label for="email" class="error">Please enter your email address</label></li>
95         <li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li>
96         <li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li>
97         <li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li>
98         <li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li>
99     </ol>
100 </div>
101
102 <form class="cmxform" id="form2" method="get" action="">
103     <fieldset>
104         <legend>Validating a complete form</legend>
105         <p>
106             <label for="email">Email</label>
107             <input id="email" name="email" class="{validate:{required:true,email:true}}" />
108         </p>
109         <p>
110             <label for="agree">Favorite Color</label>
111             <select id="color" name="color" title="Please select your favorite color!" class="{validate:{required:true}}">
112                 <option></option>
113                 <option>Red</option>
114                 <option>Blue</option>
115                 <option>Yellow</option>
116             </select>
117         </p>
118         <p>
119             <label for="phone">Phone</label>
120             <input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
121         </p>
122         <p>
123             <label for="address">Address</label>
124             <input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" />
125         </p>
126         <p>
127             <label for="avatar">Avatar</label>
128             <input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" />
129         </p>
130         <p>
131             <label for="agree">Please agree to our policy</label>
132             <input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" />
133         </p>
134         <p>
135             <label for="cv">CV</label>
136             <input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" />
137         </p>
138         <p>
139             <input class="submit" type="submit" value="Submit"/>
140             <input class="cancel" type="submit" value="Cancel"/>
141         </p>
142     </fieldset>
143 </form>
144
145 <div class="container">
146     <h4>There are serious errors in your form submission, please see details above the form!</h4>
147 </div>
148
149 <a href="index.html">Back to main page</a>
150
151 </div>
152
153
154 </body>
155 </html>