1 <!doctype html>
2 <html lang="zh">
3 <head>
4 <title>FORM表单验证</title>
5 <meta charset="UTF-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <link rel="stylesheet" href="../../statics/themes/default/lib/jquery-ui/jquery-ui-1.11.1.css" media="all" />
9 <link rel="stylesheet" href="../../statics/themes/default/lib/bootstrap/css/bootstrap-3.2.0.min.css" media="all" />
10 <link rel="stylesheet" href="../../statics/themes/default/melon/melon-theme-1.1.0.css" media="all" />
11 <!--[if lt IE 9]>
12 <script src="../../statics/scripts/lib/html5shiv-3.7.2.min.js"></script>
13 <script src="../../statics/scripts/lib/respond-1.4.2.min.js"></script>
14 <![endif]-->
15 <style type="text/css">
16
17 </style>
18 </head>
19 <body>
20 <div class="container">
21
22 <div class="row">
23
24 <form class="form-horizontal" id="signupForm" method="get" action="">
25 <div class="form-group">
26 <label for="code" class="col-xs-3">编码</label>
27 <div class="col-xs-9 form-field">
28 <input id="code" name="code" class="form-control" placeholder="编码"/>
29 <label class="form-hint">编码由3位类型字母+2位数字或字母+4位数字组成</label>
30 </div>
31 </div>
32
33 <div class="form-group">
34 <label for="name" class="col-xs-3">用户名</label>
35 <div class="col-xs-9 form-field">
36 <input id="name" name="name" class="form-control" placeholder="用户名"/>
37 <label class="form-hint">帐号由6到20位字符组成，只能包含数字、大小字母</label>
38 </div>
39 </div>
40
41 <div class="form-group">
42 <label for="password" class="col-xs-3">密码</label>
43 <div class="col-xs-9 form-field">
44 <input id="password" name="password" class="form-control" placeholder="密码"/>
45 <label class="form-hint">密码由6到20位字符组成</label>
46 </div>
47 </div>
48
49 <div class="form-group">
50 <label for="confirmPassword" class="col-xs-3">确认密码</label>
51 <div class="col-xs-9 form-field">
52 <input id="confirmPassword" name="confirmPassword" class="form-control" placeholder="密码"/>
53 </div>
54 </div>
55
56 <div class="form-group">
57 <label for="email" class="col-xs-3">电子邮箱</label>
58 <div class="col-xs-9 form-field">
59 <input id="email" name="email" class="form-control" placeholder="电子邮箱"/>
60 </div>
61 </div>
62
63 <div class="form-group">
64 <label for="url" class="col-xs-3">个人主页</label>
65 <div class="col-xs-9 form-field">
66 <input id="url" name="url" class="form-control" placeholder="个人主页"/>
67 </div>
68 </div>
69
70 <div class="form-group">
71 <label for="birthday" class="col-xs-3">出生日期</label>
72 <div class="col-xs-9 form-field">
73 <input id="birthday" name="birthday" class="form-control" placeholder="出生日期"/>
74 <label class="form-hint">日期格式：XXXX-XX-XX或XXXX/XX/XX</label>
75 </div>
76 </div>
77
78 <div class="form-group">
79 <label for="phoneNumber" class="col-xs-3">手机号码</label>
80 <div class="col-xs-9 form-field">
81 <input id="phoneNumber" name="phoneNumber" class="form-control" placeholder="手机号码"/>
82 </div>
83 </div>
84
85 <div class="form-group">
86 <label for="" class="col-xs-3">邮政编码</label>
87 <div class="col-xs-9 form-field">
88 <input id="zipCode" name="zipCode" class="form-control" placeholder="邮政编码"/>
89 </div>
90 </div>
91
92 <div class="form-group">
93 <div class="col-xs-9 col-xs-offset-3 form-buttons">
94 <button class="btn btn-primary">
95 保存
96 </button>
97 <button class="btn btn-default">
98 取消
99 </button>
100 </div>
101 </div>
102 </form>
103 </div>
104 </div>
105 <script src="../../statics/scripts/lib/jquery-1.11.1.min.js"></script>
106 <script src="../../statics/scripts/lib/bootstrap-3.2.0.min.js"></script>
107 <script src="../../statics/scripts/lib/jquery-ui-1.11.1.min.js"></script>
108 <script src="../../statics/scripts/widgets/jquery.validate-1.13.0.min.js"></script>
109 <script src="../../statics/scripts/widgets/jquery.validate.additional-1.13.0.js"></script>
110 <script src="../../statics/scripts/widgets/jquery.validate.messages_zh.js"></script>
111 <script src="../../statics/scripts/widgets/jquery.inputmask.bundle-3.1.8.min.js"></script>
112 <script type="text/javascript">
113
114 $(document).ready(function() {
115
116 $("#signupForm").validate({
117 rules:{
118 code:{
119 required:true,
120 maxlength:9
121 },
122 name:{
123 required:true,
124 },
125 password:{
126 required:true,
127 },
128 confirmPassword:{
129 required:true,
130 equalTo:'#password'
131 },
132 email:{
133 email:true,
134 maxlength:64
135 },
136 url:{
137 url:true
138 },
139 birthday:{
140 //date:true // 不支持IE6
141 dateISO:true // 格式2011-01-01,2012/01/02
142 },
143 phoneNumber:{
144 mobileNL:true
145 },
146 zipCode:{
147 isZipCode:true
148 }
149
150 },
151 messages:{
152 code:{
153 required:"请输入编码",
154 maxlength:$.validator.format("编码不能大于{0}位")
155 },
156 name:{
157 required:"请输入用户名"
158 },
159 password:{
160 required:"请输入密码"
161 },
162 confirmPassword:{
163 required:"请输入确认密码",
164 equalTo:"两次输入的密码不一致，请重新输入"
165 },
166 email:{
167 email:"请输入合法的email",
168 maxlength:$.validator.format("email的长度不得超过64位")
169 },
170 url:{
171 url:"请输入合法的url",
172 },
173 birthday:{
174 date:"请输入正确格式的日期"
175 }
176 }
177
178 });
179 //$("#name").rules("add", { required: true, messages: { required: "非空"} });
180 $.validator.addMethod("isZipCode", function(value, element) {
181 var tel = /^[0-9]{6}$/;
182 return this.optional(element) || (tel.test(value));
183 }, "请正确填写您的邮政编码");
184
185 });
186 </script>
187 </body>
188 </html>
浙公网安备 33010602011771号