查看 | 历史 | 提交 | 提交对比
hjg
2024-10-30 8cf23534166c07e711aac2a25911ada317ba01f0
提交 | 用户 | 时间
58d006 1 <!DOCTYPE html>
A 2 <html>
3     <head>
4     <title>My Page</title>
5     <meta name="viewport" content="width=device-width, initial-scale=1">
6     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
7     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
8     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
9     <script src="../jquery.validate.js"></script>
10     <style>
11         label.error {
12                 color: red;
13                 font-size: 16px;
14                 font-weight: normal;
15                 line-height: 1.4;
16                 margin-top: 0.5em;
17                 width: 100%;
18                 float: none;
19         }
20
21         @media screen and (orientation: portrait){
22                 label.error { margin-left: 0; display: block; }
23         }
24
25         @media screen and (orientation: landscape){
26                 label.error { display: inline-block; margin-left: 22%; }
27         }
28
29         em { color: red; font-weight: bold; padding-right: .25em; }
30     </style>
31 </head>
32 <body>
33
34     <div id="page1" data-role="page">
35
36         <div data-role="header">
37             <h1>Welcome</h1>
38         </div>
39
40         <div data-role="content">
41             <form method="GET">
42                 <div data-role="fieldcontain">
43                     <label for="email">Email:</label>
44                     <input type="email" name="email" id="email" />
45                 </div>
46                 <div data-role="fieldcontain">
47                     <label for="password">Password:</label>
48                     <input type="password" name="password" id="password" />
49                 </div>
50                 <input data-role="submit" type="submit" value="Login" />
51             </form>
52         </div>
53
54     </div>
55
56     <script>
57         $('#page1').bind('pageinit', function(event) {
58             $('form').validate({
59                 rules: {
60                     email: {
61                         required: true
62                     },
63                     password: {
64                         required: true
65                     }
66                 }
67             });
68         });
69     </script>
70 </body>
71 </html>