├── .gitignore
├── README.md
├── demo.html.url
├── demo
    ├── css
    │   ├── button.css
    │   ├── common.css
    │   ├── demo.css
    │   ├── form.css
    │   ├── reset.css
    │   └── validate.css
    ├── iconfont
    │   ├── demo.css
    │   ├── demo.html
    │   ├── iconfont.css
    │   ├── iconfont.eot
    │   ├── iconfont.svg
    │   ├── iconfont.ttf
    │   └── iconfont.woff
    ├── images
    │   └── select_arrow.png
    ├── jq-validate.html
    ├── js
    │   ├── jquery-mvalidate.js
    │   └── zepto-mvalidate.js
    ├── libs
    │   └── zepto.all.js
    ├── php
    │   ├── captcha.php
    │   ├── captchaAjax1.php
    │   ├── captchaAjax2.php
    │   ├── form.php
    │   └── phoneCode.php
    ├── valid-phonecode.html
    ├── validate-captcha1.html
    ├── validate-captcha2.html
    └── zepto-validate.html
├── dist
    ├── css
    │   └── validate.css
    └── js
    │   ├── jquery-mvalidate.js
    │   └── zepto-mvalidate.js
├── gruntfile.js
├── package.json
└── src
    ├── css
        └── validate.css
    └── js
        ├── jquery-mvalidate.js
        └── zepto-mvalidate.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | .git


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # mobileValidate
 2 | mobileValidate是一款针对移动端的表单验证控件，充分考虑到移动端屏幕和空间大小的情况下,它提供了两种表单的验证提示方式，基本满足日常表单的验证需求！<a href="http://wnworld.com/mobilevalidate" target="_blank">查看demo<a/>
 3 | 
 4 | ##      	目录
 5 | 
 6 | *	[特性](#特性)
 7 | *	[调用方式](#调用方式)
 8 | *	[参数](#参数)
 9 | *	[拓展方法](#拓展方法)
10 | 
11 | ##	特性
12 | 
13 | 1.	通过 data-* 的方式来来决定表单是否需要验证,验证类型
14 | 2.	通过 mvalidateExtend 方法提供自定义拓展验证方式
15 | 3.	不同于其他的表单验证,该控件在用户初次输入的时候(keyup事件)是不进行验证的，这样的方式更符合用户的使用习惯
16 | 
17 | ##	调用方式
18 | <pre>
19 | $(form).mvalidate({
20 |     type:1,
21 |     validateInSubmit:true
22 | })
23 | </pre>
24 | 
25 | ##	参数
26 | 参数 | 类型 | 描述 | 默认值
27 | ------------ | ------------- | ------------ | ------------
28 | type | Number | 验证类型,类型1：弹出提示信息，类型2：未通过验证的表单下面显示提示文字 | 1
29 | validateInSubmit | Boolean | 点击"提交"按钮的时候是否要对表单进行验证 | true
30 | sendForm | Boolean | 表单通过验证的时候，是否需要提交表单 | true
31 | onKeyup | Boolean | 输入放开键盘的时候,是否需要验证 | false
32 | firstInvalidFocus | Boolean | 未通过验证的第一个表单元素，是否要获取焦点 | true
33 | conditional | Object | 输入域通过data-conditional="name"对应到conditional中属性等于name的函数 | {}
34 | descriptions | Object | 输入域通过data-descriptions="name"对应到descriptions中属性名等于name的函数 | {}
35 | eachField | Function | 输入域在执行验证之前触发该函数| {}
36 | eachInvalidField | Function | 所有未通过验证的表单输入域触发该函数 | $.noop
37 | eachValidField | Function | 所有的通过验证的表单输入域触发该函数 | $.noop
38 | valid | Function | 点击“提交”按钮的时候，若表单通过验证，就触发该函数！ | $.noop
39 | invalid | Function | 点击“提交”按钮的时候，若表单未通过验证，就触发该函数！ | $.noop
40 | 
41 | ##	拓展方法
42 | 方法| 描述 
43 | ------------ | -------------
44 | $.mvalidateExtend | 该方法用来拓展一些输入域的验证,例如:data-validate="phone"
45 | <pre>
46 | $.mvalidateExtend({
47 |     phone:{
48 |         required : true,   
49 |         pattern : /^0?1[3|4|5|8][0-9]\d{8}$/,
50 |         each:function(){
51 |            
52 |         },
53 |         descriptions:{
54 |             required : '必填字段',
55 |             pattern : '请您输入正确的格式'
56 |         }
57 |     }
58 | });
59 | </pre>
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 


--------------------------------------------------------------------------------
/demo.html.url:
--------------------------------------------------------------------------------
1 | [{000214A0-0000-0000-C000-000000000046}]
2 | Prop3=19,2
3 | [InternetShortcut]
4 | IDList=
5 | URL=http://wnworld.com/mobilevalidate
6 | 


--------------------------------------------------------------------------------
/demo/css/button.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * -webkit-user-select:禁止选中复制;
  3 |  * touch-action：移除特定元素或整个文档的触发延迟
  4 |  */
  5 | .zbtn {
  6 |   display: inline-block;
  7 |   padding: 6px 12px;
  8 |   margin-bottom: 0;
  9 |   font-size: 14px;
 10 |   font-weight: normal;
 11 |   line-height: 1.42857143;
 12 |   text-align: center;
 13 |   white-space: nowrap;
 14 |   vertical-align: middle;
 15 |   -ms-touch-action: manipulation;
 16 |       touch-action: manipulation;
 17 |   cursor: pointer;
 18 |   -webkit-user-select: none;
 19 |      -moz-user-select: none;
 20 |       -ms-user-select: none;
 21 |           user-select: none;
 22 |   background-image: none;
 23 |   border: 1px solid transparent;
 24 |   border-radius: 4px;
 25 | }
 26 | 
 27 | /**
 28 |  * 注意button的状态：选中active focus blur
 29 |  * 
 30 |  * .zbtn:focus 给有foucs的html标签是用
 31 |  * :focus 有<button>,<input>,<select>
 32 |  * 它们在focus的时候会添加.focus class
 33 |  * 它们在data-parter的情况下会添加active
 34 |  * 正常元素都会有：:active,ie7不支持这个属性
 35 |  */
 36 | 
 37 | .zbtn.active
 38 |  {
 39 |   outline: thin dotted;
 40 |   outline: 0px auto -webkit-focus-ring-color;
 41 |   outline-offset: -2px;
 42 | }
 43 | .zbtn:active,
 44 | .zbtn.active {
 45 |   background-image: none;
 46 |   outline: 0;
 47 |   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
 48 |           box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
 49 | }
 50 | /**
 51 |  * zbtn[disabled] 是表单选择器 拥有选择 disabled="disabled" 类型
 52 |  * 
 53 |  * fieldset[disabled] .zbtn 考虑删除
 54 |  */
 55 | .zbtn.disabled{
 56 |   pointer-events: none;
 57 |   cursor: not-allowed;
 58 |   filter: alpha(opacity=65);
 59 |   -webkit-box-shadow: none;
 60 |           box-shadow: none;
 61 |   opacity: .65;
 62 | }
 63 | /**
 64 |  *按钮的大小
 65 |  */
 66 | .zbtn-full{
 67 |   display: block;
 68 |   width: 100%;
 69 |   padding-left: 0 !important;
 70 |   padding-right: 0 !important;
 71 | }
 72 | .zbtn-lg{
 73 |   padding: 9px 16px;
 74 |   font-size: 18px;
 75 |   line-height: 1.3333333;
 76 |   border-radius: 6px;
 77 | }
 78 | 
 79 | [data-roler="button"] > .zbtn input[type="radio"],
 80 | [data-roler="button"] > .zbtn input[type="radio"],
 81 | [data-roler="button"] > .zbtn input[type="checkbox"],
 82 | [data-roler="button"] > .zbtn input[type="checkbox"] {
 83 |   position: absolute;
 84 |   clip: rect(0, 0, 0, 0);
 85 |   pointer-events: none;
 86 | }
 87 | /**
 88 |  *默认按钮
 89 |  */
 90 | 
 91 | 
 92 | /**
 93 |  *主按钮
 94 | */
 95 | .zbtn-primary{
 96 |   color: #fff;
 97 |   background-color: #337ab7;
 98 |   border-color: #2e6da4;
 99 | }
100 | .zbtn-primary:not(label):hover,
101 | .zbtn-primary.active{
102 |   color: #fff;
103 |   background-color: #286090;
104 |   border-color: #204d74;
105 | }
106 | .zbtn-primary.active{
107 |   background-image: none;
108 | }
109 | .zbtn-primary.disabled,
110 | .zbtn-primary.disabled.active{
111 |   background-color: #337ab7;
112 |   border-color: #2e6da4;
113 | }
114 | /**
115 |  * buttonset button->checkbox button->raido
116 |  * @type {[type]}
117 |  */
118 | .zbtn-group:after{
119 |     content:"";
120 |     display:table;
121 |     clear:both
122 | }
123 | .zbtn-group > .zbtn{
124 |   position: relative;
125 |   border-radius: 0px;
126 |   float: left;
127 |   border:none;
128 | }
129 | .zbtn-group > .zbtn:first-child:not(:last-child){
130 |   border-top-left-radius: 4px;
131 |   border-bottom-left-radius: 4px;
132 | }
133 | .zbtn-group > .zbtn:last-child:not(:first-child){
134 |   border-top-right-radius: 4px;
135 |   border-bottom-right-radius: 4px;
136 | }
137 | 
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 
144 | 
145 | 


--------------------------------------------------------------------------------
/demo/css/common.css:
--------------------------------------------------------------------------------
  1 | .fl{
  2 | 	float: left;
  3 | }
  4 | .clearboth{
  5 | 	clear: both;
  6 | }
  7 | .line-form{
  8 | 	line-height: 44px;
  9 | 	height: 44px;
 10 | 	display: inline-block;
 11 | 	vertical-align:top
 12 | }
 13 | /**
 14 |  * iconfont的设置
 15 |  */
 16 | .zicon, [class^=zicon-]{
 17 |   font-family:"iconfont" !important;
 18 |   font-size:24px;
 19 |   line-height:1;
 20 |   font-style:normal;
 21 |   -webkit-font-smoothing: antialiased;
 22 |   -webkit-text-stroke-width: 0.2px;
 23 |   -moz-osx-font-smoothing: grayscale;
 24 | }
 25 | /**
 26 |  * pad端只显示640的最大宽度
 27 |  */
 28 | .zui-container{
 29 | 	width: 100%;
 30 | 	max-width: 640px;
 31 | 	margin:0 auto;
 32 | }
 33 | /**
 34 |  * 边距
 35 | */
 36 | .zui-pt5{
 37 | 	padding-top: 5px;
 38 | }
 39 | .zui-pt10{
 40 | 	padding-top: 10px;
 41 | }
 42 | .zui-pr5{
 43 | 	padding-right: 5px;
 44 | }
 45 | .zui-pr10{
 46 | 	padding-right: 10px;
 47 | }
 48 | .zui-pb5{
 49 | 	padding-bottom: 5px;
 50 | }
 51 | .zui-pb10{
 52 | 	padding-bottom: 10px;
 53 | }
 54 | .zui-pl5{
 55 | 	padding-left: 5px;
 56 | }
 57 | .zui-pl10{
 58 | 	padding-left: 10px;
 59 | }
 60 | .zui-mt5{
 61 | 	margin-top: 5px;
 62 | }
 63 | .zui-mt10{
 64 | 	margin-top: 10px;
 65 | }
 66 | .zui-mr5{
 67 | 	margin-right: 5px;
 68 | }
 69 | .zui-mr10{
 70 | 	margin-right: 10px;
 71 | }
 72 | .zui-mb5{
 73 | 	margin-bottom: 5px;
 74 | }
 75 | .zui-mb10{
 76 | 	margin-bottom: 10px;
 77 | }
 78 | .zui-ml5{
 79 | 	margin-left: 5px;
 80 | }
 81 | .zui-ml10{
 82 | 	margin-left: 10px;
 83 | }
 84 | 
 85 | 
 86 | 
 87 | /**
 88 |  * 边框
 89 | */
 90 | .zui-border{
 91 | 	border:1px solid #e6e6e6;
 92 | }
 93 | .zui-border-t{
 94 | 	border-top:1px solid #e6e6e6;
 95 | }
 96 | .zui-border-b{
 97 | 	border-bottom:1px solid #e6e6e6;
 98 | }
 99 | .zui-border-r{
100 | 	border-right:1px solid #e6e6e6;
101 | }
102 | .zui-border-l{
103 | 	border-left:1px solid #e6e6e6;
104 | }
105 | 
106 | /**
107 |  *字体
108 | */
109 | .zui-f12{
110 | 	font-size: 12px;
111 | }
112 | .zui-f16{
113 | 	font-size: 16px;
114 | }
115 | .zui-f18{
116 | 	font-size: 18px;
117 | }
118 | /**
119 |  * 显示隐藏
120 |  */
121 | .zui-undis{
122 | 	display: none !important;
123 | }
124 | .zui-dis{
125 | 	display: block !important;
126 | }
127 | /**
128 |  * ZUI的头部
129 |  */
130 | .zui-header{
131 | 	height: 46px;
132 | 	line-height: 46px;
133 | 	background-color:#18b4ed;
134 | 	color: #fff;
135 | }
136 | .zui-header .zicon-goback{
137 | 	position: absolute;
138 | 	left:0; 
139 | }
140 | .zicon-goback:before{
141 | 	font-size: 26px;
142 | 	line-height: 44px;
143 | 	padding: 0 10px 0 5px;
144 | 	display:inline-block;
145 | }
146 | .zui-header .title{
147 | 	font-size: 20px;
148 | 	text-align: center;
149 | }
150 | /**
151 |  * 底部
152 |  */
153 | .zui-footer{
154 | 	position: fixed;
155 | 	left:0;
156 | 	bottom: 0;
157 | 	width: 100%;
158 | 	height: 50px;
159 | 	border-top:1px solid #e6e6e6;
160 | 	z-index: 100;
161 | }
162 | .zui-footer .footer-navlist{
163 | 	display:-webkit-box;
164 |     display:box;
165 | 	width: 100%;
166 | }
167 | .zui-footer .footer-navlist li{
168 | 	-webkit-box-flex:1;
169 |     box-flex:1;
170 |     -webkit-box-align: center;
171 | 	color: #999
172 | }
173 | .zui-footer .footer-navlist li a{
174 | 	color: #999;
175 | 	display: block;
176 | 	text-align: center;
177 | 	padding: 5px 0 0 0;
178 | }
179 | .zui-footer .footer-navlist li a p{
180 | 	font-size: 12px;
181 | 	line-height:normal;
182 | }
183 | .zui-footer .footer-navlist li.oncurr a{
184 | 	color: #18b4ed
185 | }
186 | 
187 | /**
188 |  *图文列表
189 |  */
190 | /**
191 |  *响应式图片
192 |  */
193 | 
194 | .zrespone-squre{
195 |   position: relative;
196 |   width: 100%;
197 |   height: 0;
198 |   overflow: hidden;
199 |   margin: 0;
200 |   background-position:center center;
201 |   background-repeat: no-repeat;
202 |   background-size:100% 100%;
203 | }
204 | .zrespone-squre11{
205 | 	padding-bottom: 100%; /* 关键就在这里 */
206 | }
207 | .zrespone-squre21{
208 | 	padding-bottom: 50%; /* 关键就在这里 */
209 | }
210 | .zrespone-squre31{
211 | 	padding-bottom: 33.3333%; /* 关键就在这里 */
212 | }
213 | .zrespone-squre12{
214 | 	padding-bottom: 200%;
215 | }
216 | .zrespone-squre11 .forsqure,
217 | .zrespone-squre21 .forsqure,
218 | .zrespone-squre12 .forsqure{
219 |   display: block;
220 |   position: absolute;
221 |   width: 100%;
222 |   top: 0;
223 |   bottom: 0;
224 | }
225 | .zrespone-squre11 .forsqure img,
226 | .zrespone-squre21 .forsqure img{
227 | 	max-width: 100%;
228 | }
229 | /**
230 |  *文字截断
231 |  */
232 | .znowrap{
233 | 	max-width: 100%;
234 |     overflow: hidden;
235 |     white-space: nowrap;
236 |     text-overflow: ellipsis;
237 | }
238 | .znowrap-flex{
239 | 	display: -webkit-box;
240 |     overflow: hidden;
241 |     text-overflow: ellipsis;
242 |     -webkit-box-orient: vertical;
243 |     height: inherit;
244 | }
245 | .znowrap-line1{
246 | 	-webkit-line-clamp: 1;
247 | }
248 | .znowrap-line2{
249 | 	-webkit-line-clamp: 2;
250 | }
251 | .znowrap-line3{
252 | 	-webkit-line-clamp: 3;
253 | }
254 | 
255 | /**
256 |  * 弹性布局
257 |  */
258 | .zui-flex{
259 | 	display: -webkit-box;
260 | 	display: box;
261 |     width: 100%;
262 | }
263 | .zui-flex .flex-1{
264 | 	-webkit-box-flex: 1;
265 |     width: 100%;
266 |     text-align: center;
267 |     display: -webkit-box;
268 |     -webkit-box-orient: vertical;
269 |     -webkit-box-pack: center;
270 |     -webkit-box-align: center;
271 | }
272 | /**
273 |  *网格布局
274 |  */
275 | .zui-col-10{
276 | 	width: 10%;
277 | }
278 | .zui-col-90{
279 | 	width:90%;
280 | }
281 | .zui-col-20{
282 | 	width: 20%;
283 | }
284 | .zui-col-80{
285 | 	width:80%;
286 | }
287 | .zui-col-25{
288 | 	width: 25%;
289 | }
290 | .zui-col-75{
291 | 	width:75%;
292 | }
293 | .zui-col-33{
294 | 	width: 33.3333%;
295 | }
296 | .zui-col-67{
297 | 	width: 66.6666%;
298 | }
299 | .zui-col-50{
300 | 	width: 50%;
301 | }
302 | 
303 | 
304 | .zui-row-float{
305 | 	display: block;
306 |     overflow: hidden;
307 | }
308 | .zui-col-pd5{
309 | 	padding: 5px;
310 | }
311 | .zui-col-pd1{
312 | 	padding: 1px;
313 | }
314 | .zui-col{
315 |     box-sizing: border-box;
316 | }
317 | 
318 | .zui-row-float .zui-col{
319 | 	float: left;
320 | }
321 | .zui-row-flex{
322 | 	display: -webkit-box;
323 |     width: 100%;
324 |     -webkit-box-sizing: border-box;
325 |     box-sizing: border-box;
326 | }
327 | .zui-row-flex .zui-col-1{
328 | 	-webkit-box-flex: 1;
329 | 	box-flex: 1;
330 | }
331 | .zui-row-flex .zui-col-2{
332 | 	-webkit-box-flex:2;
333 | 	box-flex:2;
334 | }
335 | .zui-row-flex .zui-col-3{
336 | 	-webkit-box-flex:3;
337 | 	box-flex:3;
338 | }
339 | .zui-row-flex .zui-col-4{
340 | 	-webkit-box-flex:4;
341 | 	box-flex:4;
342 | }
343 | 
344 | /**
345 |  * 盒子模型display:-webkit-box;的对其方式
346 |  */
347 | .zui-flex-pack-start{
348 | 	-webkit-box-pack: start;
349 | 	box-pack:start;
350 | }
351 | .zui-flex-pack-center{
352 | 	-webkit-box-pack: center;
353 | 	box-pack:center;
354 | }
355 | .zui-flex-pack-end{
356 | 	-webkit-box-pack: end;
357 | 	box-pack:end;
358 | }
359 | .zui-flex-align-start{
360 | 	-webkit-box-align:start;
361 | 	box-align:start;
362 | }
363 | .zui-flex-align-center{
364 | 	-webkit-box-align:center;
365 | 	box-align:center;
366 | }
367 | .zui-flex-align-end{
368 | 	-webkit-box-align:end;
369 | 	box-align:end;
370 | }
371 | /**
372 |  * 两端对齐
373 |  */
374 | .zui-justify{
375 | 	text-align: justify;
376 |     font-size: 0;
377 | }
378 | 
379 | 
380 | 
381 | 


--------------------------------------------------------------------------------
/demo/css/demo.css:
--------------------------------------------------------------------------------
  1 | .demo-container{
  2 | 	padding:10px;
  3 | }
  4 | .demo-bgeee{
  5 | 	  background: #eeeeee;
  6 | }
  7 | .demo-bgf2f2f2{
  8 | 	background:#f2f2f2;
  9 | }
 10 | .demo-bg999{
 11 | 	background:#999;
 12 | }
 13 | .demo-bgfff{
 14 | 	background: #fff;
 15 | }
 16 | .mg10{margin:10px;}
 17 | .mr5{ margin-right: 5px}
 18 | .mr10{ margin-right:10px}
 19 | .mr15{ margin-right:15px}
 20 | .mr20{ margin-right:20px}
 21 | 
 22 | .ml5{ margin-left: 5px}
 23 | .ml10{ margin-left:10px}
 24 | .ml15{ margin-left:15px}
 25 | .ml20{ margin-left:20px}
 26 | 
 27 | .mb5{ margin-bottom: 5px}
 28 | .mb10{ margin-bottom:10px}
 29 | .mb15{ margin-bottom:15px}
 30 | .mb20{ margin-bottom:20px}
 31 | 
 32 | .mt5{ margin-top: 5px}
 33 | .mt10{ margin-top:10px}
 34 | .mt15{ margin-top:15px}
 35 | .mt20{ margin-top:20px}
 36 | 
 37 | .pr5{ padding-right: 5px}
 38 | .pr10{ padding-right: 10px}
 39 | .pr15{ padding-right: 15px}
 40 | .pr20{ padding-right: 20px}
 41 | 
 42 | .pl5{ padding-left: 5px}
 43 | .pl10{ padding-left: 10px}
 44 | .pl15{ padding-left: 15px}
 45 | .pl20{ padding-left: 20px}
 46 | .pd10{padding: 10px}
 47 | .pd30{
 48 | 	padding: 30px;
 49 | }
 50 | .fb{
 51 | 	font-size: bold;
 52 | }
 53 | .clrf60{
 54 | 	color: #f60
 55 | }
 56 | 
 57 | .align-l{
 58 | 	text-align: left;
 59 | }
 60 | .align-c{
 61 | 	text-align: center;
 62 | }
 63 | .border-e5e5e5{
 64 | 	border:1px solid #e5e5e5;
 65 | }
 66 | .clrfff{
 67 | 	color:#fff;
 68 | }
 69 | 
 70 | 
 71 | 
 72 | 
 73 | 
 74 | 
 75 | 
 76 | 
 77 | 
 78 | 
 79 | 
 80 | 
 81 | 
 82 | 
 83 | 
 84 | 
 85 | .tit-h2{
 86 |         font-size: 20px;
 87 |         text-align: left;
 88 |         padding: 15px 10px;
 89 |         border-bottom: 1px solid #e1e1e1;
 90 | }
 91 | .intro-blk-wraper{
 92 | 	border:1px solid #F2D9DE;
 93 | 	margin-bottom: 20px;
 94 | 	padding: 10px;
 95 | }
 96 | .intro-blk{
 97 | 	font-size: 16px;
 98 | 	text-indent: 2em;
 99 | 	padding: 5px 15px;
100 | 	line-height: 2
101 | }
102 | .blk-box{
103 | 	border: 1px dashed #cfcfcf
104 | }
105 | .blkbox-bd{
106 | 	padding: 15px
107 | }
108 | /**
109 |  *场景秒睡 
110 |  */
111 | .situation-box{
112 | 	border:1px solid #cfcfcf;
113 | }
114 | 
115 | .situation-box .hd{
116 | 	border-bottom: 1px solid #e5e5e5;
117 | 	background: #eeeeee;
118 | 	height: 38px;
119 | 	line-height:38px;
120 | 	font-size: 16px;
121 | 	color: #333;
122 | 	padding: 0 10px;
123 | }
124 | .situation-box .bd{
125 | 	padding: 15px;
126 | 	line-height: 23px;
127 | }
128 | 
129 | .demo-table{
130 | 	border:1px solid #e1e1e1;
131 | 	width: 100%;
132 | 	text-align: center;
133 | 	table-layout: fixed;
134 | 	word-break: break-all; 
135 | 	word-wrap:break-word;
136 | }
137 | .demo-table th{
138 | 	padding: 8px 10px;
139 | 	background: #EEE;
140 | }
141 | .demo-table td,.demo-table th{
142 | 	border:1px solid #e1e1e1;
143 | }
144 | .demo-table td{
145 | 	padding:7px 10px;
146 | }
147 | .demo-hd-1{
148 | 	border-bottom: 1px solid #e5e5e5;
149 |     height: 38px;
150 |     line-height: 38px;
151 |     font-size: 16px;
152 |     color: #333;
153 |     padding: 0 10px;
154 | }
155 | .demo-full{
156 | 	height: 100%;
157 | 	width: 100%;
158 | 	display: block;
159 | }
160 | .demo-h50{
161 | 	height: 50px;
162 | 	background: #f60;
163 | }
164 | .demo-h100{
165 | 	height: 100px;
166 | 	background: #f60;
167 | }
168 | .demo-bgf60{
169 | 	background:#f60;
170 | }
171 | .demo-whfull{
172 | 	width: 100%;
173 | 	height: 100%;
174 | }


--------------------------------------------------------------------------------
/demo/css/form.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 1、对于验证码这种格式的表单，不管在横的还是竖的表单中,一般都在同一行
  3 |  */
  4 | .zform-fieldset{
  5 | 	margin-bottom: 10px;
  6 | }
  7 | .zform-control{
  8 | 	margin-bottom: 15px;
  9 | }
 10 | .control-verifycode  img{
 11 | 	max-width: 100%;
 12 | }
 13 | .zform input[type="number"]:focus, 
 14 | .zform input[type="search"]:focus,
 15 | .zform input[type="text"]:focus,
 16 | .zform input[type="password"]:focus,
 17 | .zform input[type="datetime"]:focus,
 18 | .zform input[type="datetime-local"]:focus,
 19 | .zform input[type="date"]:focus, 
 20 | .zform input[type="month"]:focus,
 21 | .zform input[type="time"]:focus,
 22 | .zform input[type="week"]:focus,
 23 | .zform input[type="email"]:focus,
 24 | .zform input[type="url"]:focus,
 25 | .zform input[type="tel"]:focus,
 26 | .zform input[type="color"]:focus,
 27 | .zform select:focus,
 28 | .zform textarea:focus{
 29 | 	outline: 0px none;
 30 | }
 31 | 
 32 | .zform input:disabled,.zform select:disabled{
 33 | 	border-color:#eee;
 34 | }
 35 | .zform input[type="checkbox"]:checked:disabled,.zform input[type="radio"]:checked:disabled{
 36 | 	background-color:#18b4ed
 37 | }
 38 | /**
 39 |  * 表单字段
 40 |  */
 41 | .field-text{
 42 | 	display:inline-block;
 43 | 	width: 100%;
 44 |   	height: 44px;
 45 |   	padding: 6px 5px;
 46 |   	line-height: 1.42857143;
 47 |   	background-color: #fff;
 48 |   	background-image: none;
 49 |   	border: 1px solid #ccc;
 50 |   	box-sizing:border-box;
 51 | 	-webkit-box-sizing:border-box; /* Safari */
 52 | }
 53 | .field-area{
 54 | 	width: 100%;
 55 | 	padding: 5px;
 56 | 	vertical-align: top;
 57 | 	background-color: #fff;
 58 |   	background-image: none;
 59 |   	border: 1px solid #ccc;
 60 |   	box-sizing:border-box;
 61 | 	-webkit-box-sizing:border-box; /* Safari */
 62 | }
 63 | .field-select{
 64 | 	-webkit-appearance: none !important;
 65 |   	-webkit-border-radius: 0;
 66 |   	border-radius: 0;
 67 | 	border: 1px solid #CCC;
 68 | 	padding: 0 5px;
 69 | 	height: 44px;
 70 | 	line-height: 44px;
 71 | 	width: 100%;
 72 | 	color:#666;
 73 | 	box-sizing:border-box;
 74 | 	-webkit-box-sizing:border-box; /* Safari */
 75 | 	background: #ffffff url('../images/select_arrow.png') no-repeat 100% center;
 76 | }
 77 | .field-check,.field-radio{
 78 | 	-webkit-appearance: none;
 79 |     width: 20px;
 80 |     height:20px;
 81 |    
 82 |     border:1px solid #ccc;
 83 |     text-align: center;
 84 |     vertical-align: middle;
 85 |     outline: 0;
 86 |     -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125);
 87 |           box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125);
 88 | }
 89 | .field-check{
 90 | 	 border-radius: 4px;
 91 | }
 92 | .field-radio{
 93 | 	border-radius:100%;
 94 | }
 95 | .field-check:checked,.field-radio:checked{
 96 |     border: 0;
 97 |     background:#18b4ed;
 98 |     color: #fff;
 99 | }
100 | .field-check:checked:before{
101 | 	color:#fff;
102 |     content: "\e60a";
103 |     font-size:22px;
104 |     line-height: 20px;
105 |     vertical-align:top;
106 | }
107 | .field-radio:checked:before{
108 | 	content: "\e609";
109 | 	font-size: 18px;
110 |     line-height: 20px;
111 | 	vertical-align:top;
112 | }
113 | 
114 | 
115 | /**
116 |  * icon内嵌型(左边或者是右边)
117 |  */
118 | .zform-control-icon{
119 | 	position: relative;
120 | }
121 | .zform-control-icon .control-icon i{
122 | 	font-size: 28px;
123 | 	line-height: 44px;
124 | }
125 | .zform-control-icon.zform-control-left .control-icon{
126 | 	position: absolute;
127 | 	height: 100%;
128 | 	left:5px;
129 | 	color: #999;
130 | }
131 | .zform-control-icon.zform-control-left .control-field .field-text{
132 | 	padding-left: 40px
133 | }
134 | 
135 | .zform-control-icon.zform-control-right .control-icon{
136 | 	position: absolute;
137 | 	height: 100%;
138 | 	right:5px;
139 | 	color: #999;
140 | }
141 | .zform-control-icon.zform-control-right .control-field .field-text{
142 | 	padding-right: 40px
143 | }
144 | 
145 | 
146 | 
147 | 
148 | /**
149 |  * 验证码
150 |  */
151 | .zform-control-verifycode{
152 | 	position: relative;
153 | }
154 | .zform-control-verifycode .control-field{
155 | 	padding-right: 90px;
156 | }
157 | .zform-control-verifycode .control-verifycode{
158 | 	position: absolute;
159 | 	right: 0;
160 | 	top:0;
161 | 	width: 80px;
162 | }
163 | /**
164 |  * 单选框和复选框
165 |  */
166 | .zform-control-radiocheck{
167 | 		margin-bottom: 12px
168 | }
169 | .zform-control-radiocheck .control-label{
170 | 		line-height:20px !important;
171 | }
172 | .zform-control-radiocheck .control-field .field-radio,
173 | .zform-control-radiocheck .control-field .field-check{
174 | 	margin-right: 5px;
175 | }
176 | .zform-control-radiocheck .control-field label{
177 | 	display: inline-block;
178 | 	margin-right: 15px;
179 | 	line-height: 20px;
180 | 	margin-bottom: 5px;
181 | }
182 | /**
183 |  * 垂直类型
184 |  */
185 | .zform-vertical .zform-control .control-label{
186 | 	padding: 10px 0 8px;
187 | 	display: block;
188 | }
189 | /**
190 |  * 水平类型
191 |  */
192 | .zform-horizontal .zform-control{
193 | 	position: relative;
194 | }
195 | .zform-horizontal .zform-control .control-label{
196 | 	line-height: 44px;
197 | 	position: absolute;
198 | 	left:0;
199 | 	top:0;
200 | 	min-width: 70px;
201 | 	text-align: right;
202 | }
203 | .zform-horizontal .zform-control .control-label-area{
204 | 	line-height:normal;
205 | }
206 | .zform-horizontal .zform-control .control-field{
207 | 	padding-left: 70px;
208 | }
209 | /**
210 |  * group类型
211 |  */
212 | .zform-group .zform-control{
213 | 	position: relative;
214 | 	margin-bottom:0;
215 | 	border-left:1px solid #ccc;
216 | 	border-right:1px solid #ccc;
217 | 	border-bottom:1px solid #ccc;
218 | 	background: #fff;
219 | }
220 | .zform-group .zform-control:after{
221 | 	content:"";
222 |     display:table;
223 |     clear:both;
224 | }
225 | .zform-group .zform-control:first-child{
226 | 	border-top:1px solid #ccc;
227 | }
228 | .zform-group .zform-control .control-label{
229 | 	line-height: 44px;
230 | 	float: left;
231 | 	padding:0 10px;
232 | }
233 | .zform-group .zform-control .control-field{
234 | 	float: left;
235 | }
236 | .zform-group .zform-control .field-text{
237 | 	border:none;
238 | }
239 | .zform-group.zform-radius .zform-control:first-child{
240 | 	border-top-left-radius: 4px;
241 | 	border-top-right-radius: 4px;
242 | }
243 | .zform-group.zform-radius .zform-control:last-child{
244 | 	border-bottom-left-radius: 4px;
245 | 	border-bottom-right-radius: 4px;
246 | }
247 | 
248 | 
249 | 
250 | 
251 | 
252 | .zform-borderbottom .zform-control{
253 | 	border-top:none !important;
254 | 	border-left:none !important;
255 | 	border-right:none !important;
256 | }
257 | .zform-borderbottom .zform-control .control-field{
258 | 	float: none;
259 | }
260 | /**
261 |  * 圆角处理
262 |  */
263 | .zform-radius .field-text,
264 | .zform-radius .field-area,
265 | .zform-radius .field-select{
266 | 	border-radius: 4px;
267 | }
268 | 
269 | 
270 | 


--------------------------------------------------------------------------------
/demo/css/reset.css:
--------------------------------------------------------------------------------
 1 | /* CSS Document */
 2 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video,button, input,  select, textarea{
 3 | margin: 0;
 4 | padding: 0;
 5 | }
 6 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
 7 | display: block;
 8 | }
 9 | h1,h2,h3,h4,h5,h6 { 
10 |     font-weight: normal; 
11 |     font-size: 100%; 
12 | } 
13 | ul, ol {
14 | list-style: none;
15 | }
16 | table {
17 | border-collapse: collapse;
18 | border-spacing: 0;
19 | }
20 | body, button, input,  select, textarea{
21 |   font: 14px/1.5 Tahoma,  Helvetica,  Arial,  "\5FAE\8F6F\96C5\9ED1",  sans-serif;
22 |   color:#666;
23 | }
24 | 
25 | blockquote, q {
26 | quotes: none;
27 | }
28 | blockquote:before, blockquote:after, q:before, q:after {
29 | content: '';
30 | content: none;
31 | }
32 | a {
33 |   color:#666;
34 | text-decoration: none;
35 | }
36 | a:hover {
37 | text-decoration:  underline;
38 | }
39 | fieldset, img {
40 | border: none;
41 | }
42 | address, cite, dfn, em, var {
43 | font-style: normal;
44 | }
45 | code, kbd, pre, samp, tt {
46 | font-family: "Courier New", Courier, monospace;
47 | }
48 | small {
49 | font-size: 12px;
50 | }
51 | .clearfix:after {
52 |     content:"";
53 |     display:table;
54 |     clear:both;
55 | }
56 | 
57 | input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
58 | -webkit-appearance: none;
59 | }
60 | input[type="search"] {
61 | -webkit-appearance: textfield;
62 | /* 1 */ box-sizing: content-box;
63 | /* 2 */;
64 | }
65 | input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
66 | -webkit-appearance: none;
67 | }
68 | 
69 | 
70 | html {
71 |   -ms-touch-action: none;
72 | }
73 | 


--------------------------------------------------------------------------------
/demo/css/validate.css:
--------------------------------------------------------------------------------
 1 | .field-invalid{
 2 |     border-color:#a94442;
 3 | }
 4 | .field-invalidmsg{
 5 |     color:#a94442;
 6 | }
 7 | .field-validmsg{
 8 |     color:#3c763d;
 9 | }
10 | .field-tooltipWrap{
11 |     position: absolute;
12 |     left: 0;
13 |     top: 0;
14 |     width: 100%;
15 |     z-index: 19891014;
16 | }
17 | .field-tooltipInner{
18 |     pointer-events: none;
19 |     display: table;
20 |     position:fixed;
21 |     left:0;
22 |     top:0;
23 |     width:100%;
24 |     height:100%;
25 | }
26 | .field-tooltip{
27 |     display: table-cell;
28 |     vertical-align: middle;
29 |     text-align: center;
30 | }
31 | .field-tooltip .field-invalidmsg,
32 | .field-tooltip .field-validmsg{
33 |     color: #fff;
34 | }
35 | .field-tooltip .zvalid-resultformat{
36 |     display: inline-block;
37 |     position: relative;
38 |     background-color:rgba(0,0,0,0.8);
39 |     color: #fff;
40 |     padding: 10px 15px;
41 |     font-size: 14px;
42 |     border-radius: 6px;
43 |     box-shadow: 0 0 8px rgba(0,0,0,.1);
44 |     pointer-events: auto;
45 |     animation-name:fieldTipBounceIn;
46 |     -webkit-animation-name:fieldTipBounceIn;
47 |     -webkit-animation-fill-mode: both;
48 |     animation-fill-mode: both;
49 |     -webkit-animation-duration: .18s;
50 |     animation-duration: .18s;
51 | }
52 | 
53 | @-webkit-keyframes fieldTipBounceIn{
54 | 
55 |   0% {
56 |     opacity: 0;
57 |     -webkit-transform: scale3d(.3, .3, .3);
58 |     transform: scale3d(.3, .3, .3);
59 |   }
60 |   100% {
61 |     opacity: 1;
62 |     -webkit-transform: scale3d(1, 1, 1);
63 |     transform: scale3d(1, 1, 1);
64 |   }
65 | }
66 | 
67 | 
68 | @keyframes 
69 | 
70 | {
71 | 
72 | 
73 |   0% {
74 |     opacity: 0;
75 |     -webkit-transform: scale3d(.3, .3, .3);
76 |     transform: scale3d(.3, .3, .3);
77 |   }
78 |   100% {
79 |     opacity: 1;
80 |     -webkit-transform: scale3d(1, 1, 1);
81 |     transform: scale3d(1, 1, 1);
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/demo/iconfont/demo.css:
--------------------------------------------------------------------------------
 1 | *{margin: 0;padding: 0;list-style: none;}
 2 | /*
 3 | KISSY CSS Reset
 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。
 8 | 维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
 9 |  */
10 | 
11 | /** 清除内外边距 **/
12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
14 | pre, /* text formatting elements 文本格式元素 */
15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
16 | th, td /* table elements 表格元素 */ {
17 |   margin: 0;
18 |   padding: 0;
19 | }
20 | 
21 | /** 设置默认字体 **/
22 | body,
23 | button, input, select, textarea /* for ie */ {
24 |   font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
25 | }
26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; }
27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
30 | 
31 | /** 重置列表元素 **/
32 | ul, ol { list-style: none; }
33 | 
34 | /** 重置文本格式元素 **/
35 | a { text-decoration: none; }
36 | a:hover { text-decoration: underline; }
37 | 
38 | 
39 | /** 重置表单元素 **/
40 | legend { color: #000; } /* for ie6 */
41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
43 | /* 注：optgroup 无法扶正 */
44 | 
45 | /** 重置表格元素 **/
46 | table { border-collapse: collapse; border-spacing: 0; }
47 | 
48 | /* 清除浮动 */
49 | .ks-clear:after, .clear:after {
50 |   content: '\20';
51 |   display: block;
52 |   height: 0;
53 |   clear: both;
54 | }
55 | .ks-clear, .clear {
56 |   *zoom: 1;
57 | }
58 | 
59 | .main {padding: 30px 100px;}
60 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
61 | 
62 | .helps{margin-top:40px;}
63 | .helps pre{
64 |   padding:20px;
65 |   margin:10px 0;
66 |   border:solid 1px #e7e1cd;
67 |   background-color: #fffdef;
68 |   overflow: auto;
69 | }
70 | 
71 | .icon_lists li{
72 |   float:left;
73 |   width: 100px;
74 |   height:180px;
75 |   text-align: center;
76 | }
77 | .icon_lists .icon{
78 |   font-size: 42px;
79 |   line-height: 100px;
80 |   margin: 10px 0;
81 |   color:#333;
82 |   -webkit-transition: font-size 0.25s ease-out 0s;
83 |   -moz-transition: font-size 0.25s ease-out 0s;
84 |   transition: font-size 0.25s ease-out 0s;
85 | 
86 | }
87 | .icon_lists .icon:hover{
88 |   font-size: 100px;
89 | }
90 | 


--------------------------------------------------------------------------------
/demo/iconfont/demo.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 |     <link rel="stylesheet" href="iconfont.css">
  9 | </head>
 10 | <body>
 11 |     <div class="main">
 12 |         <h1>IconFont 图标</h1>
 13 |         <ul class="icon_lists clear">
 14 |             
 15 |                 <li>
 16 |                 <i class="icon iconfont">&#xe608;</i>
 17 |                     <div class="name">首页</div>
 18 |                     <div class="code">&amp;#xe608;</div>
 19 |                     <div class="fontclass">.shouye</div>
 20 |                 </li>
 21 |             
 22 |                 <li>
 23 |                 <i class="icon iconfont">&#xe601;</i>
 24 |                     <div class="name">square_check_fill</div>
 25 |                     <div class="code">&amp;#xe601;</div>
 26 |                     <div class="fontclass">.squarecheckfill</div>
 27 |                 </li>
 28 |             
 29 |                 <li>
 30 |                 <i class="icon iconfont">&#xe60c;</i>
 31 |                     <div class="name">dot</div>
 32 |                     <div class="code">&amp;#xe60c;</div>
 33 |                     <div class="fontclass">.dot</div>
 34 |                 </li>
 35 |             
 36 |                 <li>
 37 |                 <i class="icon iconfont">&#xe603;</i>
 38 |                     <div class="name">密码</div>
 39 |                     <div class="code">&amp;#xe603;</div>
 40 |                     <div class="fontclass">.mima</div>
 41 |                 </li>
 42 |             
 43 |                 <li>
 44 |                 <i class="icon iconfont">&#xe604;</i>
 45 |                     <div class="name">calendar</div>
 46 |                     <div class="code">&amp;#xe604;</div>
 47 |                     <div class="fontclass">.calendar</div>
 48 |                 </li>
 49 |             
 50 |                 <li>
 51 |                 <i class="icon iconfont">&#xe600;</i>
 52 |                     <div class="name">radio</div>
 53 |                     <div class="code">&amp;#xe600;</div>
 54 |                     <div class="fontclass">.radio</div>
 55 |                 </li>
 56 |             
 57 |                 <li>
 58 |                 <i class="icon iconfont">&#xe607;</i>
 59 |                     <div class="name">checkbox</div>
 60 |                     <div class="code">&amp;#xe607;</div>
 61 |                     <div class="fontclass">.checkbox</div>
 62 |                 </li>
 63 |             
 64 |                 <li>
 65 |                 <i class="icon iconfont">&#xe60b;</i>
 66 |                     <div class="name">circle</div>
 67 |                     <div class="code">&amp;#xe60b;</div>
 68 |                     <div class="fontclass">.circle</div>
 69 |                 </li>
 70 |             
 71 |                 <li>
 72 |                 <i class="icon iconfont">&#xe602;</i>
 73 |                     <div class="name">返回</div>
 74 |                     <div class="code">&amp;#xe602;</div>
 75 |                     <div class="fontclass">.fanhui</div>
 76 |                 </li>
 77 |             
 78 |                 <li>
 79 |                 <i class="icon iconfont">&#xe60a;</i>
 80 |                     <div class="name">checkbox</div>
 81 |                     <div class="code">&amp;#xe60a;</div>
 82 |                     <div class="fontclass">.checkbox1</div>
 83 |                 </li>
 84 |             
 85 |                 <li>
 86 |                 <i class="icon iconfont">&#xe605;</i>
 87 |                     <div class="name">邮箱</div>
 88 |                     <div class="code">&amp;#xe605;</div>
 89 |                     <div class="fontclass">.youxiang</div>
 90 |                 </li>
 91 |             
 92 |                 <li>
 93 |                 <i class="icon iconfont">&#xe609;</i>
 94 |                     <div class="name">circle</div>
 95 |                     <div class="code">&amp;#xe609;</div>
 96 |                     <div class="fontclass">.circle1</div>
 97 |                 </li>
 98 |             
 99 |                 <li>
100 |                 <i class="icon iconfont">&#xe606;</i>
101 |                     <div class="name">会员管理</div>
102 |                     <div class="code">&amp;#xe606;</div>
103 |                     <div class="fontclass">.huiyuanguanli</div>
104 |                 </li>
105 |             
106 |         </ul>
107 | 
108 | 
109 |         <div class="helps">
110 |             第一步：使用font-face声明字体
111 |             <pre>
112 | @font-face {font-family: 'iconfont';
113 |     src: url('iconfont.eot'); /* IE9*/
114 |     src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
115 |     url('iconfont.woff') format('woff'), /* chrome、firefox */
116 |     url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
117 |     url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
118 | }
119 | </pre>
120 | 第二步：定义使用iconfont的样式
121 |             <pre>
122 | .iconfont{
123 |     font-family:"iconfont" !important;
124 |     font-size:16px;font-style:normal;
125 |     -webkit-font-smoothing: antialiased;
126 |     -webkit-text-stroke-width: 0.2px;
127 |     -moz-osx-font-smoothing: grayscale;}
128 | </pre>
129 | 第三步：挑选相应图标并获取字体编码，应用于页面
130 | <pre>
131 | &lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
132 | </pre>
133 |         </div>
134 | 
135 |     </div>
136 | </body>
137 | </html>
138 | 


--------------------------------------------------------------------------------
/demo/iconfont/iconfont.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('iconfont.eot'); /* IE9*/
 4 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 | url('iconfont.woff') format('woff'), /* chrome、firefox */
 6 | url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
 7 | url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family:"iconfont" !important;
12 |   font-size:16px;
13 |   font-style:normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -webkit-text-stroke-width: 0.2px;
16 |   -moz-osx-font-smoothing: grayscale;
17 | }
18 | .icon-shouye:before { content: "\e608"; }
19 | .icon-squarecheckfill:before { content: "\e601"; }
20 | .icon-dot:before { content: "\e60c"; }
21 | .icon-mima:before { content: "\e603"; }
22 | .icon-calendar:before { content: "\e604"; }
23 | .icon-radio:before { content: "\e600"; }
24 | .icon-checkbox:before { content: "\e607"; }
25 | .icon-circle:before { content: "\e60b"; }
26 | .icon-fanhui:before { content: "\e602"; }
27 | .icon-checkbox1:before { content: "\e60a"; }
28 | .icon-youxiang:before { content: "\e605"; }
29 | .icon-circle1:before { content: "\e609"; }
30 | .icon-huiyuanguanli:before { content: "\e606"; }
31 | 


--------------------------------------------------------------------------------
/demo/iconfont/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/efri-yang/mobileValidate/aba1f00166f03754122f98e29c76056671393e78/demo/iconfont/iconfont.eot


--------------------------------------------------------------------------------
/demo/iconfont/iconfont.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>
 5 | Created by FontForge 20120731 at Sat Nov  7 15:44:52 2015
 6 |  By Ads
 7 | </metadata>
 8 | <defs>
 9 | <font id="iconfont" horiz-adv-x="1024" >
10 |   <font-face 
11 |     font-family="iconfont"
12 |     font-weight="500"
13 |     font-stretch="normal"
14 |     units-per-em="1024"
15 |     panose-1="2 0 6 3 0 0 0 0 0 0"
16 |     ascent="812"
17 |     descent="-212"
18 |     x-height="792"
19 |     bbox="34 -148 960 792"
20 |     underline-thickness="50"
21 |     underline-position="-100"
22 |     unicode-range="U+0078-E60C"
23 |   />
24 | <missing-glyph horiz-adv-x="374" 
25 | d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
26 |     <glyph glyph-name=".notdef" horiz-adv-x="374" 
27 | d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
28 |     <glyph glyph-name=".null" horiz-adv-x="0" 
29 |  />
30 |     <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
31 |  />
32 |     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
33 | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
34 | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
35 | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
36 |     <glyph glyph-name="uniE600" unicode="&#xe600;" 
37 | d="M512 -148q-185 0 -316.5 131.5t-131.5 316.5t131.5 316.5t316.5 131.5t316.5 -131.5t131.5 -316.5t-131.5 -316.5t-316.5 -131.5zM512 684q-159 0 -271.5 -112.5t-112.5 -271.5t112.5 -271.5t271.5 -112.5t271.5 112.5t112.5 271.5t-112.5 271.5t-271.5 112.5zM512 300z
38 | M262 300q0 104 73 177t177 73t177 -73t73 -177q0 -103 -73.5 -176.5t-176.5 -73.5q-104 0 -177 73t-73 177zM552 698v-1v-1v2z" />
39 |     <glyph glyph-name="uniE601" unicode="&#xe601;" 
40 | d="M832 716h-640q-40 0 -68 -28t-28 -68v-640q0 -40 28 -68t68 -28h640q40 0 68 28t28 68v640q0 40 -28 68t-68 28zM727 374l-256 -259v-1q-2 -2 -6 -4q-1 0 -1.5 -0.5t-1.5 -1t-2 -1.5q-6 -2 -12 -2t-12 2l-2 2q-1 0 -1 1q-6 3 -7 4v1h-1l-126 129q-6 6 -8 14.5t0.5 16.5
41 | t8.5 15q9 9 22.5 8.5t22.5 -9.5l103 -106l234 236q9 9 22.5 9t22.5 -9.5t9.5 -22.5t-9.5 -22z" />
42 |     <glyph glyph-name="uniE602" unicode="&#xe602;" 
43 | d="M339 300l424 386q5 5 8 12t3 13.5t-3 13.5t-8 12q-10 10 -25 10t-25 -10l-441 -403q-7 -3 -12 -8q-12 -11 -11 -27q0 -15 11 -26q5 -5 11 -8l442 -402q7 -7 16 -9.5t18 0t16 9t9.5 16t0 18.5t-9.5 16z" />
44 |     <glyph glyph-name="uniE603" unicode="&#xe603;" 
45 | d="M760 371v103q0 5 -0.5 14t-5 34t-13 48t-26.5 50.5t-42.5 47.5t-64.5 34t-89 14q-166 0 -222 -143q-20 -52 -20 -99v-103h-104v-484h691v484h-104zM553 104v-113h-69v113q-34 20 -34 59q0 12 3.5 22.5t9.5 19t14.5 15t19 10t22.5 3.5q28 0 48.5 -20.5t20.5 -49.5
46 | q0 -39 -35 -59zM691 371h-345v103q0 14 2 29.5t12.5 43t27.5 48t51 36.5t79.5 16t80 -16t51.5 -36.5t27 -48t12 -43t2 -29.5v-103z" />
47 |     <glyph glyph-name="uniE604" unicode="&#xe604;" 
48 | d="M352 479q-13 0 -22.5 9.5t-9.5 22.5v96q0 13 9.5 22.5t22.5 9.5t22.5 -9.5t9.5 -22.5v-96q0 -8 -4 -15.5t-11.5 -12t-16.5 -4.5zM787 587h-51v-72q0 -34 -16.5 -55.5t-47.5 -21.5t-47.5 21.5t-16.5 55.5v72h-192v-72q0 -22 -7 -39t-21.5 -27.5t-35.5 -10.5
49 | q-31 0 -47.5 21.5t-16.5 55.5v72h-13q-53 0 -100 -43.5t-47 -96.5v-383q0 -51 45.5 -83.5t101.5 -32.5h512q35 0 59.5 14t37 40t12.5 62v383q0 57 -29.5 98.5t-79.5 41.5zM831 64q0 -27 -10.5 -39.5t-36.5 -12.5h-512q-30 0 -55 13.5t-25 38.5v332h639v-332zM672 479
50 | q13 0 22.5 9.5t9.5 22.5v96q0 14 -9.5 23t-22.5 9t-22.5 -9t-9.5 -23v-96q0 -5 1.5 -10t4.5 -9t7 -6.5t9 -4.5t10 -2zM256 331h128v-96h-128v96zM448 331h128v-96h-128v96zM640 331h128v-96h-128v96zM256 172h128v-96h-128v96zM448 172h128v-96h-128v96zM640 172h128v-96
51 | h-128v96z" />
52 |     <glyph glyph-name="uniE605" unicode="&#xe605;" 
53 | d="M705 300l239 -195v390zM78 495v-390l239 195zM944 589h-865l433 -361zM643 249l-132 -110l-117 97h1l-25 21l-292 -245h866l-292 245z" />
54 |     <glyph glyph-name="uniE606" unicode="&#xe606;" 
55 | d="M478 212q3 16 -13.5 35t-17.5 22q-2 4 -3 15t-3 16q-3 7 -11.5 15.5t-10.5 12.5q-9 16 -9.5 28t5 29t7.5 25q1 4 0 17.5t0 20.5q5 54 34 100q8 13 24 29t27.5 28t11.5 19q3 24 -25 51t-60 37q-45 14 -81 8t-62.5 -28.5t-42.5 -54.5t-21 -69q-1 -5 -1 -12v-12
56 | q0 -5 -0.5 -11.5t-1.5 -12.5q-1 -3 -7 -16t-6 -25q0 -7 3.5 -13t7.5 -10.5t10 -12t10 -14.5q4 -5 7 -17.5t6 -17.5q4 -6 12 -14t14 -13.5t12 -15.5t6 -20t-3 -28q-8 -21 -31.5 -33.5t-49 -17t-52 -15t-37.5 -28.5q-13 -20 -13 -60.5t10 -71.5q41 -11 94 -18t98 -7
57 | q0 4 0.5 14t1 14t1 10.5t1.5 10.5t2 7q9 22 47 39t72.5 32.5t37.5 32.5zM905 72q-7 15 -23.5 26t-30 15.5t-38.5 11.5q-16 4 -24.5 6.5t-21 7.5t-19.5 10t-13.5 13.5t-8.5 18.5q-3 17 -2.5 27t6.5 19.5t11.5 15t13.5 13t12 14.5q3 4 4.5 10.5t3.5 13.5t5 12t11.5 9t10.5 7
58 | q9 12 9.5 25t-5.5 31.5t-7 23.5q-3 14 -6.5 37t-6 35.5t-6.5 28.5t-10.5 28t-15.5 21q-40 42 -113 44.5t-113 -37.5q-5 -5 -9.5 -11t-8 -12.5t-7 -14t-6 -14.5t-5.5 -15q-5 -17 -7.5 -49t-4.5 -44q-2 -7 -8 -22.5t-5 -25.5q1 -6 3 -11t5.5 -9.5t7.5 -8.5t8.5 -10t7.5 -12
59 | q3 -5 5 -16.5t4 -15.5q5 -7 14.5 -15t16.5 -14t11.5 -18.5t2.5 -28.5q-3 -28 -27.5 -44t-52.5 -20.5t-57.5 -18t-41.5 -36.5q-22 -44 0 -124q55 -15 88 -17.5t177 -2.5q140 0 177 3t89 20q20 78 0 120z" />
60 |     <glyph glyph-name="uniE607" unicode="&#xe607;" 
61 | d="M512 748q-53 0 -103 -11.5t-94 -34t-83 -53t-69.5 -69.5t-53 -83t-34 -94t-11.5 -103q0 -91 35.5 -174t95.5 -143t143 -95t174 -35t174 35t143 95t95 143t35 174t-35 174t-95 143t-143 95.5t-174 35.5zM415 80l-52 53l-141 140l53 53l140 -140l334 334l53 -53z" />
62 |     <glyph glyph-name="uniE608" unicode="&#xe608;" horiz-adv-x="1000" 
63 | d="M263 -114q-18 0 -33 6.5t-26 24t-11 43.5v308h-64q-9 0 -18.5 5t-16.5 15q-17 21 -17 49v8l411 426q4 4 9 5.5t11 1.5q15 0 22 -7q2 -2 414 -422l6 -6v-8v-10l-2 -10q0 -5 -1 -9t-2.5 -7.5t-3.5 -6.5q-14 -22 -41 -22h-62l-1 -313v-2q-4 -17 -15 -33q-24 -36 -64 -36
64 | h-152v20q0 35 0.5 78.5t0.5 93.5v84q0 34 -1 37q0 4 -3 10.5t-7 6.5h-164q-2 0 -4.5 -2.5t-4.5 -6t-2 -7.5v-314h-154h-1h-3zM131 307h102v-347q0 -34 30 -34h2h1h1h114v274q0 22 15 39t36 17h164q25 0 40 -23q10 -16 10 -33q1 -11 0 -274h112q12 0 21.5 8t12.5 15t5 14
65 | l1 346h102q5 0 6 3q3 5 4 15l-1 1v1h-1v1h-1l-1 1v1h-1l-1 1v1h-1l-1 1v1l-1 1h-1l-1 1v1l-1 1l-1 1h-1l-1 1v1l-1 1l-1 1h-1l-1 1v1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1h-1v1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1
66 | l-1 1v1l-1 1h-1l-1 1l-1 1l-1 1l-1 1v1l-1 1h-1l-1 1l-1 1l-1 1l-1 1l-1 1v1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1h-1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1v1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-2 2l-1 1l-1 1l-1 1
67 | l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 2l-1 1l-1 1l-1 1l-2 1l-1 1l-1 1l-1 2l-1 1l-1 1l-1 1l-2 1l-1 1l-1 2l-1 1l-1 1l-1 1l-1 1l-2 1l-1 2l-1 1l-1 1l-1 1l-1 1l-2 2l-1 1l-1 1l-1 1l-1 1l-2 2l-1 1l-1 1
68 | l-1 1l-1 1l-2 2l-1 1l-1 1l-1 1l-1 2l-2 1l-1 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 2l-1 1l-1 1l-2 1l-1 2l-1 1l-1 1l-2 2l-1 1l-1 1l-2 1l-1 2l-1 1l-1 1l-2 2l-1 1l-1 1l-2 2l-1 1l-1 1l-1 2l-2 1l-1 1l-1 2l-2 1
69 | l-1 1l-1 2l-2 1l-1 1l-1 2l-2 1l-1 1l-1 2l-1 1l-2 1l-1 2l-1 1l-2 1l-1 2l-1 1l-2 1l-1 2l-1 1l-2 1l-1 2l-1 1l-2 2l-1 1l-1 1l-2 2l-1 1l-2 1l-1 2l-1 1l-2 1l-1 2l-1 1l-2 2l-1 1l-1 1l-2 2l-1 1l-1 2l-2 1l-1 1l-2 2l-1 1l-1 1l-2 2l-1 1l-1 2l-2 1l-1 1l-1 2l-2 1
70 | l-1 2l-2 1l-1 1l-1 2l-2 1l-1 2l-1 1l-2 1l-1 2l-2 1l-1 2l-1 1l-2 1l-1 2l-1 1l-2 2l-1 1l-2 1l-1 2l-1 1l-2 2l-1 1l-1 1l-2 2l-1 1l-2 2l-1 1l-1 1l-2 2l-1 1l-2 2l-1 1l-1 1l-2 2l-1 1l-1 2l-2 1l-1 1l-1 2l-2 1l-1 2l-2 1l-1 1l-1 2l-2 1l-1 2l-1 1l-2 1l-1 2l-1 1
71 | l-2 1l-1 2l-2 1l-1 2l-1 1l-2 1l-1 2l-1 1l-2 1l-1 2l-1 1l-1 1l-2 2l-1 1l-1 1l-2 2l-1 1l-1 1l-2 2l-1 1l-1 1l-1 1l-2 2l-1 1l-1 1l-1 2l-2 1l-1 1l-1 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 1l-1 1l-1 1l-1 2l-1 1l-2 1l-392 -405q2 -9 6 -14.5t8 -8.5z" />
72 |     <glyph glyph-name="uniE609" unicode="&#xe609;" 
73 | d="M512 515q47 0 88 -18t72 -49t49 -72t18 -89q0 -23 -4.5 -45t-13.5 -42q-18 -41 -49 -72t-72 -49q-20 -9 -42 -13.5t-46 -4.5q-47 0 -88 18t-72 49t-49 72t-18 87q0 48 18 89t49 72t72 49t88 18v0zM512 515z" />
74 |     <glyph glyph-name="uniE60A" unicode="&#xe60a;" 
75 | d="M423 64l-231 231l63 63l168 -168l346 346l63 -63z" />
76 |     <glyph glyph-name="uniE60B" unicode="&#xe60b;" 
77 | d="M512 300zM257 300h510q0 -105 -74.5 -180t-180.5 -75t-180.5 75t-74.5 180z" />
78 |     <glyph glyph-name="uniE60C" unicode="&#xe60c;" 
79 | d="M512 300zM350 300q0 67 47.5 114.5t114.5 47.5q44 0 81 -22t59 -59t22 -81q0 -67 -47.5 -114.5t-114.5 -47.5t-114.5 47.5t-47.5 114.5z" />
80 |   </font>
81 | </defs></svg>
82 | 


--------------------------------------------------------------------------------
/demo/iconfont/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/efri-yang/mobileValidate/aba1f00166f03754122f98e29c76056671393e78/demo/iconfont/iconfont.ttf


--------------------------------------------------------------------------------
/demo/iconfont/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/efri-yang/mobileValidate/aba1f00166f03754122f98e29c76056671393e78/demo/iconfont/iconfont.woff


--------------------------------------------------------------------------------
/demo/images/select_arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/efri-yang/mobileValidate/aba1f00166f03754122f98e29c76056671393e78/demo/images/select_arrow.png


--------------------------------------------------------------------------------
/demo/jq-validate.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 |     <meta charset="UTF-8">
  4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  5 |     <title>ZUI -表单验证控件</title>
  6 |     <link rel="stylesheet" type="text/css" href="css/reset.css">
  7 |     <link rel="stylesheet" type="text/css" href="css/common.css">
  8 |     <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
  9 |     <link rel="stylesheet" type="text/css" href="css/form.css">
 10 |     <link rel="stylesheet" type="text/css" href="css/button.css">
 11 |     <link rel="stylesheet" type="text/css" href="css/validate.css">
 12 |     <link rel="stylesheet" type="text/css" href="css/demo.css">
 13 |     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 14 |     <script type="text/javascript" src="js/jquery-mvalidate.js"></script>
 15 |     
 16 | </head>
 17 | <body class="demo-bgf2f2f2">
 18 |     <header class="zui-header">
 19 |         <i class="zicon-goback icon-fanhui" onClick="javascript :history.back(-1);"></i>
 20 |         <h1 class="title">表单验证控件</h1>
 21 |     </header>
 22 |     <div class="demo-hd-1 ml10 mr10">验证类型1</div>
 23 |     <div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
 24 |         <form class="zform zform-radius" action="https://www.wnworld.com" id="form1">
 25 |                 <fieldset class="zform-fieldset">
 26 |                     <div class="zform-control">
 27 |                         <div class="control-field">
 28 |                             <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username">
 29 |                         </div>     
 30 |                     </div>
 31 |                     <div class="zform-control">
 32 |                         <div class="control-field">
 33 |                             <input type="password" id="pwd" class="field-text" placeholder="请输入密码" data-required="true" data-descriptions="password">
 34 |                         </div>     
 35 |                     </div>
 36 |                     <div class="zform-control">
 37 |                         <div class="control-field">
 38 |                             <input type="password" id="confirmpwd" class="field-text"  placeholder="再次输入密码确认" data-required="true" data-descriptions="confirmpassword" data-conditional="confirmpwd">
 39 |                         </div>
 40 |                     </div>
 41 |                     <div class="zform-control">
 42 |                         <div class="control-field">
 43 |                             <input type="text" class="field-text" placeholder="请输入手机号码" data-validate="phone" data-describedby="phone-description">
 44 |                         </div>
 45 |                     </div>
 46 |                     <div class="zform-control">
 47 |                         <div class="control-field">
 48 |                             <input type="text" class="field-text" placeholder="请输入年龄" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age">
 49 |                         </div>
 50 |                     </div>               
 51 |                     <div class="zform-control">
 52 |                         <div class="control-field">
 53 |                             <select class="field-select" data-required="true" data-descriptions="address" >
 54 |                                 <option value="" selected disabled>请选择地址</option>
 55 |                                 <option value="1">浙江省</option>
 56 |                                 <option value="2">海南省</option>
 57 |                             </select>
 58 |                         </div>        
 59 |                     </div>
 60 |                     <div class="zform-control">
 61 |                         <label class="control-label control-label-area">个人简介：</label>
 62 |                         <div class="control-field">
 63 |                             <textarea class="field-area" rows="4" data-required="true" data-descriptions="intro" ></textarea>
 64 |                         </div>
 65 |                     </div>
 66 |                     <div class="zform-control zform-control-radiocheck">
 67 |                         <label class="control-label">兴趣爱好：</label>
 68 |                         <div class="control-field">
 69 |                             <label>
 70 |                                 <input type="checkbox"  name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">篮球
 71 |                             </label>    
 72 |                             <label>
 73 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">足球
 74 |                             </label>    
 75 |                             <label>
 76 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">排球
 77 |                             </label>
 78 |                             <label>
 79 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">乒乓球
 80 |                             </label>    
 81 |                         </div>
 82 |                     </div>
 83 |                     <div class="zform-control zform-control-radiocheck">
 84 |                         <label class="control-label">性别：</label>
 85 |                         <div class="control-field">
 86 |                             <label>
 87 |                                 <input type="radio" name="sex" class="field-radio  zicon" data-required="true"  data-descriptions="sex">男
 88 |                             </label>    
 89 |                             <label>
 90 |                                 <input type="radio"  name="sex" class="field-radio  zicon" data-required="true" data-descriptions="sex">女
 91 |                             </label>    
 92 |                         </div>
 93 |                     </div>
 94 |                 </fieldset>
 95 |                 <input type="submit" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">    
 96 |         </form>
 97 |     </div>
 98 |     <div class="demo-hd-1 ml10 mr10">验证类型2</div>
 99 |     <div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
100 |         <form class="zform zform-radius" action="https://www.baidu.com" id="form2">
101 |                 <fieldset class="zform-fieldset">
102 |                     <div class="zform-control">
103 |                         <div class="control-field">
104 |                             <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username" data-describedby="username-description">
105 |                         </div>
106 |                         <div id="username-description"></div>     
107 |                     </div>
108 |                     <div class="zform-control">
109 |                         <div class="control-field">
110 |                             <input type="password" id="pwd2" class="field-text" placeholder="请输入密码" data-required="true" data-descriptions="password" data-describedby="password-description"  data-conditional="pwd2">
111 |                         </div> 
112 |                         <div id="password-description"></div>    
113 |                     </div>
114 |                     <div class="zform-control">
115 |                         <div class="control-field">
116 |                             <input type="password" id="confirmpwd2" class="field-text"  placeholder="再次输入密码确认" data-required="true" data-descriptions="confirmpassword" data-conditional="confirmpwd2" data-describedby="confirmpassword-description">
117 |                         </div>
118 |                         <div id="confirmpassword-description"></div>
119 |                     </div>
120 |                     <div class="zform-control">
121 |                         <div class="control-field">
122 |                             <input type="text" class="field-text" placeholder="请输入手机号码" data-validate="phone" data-describedby="phone-description">
123 |                         </div>
124 |                         <div id="phone-description"></div>
125 |                     </div>
126 |                     <div class="zform-control">
127 |                         <div class="control-field">
128 |                             <input type="text" class="field-text" placeholder="请输入年龄" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age" data-describedby="age-description">
129 |                         </div>
130 |                         <div id="age-description"></div>
131 |                     </div>
132 |                     <div class="zform-control">
133 |                         <div class="control-field">
134 |                             <select class="field-select" data-required="true" data-descriptions="address" data-describedby="address-description" placeholder="请选择省事">
135 |                                 <option value="" selected disabled>请选择地址</option>
136 |                                 <option value="1">浙江省</option>
137 |                                 <option value="2">海南省</option>
138 |                             </select>
139 |                         </div>
140 |                         <div id="address-description"></div>
141 |                     </div>
142 |                     <div class="zform-control">
143 |                         
144 |                         <div class="control-field">
145 |                             <textarea class="field-area" placeholder="个人简介" rows="4" data-required="true" data-descriptions="intro" data-describedby="intro-description"></textarea>
146 |                         </div>
147 |                         <div id="intro-description"></div>
148 |                     </div>
149 |                     <div class="zform-control zform-control-radiocheck">
150 |                         <label class="control-label">兴趣爱好：</label>
151 |                         <div class="control-field">
152 |                             <label>
153 |                                 <input type="checkbox"  name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">篮球
154 |                             </label>    
155 |                             <label>
156 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">足球
157 |                             </label>    
158 |                             <label>
159 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">排球
160 |                             </label>
161 |                             <label>
162 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">乒乓球
163 |                             </label>    
164 |                         </div>
165 |                         <div id="favourite-description"></div>
166 |                     </div>
167 |                     <div class="zform-control zform-control-radiocheck">
168 |                         <label class="control-label">性别：</label>
169 |                         <div class="control-field">
170 |                             <label>
171 |                                 <input type="radio" name="sex" class="field-radio  zicon" data-required="true"  data-descriptions="sex" data-describedby="sex-description">男
172 |                             </label>    
173 |                             <label>
174 |                                 <input type="radio"  name="sex" class="field-radio  zicon" data-required="true" data-descriptions="sex" data-describedby="sex-description">女
175 |                             </label>    
176 |                         </div>
177 |                         <div id="sex-description"></div>
178 |                     </div>
179 |                 </fieldset>
180 |                 <input type="submit" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">   
181 |         </form>
182 |     </div>
183 | 
184 |     <div class="pl10 pr10 mb20 pb20 align-c"><a href="http://wnworld.com/mobilevalidate" target="_blank" class="zbtn zbtn-primary  zbtn-lg mb20">查看文档</a></div>
185 |     <script type="text/javascript">
186 |    $(function(){
187 |         $.mvalidateExtend({
188 |             phone:{
189 |                 required : true,   
190 |                 pattern : /^0?1[3|4|5|8][0-9]\d{8}$/,
191 |                 each:function(){
192 |                    
193 |                 },
194 |                 descriptions:{
195 |                     required : '<div class="field-invalidmsg">请输入手机号码</div>',
196 |                     pattern : '<div class="field-invalidmsg">您输入的手机号码格式不正确</div>',
197 |                     valid : '<div class="field-validmsg">正确</div>'
198 |                 }
199 |             }
200 |         });
201 |         $("#form1").mvalidate({
202 |             type:1,
203 |             onKeyup:true,
204 |             sendForm:true,
205 |             firstInvalidFocus:false,
206 |             valid:function(event,options){
207 |                 //点击提交按钮时,表单通过验证触发函数
208 |                 alert("验证通过！接下来可以做你想做的事情啦！");
209 |                  event.preventDefault();
210 |             },
211 |             invalid:function(event, status, options){
212 |                 //点击提交按钮时,表单未通过验证触发函数
213 |             },
214 |             eachField:function(event,status,options){
215 |                 //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
216 |             },
217 |             eachValidField:function(val){},
218 |             eachInvalidField:function(event, status, options){},
219 |             conditional:{
220 |                 confirmpwd:function(){
221 |                     return $("#pwd").val()==$("#confirmpwd").val();
222 |                 }
223 |             },
224 |             descriptions:{
225 |                 username:{
226 |                     required : '请输入用户名'
227 |                 },
228 |                 age : {
229 |                     required : '请输入年龄',
230 |                     pattern : '你输入的年龄格式不正确'
231 |                 },
232 |                 password:{
233 |                      required : '请输入密码'
234 |                 },
235 |                 confirmpassword:{
236 |                     required : '请再次输入密码',
237 |                     conditional : '两次密码不一样'
238 |                 },
239 |                 address:{
240 |                     required : '请选择地址'
241 |                 },
242 |                 intro:{
243 |                     required : '请输入个人介绍'
244 |                 },
245 |                 favourite:{
246 |                     required : '请选择个人爱好'
247 |                 },
248 |                 sex:{
249 |                     required : '请选择性别'
250 |                 }
251 |             }
252 |         });
253 |         $("#form2").mvalidate({
254 |             type:2,
255 |             onKeyup:true,
256 |             sendForm:true,
257 |             firstInvalidFocus:true,
258 |             valid:function(event,options){
259 |                 //点击提交按钮时,表单通过验证触发函数
260 |                 alert("验证通过！接下来可以做你想做的事情啦！");
261 |                 event.preventDefault();
262 |             },
263 |             invalid:function(event, status, options){
264 |                 //点击提交按钮时,表单未通过验证触发函数
265 |             },
266 |             eachField:function(event,status,options){
267 |                 //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
268 |             },
269 |             eachValidField:function(val){},
270 |             eachInvalidField:function(event, status, options){},
271 |             conditional:{
272 |                 pwd2:function(val,options){
273 |                     $("#confirmpwd2").trigger("keyup."+options.namespace);
274 |                     return true;
275 |                 },
276 |                 confirmpwd2:function(val){
277 |                     var flag;
278 |                     return (val==$("#pwd2").val()) ? true :false; 
279 |                 },
280 |             },
281 |             descriptions:{
282 |                 username:{
283 |                     required : '<div class="field-invalidmsg">请输入用户名</div>',
284 |                     valid : '<div class="field-validmsg">验证通过</div>'
285 |                 },
286 |                 age : {
287 |                     required : '<div class="field-invalidmsg">请输入年龄</div>',
288 |                     pattern : '<div class="field-invalidmsg">你输入的格式不正确</div>',
289 |                     valid : '<div class="field-validmsg">验证通过</div>'
290 |                 },
291 |                 password:{
292 |                      required : '<div class="field-invalidmsg">请输入密码</div>',
293 |                      conditional : '<div class="field-validmsg">验证通过</div>',
294 |                      valid : '<div class="field-validmsg">验证通过</div>'
295 |                 },
296 |                 confirmpassword:{
297 |                     required : '<div class="field-invalidmsg">请再次输入密码</div>',
298 |                     conditional : '<div class="field-invalidmsg">两次密码不一样</div>',
299 |                     valid : '<div class="field-validmsg">验证通过</div>'
300 |                 },
301 |                 address:{
302 |                     required : '<div class="field-invalidmsg">请选择地址</div>',
303 |                     valid : '<div class="field-validmsg">验证通过</div>'
304 |                 },
305 |                 intro:{
306 |                     required : '<div class="field-invalidmsg">请输入个人介绍</div>',
307 |                     valid : '<div class="field-validmsg">验证通过</div>'
308 |                 },
309 |                 favourite:{
310 |                     required : '<div class="field-invalidmsg">请选择个人爱好</div>',
311 |                     valid : '<div class="field-validmsg">验证通过</div>'
312 |                 },
313 |                 sex:{
314 |                     required : '<div class="field-invalidmsg">请输入性别</div>',
315 |                     valid : '<div class="field-validmsg">验证通过</div>'
316 |                 }
317 |             }
318 |         });
319 |    })
320 | </script>
321 | </body>
322 | </html>
323 | Status API Training Shop Blog About
324 | © 2016 GitHub, Inc. Terms Privacy Security Contact Help


--------------------------------------------------------------------------------
/demo/js/jquery-mvalidate.js:
--------------------------------------------------------------------------------
  1 | (function (factory) {
  2 | 	if (typeof define === 'function' && define.amd ) {
  3 | 		define(['jquery'], function(jquery){
  4 | 			// 返回构造函数
  5 | 			factory(jquery); // 初始化插件	
  6 | 		});
  7 | 	}else if(typeof define === 'function' && define.cmd){
  8 | 		define(['jquery'], function(require,exports,moudles){
  9 | 			factory(
 10 | 			require('jquery')); // 初始化插件
 11 | 		})
 12 | 	}else{
 13 | 		factory(jQuery);
 14 | 	}
 15 | })(function($){
 16 | 	var type = ['input:not([type]),input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="file"],input[type="hidden"],input[type="month"],input[type="number"],input[type="password"],input[type="range"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],textarea', 'select', 'input[type="checkbox"],input[type="radio"]'],
 17 | 		allTypes=type.join(","),
 18 | 		extend={};
 19 | 	var fieldValidTypeHand=function($field,status,options){
 20 | 				if($field.prop("type")=="radio" || $field.prop("type")=="checkbox"){
 21 | 					var $fields=options.$form.find('[name="'+$field.prop('name')+'"]');
 22 | 
 23 | 					if($fields.filter(":checked").length > 0){
 24 | 						$fields.removeClass('field-invalid')
 25 | 					}else{
 26 | 						$fields.addClass('field-invalid')
 27 | 					}
 28 | 				}else{
 29 | 					if(status.required && status.pattern && status.conditional) {
 30 | 						$field.removeClass('field-invalid');
 31 | 					}else{
 32 | 						$field.addClass('field-invalid');
 33 | 					}
 34 | 				}
 35 | 	};
 36 | 	var fieldTooltip=(function(){
 37 | 			var instance=null;
 38 | 				function show(text){
 39 | 					if(!instance){
 40 | 						var $container=$('<div class="field-tooltipWrap"><div class="field-tooltipInner"><div class="field-tooltip fieldTipBounceIn">'+text+'</div></div></div>');
 41 | 		    			$container.appendTo($("body"));
 42 | 		    			instance=true;
 43 | 		    			setTimeout(function(){
 44 | 							$container.remove();
 45 | 							instance=false;
 46 | 						},1500)
 47 | 					}
 48 | 				}
 49 | 		   
 50 | 			return {
 51 | 				show:show
 52 | 			}
 53 | 	})();
 54 | 	var validateField=function(event,options){
 55 | 		var $field=$(this),
 56 | 			status={
 57 | 				required:true,
 58 | 				conditional:true,
 59 | 				pattern:true
 60 | 			},
 61 | 			log,//验证提示信息存储变量
 62 | 			
 63 | 			errorTipFormat=$.fn.mvalidate.errorTipFormat,//错误信息输出的格式化
 64 | 			
 65 | 			fieldValue =$.trim($field.val()) || "",
 66 | 
 67 | 		    //*****获取当前字段的data-validate
 68 | 			fieldValidate=$field.attr("data-validate"),
 69 | 			validation=(fieldValidate != undefined) ? extend[fieldValidate]:{},
 70 | 			//*****获取当前字段的data-required
 71 | 			fieldRequired=$field.attr("data-required"),
 72 | 			//*****获取当前字段的data-pattern
 73 | 			fieldPattern = ($field.attr('data-pattern') || ($.type(validation.pattern) == 'regexp' ? validation.pattern : /(?:)/)),
 74 | 
 75 | 
 76 | 			//*****获取当前字段的data-conditional
 77 | 			fieldConditional=$field.attr("data-conditional") || validation.conditional,
 78 | 			//*****获取当前字段的data-description
 79 | 			fieldDescription=$field.attr("data-descriptions") || validation.descriptions,
 80 | 			//*****获取当前字段的data-describedby
 81 | 			fieldDescribedby=$field.attr("data-describedby") || validation.describedby;
 82 | 
 83 | 			fieldDescription = $.isPlainObject(fieldDescription) ? fieldDescription : (options.descriptions[fieldDescription] || {});
 84 | 			fieldRequired=fieldRequired !='' ? (fieldRequired || !!validation.required ) : true;
 85 | 			if($.type(fieldPattern) != 'regexp') {
 86 | 				fieldPattern=RegExp(fieldPattern);
 87 | 			}
 88 | 
 89 | 		//如果是必填验证,那么就要判断是什么类型的表单
 90 | 		if(fieldRequired) {
 91 | 			//如果是那种可以通过val()来判断的
 92 | 			if($field.is(type[0] + ',' + type[1])) {
 93 | 				if(!fieldValue.length > 0){
 94 | 					status.required = false;
 95 | 				}
 96 | 			//如果是raido和checkbox,通过name和checked来判断
 97 | 			}else if($field.is(type[2])){
 98 | 				if($field.is('[name]')) {
 99 | 					if(options.$form.find('[name="'+$field.prop('name')+'"]:checked').length==0){
100 | 						status.required = false;
101 | 					}
102 | 				}else{
103 | 					status.required = field.is(':checked');
104 | 				}
105 | 			}
106 | 		}
107 | 		/**如果是正则验证
108 | 		 * 只有那些类似type=text的文本框我们才能通过正则表达式去验证pattern,
109 | 		 * 而对于select,radio,checkbox pattern显然是无效的
110 | 		 */
111 | 		if($field.is(type[0])) {
112 | 			//如果不匹配
113 | 			if(!fieldPattern.test(fieldValue)){
114 | 				if(fieldRequired){
115 | 					status.pattern=false;
116 | 				}else{
117 | 					if(fieldValue.length > 0){
118 | 						status.pattern = false;
119 | 					}
120 | 				}
121 | 			}
122 | 		}
123 | 
124 | 		//如果是data-conditional="name"函数验证,函数返回true或者是false
125 | 		if(fieldConditional !="undefined"){
126 | 			if($.isFunction(fieldConditional)){
127 | 				status.conditional=!!fieldConditional.call($field, fieldValue,options);
128 | 			}else{
129 | 				if(options.conditional.hasOwnProperty(fieldConditional) && !options.conditional[fieldConditional].call($field,fieldValue,options)){
130 | 					status.conditional=false;
131 | 				}
132 | 			}
133 | 		}
134 | 
135 |      
136 | 		//验证通过的信息所在对象
137 | 		
138 | 		log = errorTipFormat(fieldDescription.valid);
139 | 		if(!status.required) {
140 | 			log = errorTipFormat(fieldDescription.required);
141 | 			
142 | 		}else if(!status.pattern) {
143 | 			log = errorTipFormat(fieldDescription.pattern);
144 | 			
145 | 			
146 | 		} else if(!status.conditional) {
147 | 			log =errorTipFormat(fieldDescription.conditional);
148 | 		}
149 | 
150 | 		var $describedShowElem=$('[id="' + fieldDescribedby +'"]');
151 | 		//如果找打提示的容器，是第二种类型的验证
152 | 		if($describedShowElem.length > 0 && options.type==2){
153 | 			//如果是change 或者是keyup 同时是第一次输入的时候就不要验证
154 | 			if((event.type=="keyup" || event.type=="change") && (!$describedShowElem.children().length || !$.trim($describedShowElem.text()))){
155 | 
156 | 			}else{					
157 | 				$describedShowElem.html(log || '');
158 | 				fieldValidTypeHand($field,status,options)
159 | 			}
160 | 		}
161 | 
162 | 		if(typeof(validation.each) == 'function') {
163 | 			validation.each.call($field, event, status, options);
164 | 		}
165 | 		options.eachField.call($field, event, status, options);
166 | 
167 | 		if(status.required && status.pattern && status.conditional) {	
168 | 			
169 | 			if(typeof(validation.valid) == 'function') {//二外拓展的
170 | 				validation.valid.call($field, event, status, options);
171 | 			}
172 | 			options.eachValidField.call($field, event, status, options);
173 | 		}else{//验证未通过
174 | 			if(!options.firstInvalid && options.firstInvalidFocus){
175 | 				options.firstInvalid=true;
176 | 				$field.focus();
177 | 			}
178 | 			if(options.type==1){
179 | 				fieldTooltip.show(log)
180 | 			}
181 | 			if(typeof(validation.invalid) == 'function') {
182 | 				validation.invalid.call($field, event, status, options);
183 | 			}
184 | 			options.eachInvalidField.call($field, event, status, options);	
185 | 		}
186 | 		
187 | 	/**
188 | 	 * 如果是data-describedby="elemId"验证信息要显示的地方，类型3的验证:
189 | 		 * 		第一元素获取焦点，keyUp的时候要一直验证，如果正确那么错误信息就隐藏，如果不正确，那么错误
190 | 		 * 		提示信息要根据状态而改变,对于与验证通过，那么可以通过eachInvalid来让用户自定义，而无需要
191 | 		 * 		在插件中写它的操作方式
192 | 		 */
193 | 		return status;
194 | 	};
195 | 	$.extend($,{
196 | 		mvalidateExtend:function(options){
197 | 			return $.extend(extend, options);	
198 | 		},
199 | 		mvalidateTip:function(text){
200 | 			var txt=$.fn.mvalidate.errorTipFormat(text);
201 | 			fieldTooltip.show(txt)
202 | 		}
203 | 	});
204 | 
205 | 
206 | 
207 | 	
208 | 	
209 | 	$.fn.mvalidate=function(options){
210 | 		var defaults={
211 | 			type:1,
212 | 			validateInSubmit:true,
213 | 			sendForm:true,
214 | 			onKeyup:false,
215 | 			onChange:true,
216 | 			firstInvalidFocus:true,//第一个未通过验证的表单是否获得交代呢
217 | 			conditional:{},
218 | 			descriptions:{},
219 | 			eachField : $.noop,
220 | 			eachValidField:$.noop,
221 | 			eachInvalidField : $.noop,
222 | 			valid:$.noop,
223 | 			invalid:$.noop,
224 | 			namespace:"mvalidate"
225 | 		},
226 | 		opts=$.extend(true,defaults,options),
227 | 		flag,
228 | 		namespace=opts.namespace;
229 | 
230 | 		opts.type=Number(opts.type);
231 | 		opts.firstInvalid=false;
232 | 		flag=opts.type==1 ? false : true;
233 | 		return this.mvalidateDestroy().each(function(event) {
234 | 			
235 | 			var $form=$(this),
236 | 				$fields;//存放当前表单下的所有元素;
237 | 			if(!$form.is("form")) return;
238 | 			opts.$form=$form;
239 | 			$form.data(name,{"options":opts});
240 | 			$fields=$form.find(allTypes);
241 | 			
242 | 			//
243 | 			if(flag && opts.onKeyup){
244 | 				$fields.filter(type[0]).each(function() {
245 | 
246 | 					$(this).on("keyup."+namespace,function(event){
247 | 						validateField.call(this,event,opts)
248 | 					})
249 | 				});
250 | 			}
251 | 
252 | 			if(flag && opts.onChange){
253 | 				$fields.each(function() {
254 | 					var $this=$(this);
255 | 					if($this.is(type[1]+ ',' + type[2])){
256 | 						$(this).on('change.' + namespace, function(event) {
257 | 							validateField.call(this, event, opts);
258 | 						})
259 | 					}	
260 | 				})
261 | 			}
262 | 
263 | 			//如果需要验证的时候,在提交表单的时候对所有的字段进行验证
264 | 			if(opts.validateInSubmit){
265 | 				$form.on("submit."+namespace,function(event){
266 | 					var formValid = true;
267 | 					opts.firstInvalid=false;
268 | 					$fields.each(function() {
269 | 						var status=validateField.call(this,event,opts);
270 | 						if(!status.pattern || !status.conditional || !status.required) {
271 | 							formValid = false;
272 | 						}
273 | 					});
274 | 					
275 | 					if(formValid){
276 | 						if(!opts.sendForm){
277 | 							event.preventDefault();
278 | 						}
279 | 						if($.isFunction(opts.valid)){
280 | 							opts.valid.call($form,event,opts);
281 | 						}
282 | 					//验证没有通过,禁用提交事件,以及绑定在这个elem上的其他事件	
283 | 					}else{
284 | 						event.preventDefault();
285 | 						event.stopImmediatePropagation();
286 | 						if($.isFunction(opts.invalid)) {
287 | 							opts.invalid.call($form,event,opts)
288 | 						}
289 | 					}
290 | 					
291 | 				})
292 | 			}
293 | 		})
294 | 	};
295 | 	$.fn.mvalidateDestroy=function(){
296 | 		var $form=$(this),$fields,namespace="mvalidate",
297 |             dataValidate=$form.data(namespace);
298 |             
299 |         if(!dataValidate){
300 |             return $form;
301 |         }
302 | 		if($form.is('form') && $.isPlainObject(dataValidate) && typeof(dataValidate.options.nameSpace) == 'string') {
303 | 			$fields = $form.removeData(name).find(allTypes);
304 | 			$fields.off('.' + dataValidate.options.nameSpace);
305 | 		}	
306 | 		return $form;
307 | 	};
308 | 	$.fn.mvalidate.errorTipFormat=function(text){
309 | 		return '<div class="zvalid-resultformat">'+text+'</div>';
310 | 	}
311 | 
312 | 
313 | })


--------------------------------------------------------------------------------
/demo/js/zepto-mvalidate.js:
--------------------------------------------------------------------------------
  1 | (function (factory) {
  2 | 	if (typeof define === 'function' && define.amd ) {
  3 | 		define(['Zepto'], function(zepto){
  4 | 			// 返回构造函数
  5 | 			factory(zepto); // 初始化插件
  6 | 		});
  7 | 	}else if(typeof define === 'function' && define.cmd){
  8 | 		define(['Zepto'], function(require,exports,moudles){
  9 | 			factory(require('Zepto')); // 初始化插件
 10 | 		})
 11 | 	}else{
 12 | 		factory(Zepto);
 13 | 	}
 14 | })(function($){
 15 | 	var type = ['input:not([type]),input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="file"],input[type="hidden"],input[type="month"],input[type="number"],input[type="password"],input[type="range"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],textarea', 'select', 'input[type="checkbox"],input[type="radio"]'],
 16 | 		allTypes=type.join(","),
 17 | 		extend={};
 18 | 	var fieldValidTypeHand=function($field,status,options){
 19 | 				if($field.prop("type")=="radio" || $field.prop("type")=="checkbox"){
 20 | 					var $fields=options.$form.find('[name="'+$field.prop('name')+'"]');
 21 | 
 22 | 					if($fields.filter(":checked").length > 0){
 23 | 						$fields.removeClass('field-invalid')
 24 | 					}else{
 25 | 						$fields.addClass('field-invalid')
 26 | 					}
 27 | 				}else{
 28 | 					if(status.required && status.pattern && status.conditional) {
 29 | 						$field.removeClass('field-invalid');
 30 | 					}else{
 31 | 						$field.addClass('field-invalid');
 32 | 					}
 33 | 				}
 34 | 	};
 35 | 	var fieldTooltip=(function(){
 36 | 			var instance=null;
 37 | 				function show(text){
 38 | 					if(!instance){
 39 | 						var $container=$('<div class="field-tooltipWrap"><div class="field-tooltipInner"><div class="field-tooltip fieldTipBounceIn">'+text+'</div></div></div>');
 40 | 		    			$container.appendTo($("body"));
 41 | 		    			instance=true;
 42 | 		    			setTimeout(function(){
 43 | 							$container.remove();
 44 | 							instance=false;
 45 | 						},1500)
 46 | 					}
 47 | 				}
 48 | 
 49 | 			return {
 50 | 				show:show
 51 | 			}
 52 | 	})();
 53 | 	var validateField=function(event,options){
 54 | 		var $field=$(this),
 55 | 			status={
 56 | 				required:true,
 57 | 				conditional:true,
 58 | 				pattern:true
 59 | 			},
 60 | 			log,//验证提示信息存储变量
 61 | 
 62 | 			errorTipFormat=$.fn.mvalidate.errorTipFormat,//错误信息输出的格式化
 63 | 
 64 | 			fieldValue =$.trim($field.val()) || "",
 65 | 
 66 | 		    //*****获取当前字段的data-validate
 67 | 			fieldValidate=$field.attr("data-validate"),
 68 | 			validation=(fieldValidate != undefined) ? extend[fieldValidate]:{},
 69 | 			//*****获取当前字段的data-required
 70 | 			fieldRequired=$field.attr("data-required"),
 71 | 			//*****获取当前字段的data-pattern
 72 | 			fieldPattern = ($field.attr('data-pattern') || ($.type(validation.pattern) == 'regexp' ? validation.pattern : /(?:)/)),
 73 | 
 74 | 
 75 | 			//*****获取当前字段的data-conditional
 76 | 			fieldConditional=$field.attr("data-conditional") || validation.conditional,
 77 | 			//*****获取当前字段的data-description
 78 | 			fieldDescription=$field.attr("data-descriptions") || validation.descriptions,
 79 | 			//*****获取当前字段的data-describedby
 80 | 			fieldDescribedby=$field.attr("data-describedby") || validation.describedby;
 81 | 
 82 | 			fieldDescription = $.isPlainObject(fieldDescription) ? fieldDescription : (options.descriptions[fieldDescription] || {});
 83 | 			fieldRequired=fieldRequired !='' ? (fieldRequired || !!validation.required ) : true;
 84 | 			if($.type(fieldPattern) != 'regexp') {
 85 | 				fieldPattern=RegExp(fieldPattern);
 86 | 			}
 87 | 
 88 | 		//如果是必填验证,那么就要判断是什么类型的表单
 89 | 		if(fieldRequired) {
 90 | 			//如果是那种可以通过val()来判断的
 91 | 			if($field.is(type[0] + ',' + type[1])) {
 92 | 				if(!fieldValue.length > 0){
 93 | 					status.required = false;
 94 | 				}
 95 | 			//如果是raido和checkbox,通过name和checked来判断
 96 | 			}else if($field.is(type[2])){
 97 | 				if($field.is('[name]')) {
 98 | 					if(options.$form.find('[name="'+$field.prop('name')+'"]:checked').length==0){
 99 | 						status.required = false;
100 | 					}
101 | 				}else{
102 | 					status.required = field.is(':checked');
103 | 				}
104 | 			}
105 | 		}
106 | 		/**如果是正则验证
107 | 		 * 只有那些类似type=text的文本框我们才能通过正则表达式去验证pattern,
108 | 		 * 而对于select,radio,checkbox pattern显然是无效的
109 | 		 */
110 | 		if($field.is(type[0])) {
111 | 			//如果不匹配
112 | 			if(!fieldPattern.test(fieldValue)){
113 | 				if(fieldRequired){
114 | 					status.pattern=false;
115 | 				}else{
116 | 					if(fieldValue.length > 0){
117 | 						status.pattern = false;
118 | 					}
119 | 				}
120 | 			}
121 | 		}
122 | 
123 | 		//如果是data-conditional="name"函数验证,函数返回true或者是false
124 | 		if(fieldConditional !="undefined"){
125 | 			if($.isFunction(fieldConditional)){
126 | 				status.conditional=!!fieldConditional.call($field, fieldValue,options);
127 | 			}else{
128 | 				if(options.conditional.hasOwnProperty(fieldConditional) && !options.conditional[fieldConditional].call($field,fieldValue,options)){
129 | 					status.conditional=false;
130 | 				}
131 | 			}
132 | 		}
133 | 
134 | 
135 | 		//验证通过的信息所在对象
136 | 
137 | 		log = errorTipFormat(fieldDescription.valid);
138 | 		if(!status.required) {
139 | 			log = errorTipFormat(fieldDescription.required);
140 | 
141 | 		}else if(!status.pattern) {
142 | 			log = errorTipFormat(fieldDescription.pattern);
143 | 
144 | 
145 | 		} else if(!status.conditional) {
146 | 			log =errorTipFormat(fieldDescription.conditional);
147 | 		}
148 | 
149 | 		var $describedShowElem=$('[id="' + fieldDescribedby +'"]');
150 | 		//如果找打提示的容器，是第二种类型的验证
151 | 		if($describedShowElem.length > 0 && options.type==2){
152 | 			//如果是change 或者是keyup 同时是第一次输入的时候就不要验证
153 | 			if((event.type=="keyup" || event.type=="change") && (!$describedShowElem.children().length || !$.trim($describedShowElem.text()))){
154 | 
155 | 			}else{
156 | 				$describedShowElem.html(log || '');
157 | 				fieldValidTypeHand($field,status,options)
158 | 			}
159 | 		}
160 | 
161 | 		if(typeof(validation.each) == 'function') {
162 | 			validation.each.call($field, event, status, options);
163 | 		}
164 | 
165 | 		typeof(options.eachField) === 'function' && options.eachField.call($field, event, status, options);
166 | 
167 | 		if(status.required && status.pattern && status.conditional) {
168 | 
169 | 			if(typeof(validation.valid) == 'function') {//二外拓展的
170 | 				validation.valid.call($field, event, status, options);
171 | 			}
172 | 			options.eachValidField.call($field, event, status, options);
173 | 		}else{//验证未通过
174 | 			if(!options.firstInvalid && options.firstInvalidFocus){
175 | 				options.firstInvalid=true;
176 | 				$field.focus();
177 | 			}
178 | 			if(options.type==1){
179 | 				fieldTooltip.show(log)
180 | 			}
181 | 			if(typeof(validation.invalid) == 'function') {
182 | 				validation.invalid.call($field, event, status, options);
183 | 			}
184 | 			typeof(options.eachInvalidField) === 'function' && options.eachInvalidField.call($field, event, status, options);
185 | 		}
186 | 
187 | 	/**
188 | 	 * 如果是data-describedby="elemId"验证信息要显示的地方，类型3的验证:
189 | 		 * 		第一元素获取焦点，keyUp的时候要一直验证，如果正确那么错误信息就隐藏，如果不正确，那么错误
190 | 		 * 		提示信息要根据状态而改变,对于与验证通过，那么可以通过eachInvalid来让用户自定义，而无需要
191 | 		 * 		在插件中写它的操作方式
192 | 		 */
193 | 		return status;
194 | 	};
195 | 	$.extend($,{
196 | 		mvalidateExtend:function(options){
197 | 			return $.extend(extend, options);
198 | 		}
199 | 	});
200 | 
201 | 
202 | 
203 | 	$.fn.mvalidate=function(options){
204 | 		var defaults={
205 | 			type:1,
206 | 			validateInSubmit:true,
207 | 			sendForm:true,
208 | 			onKeyup:false,
209 | 			onChange:true,
210 | 			firstInvalidFocus:true,//第一个未通过验证的表单是否获得交代呢
211 | 			conditional:{},
212 | 			descriptions:{},
213 | 			eachField : $.noop,
214 | 			eachValidField:$.noop,
215 | 			eachInvalidField : $.noop,
216 | 			valid:$.noop,
217 | 			invalid:$.noop,
218 | 			namespace:"mvalidate"
219 | 		},
220 | 		opts=$.extend(true,defaults,options),
221 | 		flag,
222 | 		namespace=opts.namespace;
223 | 
224 | 		opts.type=Number(opts.type);
225 | 		opts.firstInvalid=false;
226 | 		flag=opts.type==1 ? false : true;
227 | 		return this.mvalidateDestroy().each(function(event) {
228 | 
229 | 			var $form=$(this),
230 | 				$fields;//存放当前表单下的所有元素;
231 | 			if(!$form.is("form")) return;
232 | 			opts.$form=$form;
233 | 			$form.data(namespace,{"options":opts});
234 | 			$fields=$form.find(allTypes);
235 | 
236 | 			//
237 | 			if(flag && opts.onKeyup){
238 | 				$fields.filter(type[0]).each(function() {
239 | 
240 | 					$(this).on("keyup."+namespace,function(event){
241 | 						validateField.call(this,event,opts)
242 | 					})
243 | 				});
244 | 			}
245 | 
246 | 			if(flag && opts.onChange){
247 | 				$fields.each(function() {
248 | 					var $this=$(this);
249 | 					if($this.is(type[1]+ ',' + type[2])){
250 | 						$(this).on('change.' + namespace, function(event) {
251 | 							validateField.call(this, event, opts);
252 | 						})
253 | 					}
254 | 				})
255 | 			}
256 | 
257 | 			//如果需要验证的时候,在提交表单的时候对所有的字段进行验证
258 | 			if(opts.validateInSubmit){
259 | 				$form.on("submit."+namespace,function(event){
260 | 					var formValid = true;
261 | 					opts.firstInvalid=false;
262 | 					$fields.each(function() {
263 | 						var status=validateField.call(this,event,opts);
264 | 						if(!status.pattern || !status.conditional || !status.required) {
265 | 							formValid = false;
266 | 						}
267 | 					});
268 | 
269 | 					if(formValid){
270 | 						if(!opts.sendForm){
271 | 							event.preventDefault();
272 | 						}
273 | 						if($.isFunction(opts.valid)){
274 | 							opts.valid.call($form,event,opts);
275 | 						}
276 | 					//验证没有通过,禁用提交事件,以及绑定在这个elem上的其他事件
277 | 					}else{
278 | 						event.preventDefault();
279 | 						event.stopImmediatePropagation();
280 | 						if($.isFunction(opts.invalid)) {
281 | 							opts.invalid.call($form,event,opts)
282 | 						}
283 | 					}
284 | 
285 | 				})
286 | 			}
287 | 		})
288 | 	};
289 | 	 $.fn.mvalidateDestroy=function(){
290 |         var $form=$(this),$fields,namespace="mvalidate",
291 |             dataValidate=$form.data(namespace);
292 |             
293 |         if(!dataValidate){
294 |             return $form;
295 |         }
296 |         if($form.is('form') && $.isPlainObject(dataValidate) && typeof(dataValidate.options.namespace) == 'string') {
297 |             $fields = $form.removeData(name).find(allTypes);
298 |             $fields.off('.' + dataValidate.options.namespace);
299 |         }   
300 |         return $form;
301 |     };
302 | 	$.fn.mvalidate.errorTipFormat=function(text){
303 | 		return '<div class="zvalid-resultformat">'+text+'</div>';
304 | 	}
305 | })
306 | 


--------------------------------------------------------------------------------
/demo/php/captcha.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 |    $image=imagecreatetruecolor(100,44);
 4 |    $bgcolor=imagecolorallocate($image,255,255,255);
 5 |    imagefill($image,0,0,$bgcolor);
 6 |    
 7 |   /* for($i=0;$i<4;$i++){
 8 | 	   $fontsize=10;
 9 | 	   $fontcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));
10 | 	   $fontcontent=rand(0,9);
11 | 	   
12 | 	   $x=($i*100/4)+rand(5,10);
13 | 	   $y=rand(5,10);
14 | 	   imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);   
15 |    }*/
16 |    //增加背景中的点点点的干扰
17 |    
18 |    $captch_code="";
19 |    for($i=0;$i<4;$i++){
20 | 	   $fontsize=12;
21 | 	   $fontcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));
22 | 	   $data='abcdefghigklmnopqrstuvwxyz123456789';
23 | 	   $fontcontent=substr($data,rand(0,strlen($data)),1); 
24 | 	   
25 | 	   $captch_code.=$fontcontent;
26 | 	   
27 | 	   $x=($i*100/4)+rand(5,10);
28 | 	   $y=rand(5,10);
29 | 	   imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);   
30 |    }
31 |    $_SESSION["authcode"]=$captch_code;
32 |    
33 |    for($i=0;$i<200;$i++){
34 | 	  $pointcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));
35 | 	  imagesetpixel($image,rand(1,99),rand(1,29),$pointcolor);
36 |    }
37 |    
38 |    for($i=0;$i<3;$i++){
39 | 	   $linecolor=imagecolorallocate($image,rand(80,220),rand(80,220),rand(80,220));   
40 |        imageline($image,rand(1,99),rand(1,29),rand(1,99),rand(1,29),$linecolor);
41 |    }
42 |    
43 |     
44 |    header("content-type:image/png");
45 |    
46 |    imagepng($image);
47 |    imagedestroy($image);
48 | ?>


--------------------------------------------------------------------------------
/demo/php/captchaAjax1.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 	session_start();
 3 | 	$session_authcode=$_SESSION["authcode"];
 4 | 	$user_authcode=strtolower($_REQUEST["captchaCode"]);
 5 | 	if($user_authcode==$session_authcode){
 6 | 		echo 1;   
 7 | 	}else{
 8 | 		echo 0;   
 9 | 	}   
10 |  ?>


--------------------------------------------------------------------------------
/demo/php/captchaAjax2.php:
--------------------------------------------------------------------------------
1 | <?php 
2 | 	session_start();
3 | 	$session_authcode=$_SESSION["authcode"];
4 | 	echo $session_authcode;   
5 |  ?>


--------------------------------------------------------------------------------
/demo/php/form.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 |    header("Content-type: text/html; charset=utf-8"); 
 4 |    if(isset($_REQUEST["authcode"])){
 5 | 	   session_start();
 6 | 	/*   echo $_REQUEST["authcode"]."<br/>";
 7 |  echo $_SESSION["authcode"];*/
 8 | 	   if(strtolower($_REQUEST["authcode"])==$_SESSION["authcode"]){
 9 | 		  echo "<p>输入正确！</p>";   
10 | 	   }else{
11 | 		  echo "<p>输入错误！</p>";   
12 | 	   }   
13 | 	   exit();
14 |     }
15 | ?>
16 | 
17 | <!doctype html>
18 | <html>
19 | <head>
20 | <meta charset="utf-8">
21 | <title>验证码</title>
22 | <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
23 | </head>
24 | 
25 | <body>
26 |    <form method="post" action="captchaAjax.php">
27 |       <div>
28 |          验证码图片：<img id="captcha_img" border="1" src="captcha.php?r=<?php echo rand();?>" width="100">
29 |          <a href="javascript:void(0)" id="btn1">看不清</a>
30 |       </div>
31 |       <div>请输入图片中的内容：<input type="text" name="authcode" value="" /></div>
32 |       <div><input type="submit" value="提交" id="subtn1" /></div>
33 |    </form>
34 | 
35 |    <script type="text/javascript">
36 |    $(function(){
37 |       $("#btn1").on("click",function(){
38 |          var src="./captcha.php?r='+Math.random()";
39 |          $("#captcha_img").attr("src",src)
40 |       });
41 | 
42 |       $("#subtn1").on("click",function(event){
43 |          event.preventDefault();
44 |          $.ajax({
45 |              
46 |          })
47 |       })
48 |    })
49 |    </script>
50 | </body>
51 | </html>
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 
81 | 
82 | 
83 | 
84 | 
85 | 
86 | 


--------------------------------------------------------------------------------
/demo/php/phoneCode.php:
--------------------------------------------------------------------------------
1 | <?php 
2 | 	$phone=$_POST["phonenumber"];
3 | 	echo "111111"
4 |  ?>


--------------------------------------------------------------------------------
/demo/valid-phonecode.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  7 |     <title>ZUI -表单验证控件</title>
  8 |     <link rel="stylesheet" type="text/css" href="css/reset.css">
  9 |     <link rel="stylesheet" type="text/css" href="css/common.css">
 10 |     <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
 11 |     <link rel="stylesheet" type="text/css" href="css/form.css">
 12 |     <link rel="stylesheet" type="text/css" href="css/button.css">
 13 |     <link rel="stylesheet" type="text/css" href="css/validate.css">
 14 |     <link rel="stylesheet" type="text/css" href="css/demo.css">
 15 |     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 16 |     <script type="text/javascript" src="js/jquery-mvalidate.js"></script>
 17 | </head>
 18 | 
 19 | <body class="demo-bgf2f2f2">
 20 |     <header class="zui-header">
 21 |         <i class="zicon-goback icon-fanhui" onClick="javascript :history.back(-1);"></i>
 22 |         <h1 class="title">表单验证控件</h1>
 23 |     </header>
 24 |     <div class="demo-hd-1 ml10 mr10">验证类型1</div>
 25 |     <div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
 26 |         <form class="zform zform-radius" action="https://www.wnworld.com" id="form1">
 27 |             <fieldset class="zform-fieldset">
 28 |                 <div class="zform-control">
 29 |                     <div class="control-field">
 30 |                         <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username">
 31 |                     </div>
 32 |                 </div>
 33 |                 <div class="zform-control zform-control-verifycode">
 34 |                     <div class="control-field" style="padding-right: 145px;">
 35 |                         <input type="text" class="field-text" data-required="true" placeholder="手机号码" id="telphone" data-pattern="^0?1[3|4|5|8][0-9]\d{8}$" data-descriptions="telphone">
 36 |                     </div>
 37 |                     <div class="control-verifycode" style="width: 130px">
 38 |                         <button class="zbtn zbtn-primary  zbtn-lg" id="btn-3" type="button">发送验证码</button>
 39 |                     </div>
 40 |                 </div>
 41 |                 <div class="zform-control">
 42 |                     <div class="control-field">
 43 |                         <input type="password" class="field-text" placeholder="请输入短信验证码" id="phoneyzm" data-required="true" data-descriptions="phoneyzm" data-conditional="phoneyzm">
 44 |                     </div>
 45 |                 </div>
 46 |             </fieldset>
 47 |             <input type="submit" id="x2" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">
 48 |         </form>
 49 |     </div>
 50 |     <script type="text/javascript">
 51 |     $(function() {
 52 | 
 53 |         var phoneYZM;
 54 |         $("#btn-3").on("click", function() {
 55 |             var phone = $.trim($("#telphone").val());
 56 |             if (!phone) {
 57 |                 $.mvalidateTip("请输入号码！");
 58 |                 return;
 59 |             } else if (!/^0?1[3|4|5|8]\d{9}$/.test(phone)) {
 60 |                 $.mvalidateTip("你输入的手机号码不正确！");
 61 |                 return;
 62 |             }
 63 |             $.ajax({
 64 |                 url: "php/phoneCode.php",
 65 |                 type: "post",
 66 |                 async: false,
 67 |                 data: {
 68 |                     phonenumber: phone
 69 |                 },
 70 |                 success: function(data) {
 71 |                     if (!!data) {
 72 |                         phoneYZM = data;
 73 |                         alert(phoneYZM)
 74 |                     }
 75 |                 }
 76 |             });
 77 | 
 78 |         });
 79 |         $("#form1").mvalidate({
 80 |             type: 1,
 81 |             onKeyup: true,
 82 |             sendForm: false,
 83 |             firstInvalidFocus: false,
 84 |             valid: function(event, options) {
 85 |                 //点击提交按钮时,表单通过验证触发函数
 86 |                 alert("验证通过！接下来可以做你想做的事情啦！");
 87 |                 event.preventDefault();
 88 |             },
 89 |             conditional: {
 90 |                 phoneyzm: function() {
 91 |                     return $("#phoneyzm").val() == phoneYZM;
 92 |                 }
 93 |             },
 94 |             descriptions: {
 95 |                 username: {
 96 |                     required: '请输入用户名'
 97 |                 },
 98 |                 telphone: {
 99 |                     required: '请输入手机号码',
100 |                     pattern: '你输入的手机格式不正确'
101 |                 },
102 |                 phoneyzm: {
103 |                     required: '请输入手机验证码',
104 |                     conditional: '您输入的手机短信验证码不正确'
105 |                 }
106 |             }
107 |         });
108 | 
109 | 
110 | 
111 | 
112 |     })
113 |     </script>
114 | </body>
115 | 
116 | </html>
117 | 


--------------------------------------------------------------------------------
/demo/validate-captcha1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6 | 	<title>ZUI -表单验证控件</title>
  7 | 	<link rel="stylesheet" type="text/css" href="css/reset.css">
  8 | 	<link rel="stylesheet" type="text/css" href="css/common.css">
  9 | 	<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
 10 |     <link rel="stylesheet" type="text/css" href="css/form.css">
 11 |     <link rel="stylesheet" type="text/css" href="css/button.css">
 12 | 	<link rel="stylesheet" type="text/css" href="css/validate.css">
 13 |     <link rel="stylesheet" type="text/css" href="css/demo.css">
 14 |     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 15 | 	<script type="text/javascript" src="js/jquery-mvalidate.js"></script>
 16 |     <!--<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.js"></script>
 17 |     <script type="text/javascript" src="js/zepto-mvalidate.js"></script>-->
 18 | 	
 19 | </head>
 20 | <body class="demo-bgf2f2f2">
 21 | 	<header class="zui-header">
 22 | 		<i class="zicon-goback icon-fanhui" onClick="javascript :history.back(-1);"></i>
 23 | 		<h1 class="title">表单验证控件</h1>
 24 | 	</header>
 25 | 	<div class="demo-hd-1 ml10 mr10">验证类型1</div>
 26 | 	<div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
 27 | 		<form class="zform zform-radius" action="http://www.wnworld.com" id="form1">
 28 |                 <fieldset class="zform-fieldset">
 29 |                     <div class="zform-control">
 30 |                         <div class="control-field">
 31 |                             <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username">
 32 |                         </div>     
 33 |                     </div>
 34 |                     <div class="zform-control">
 35 |                         <div class="control-field">
 36 |                             <input type="password" id="pwd" class="field-text" placeholder="请输入密码" data-required="true" data-descriptions="password">
 37 |                         </div>     
 38 |                     </div>
 39 |                     <div class="zform-control">
 40 |                         <div class="control-field">
 41 |                             <input type="password" id="confirmpwd" class="field-text"  placeholder="再次输入密码确认" data-required="true" data-descriptions="confirmpassword" data-conditional="confirmpwd">
 42 |                         </div>
 43 |                     </div>
 44 |                     <div class="zform-control">
 45 |                         <div class="control-field">
 46 |                             <input type="text" class="field-text" placeholder="请输入手机号码" data-validate="phone" data-describedby="phone-description">
 47 |                         </div>
 48 |                     </div>
 49 |                     <div class="zform-control">
 50 |                         <div class="control-field">
 51 |                             <input type="text" class="field-text" placeholder="请输入年龄" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age">
 52 |                         </div>
 53 |                     </div>               
 54 |                     <div class="zform-control">
 55 |                         <div class="control-field">
 56 |                             <select class="field-select" data-required="true" data-descriptions="address" >
 57 |                                 <option value="" selected disabled>请选择地址</option>
 58 |                                 <option value="1">浙江省</option>
 59 |                                 <option value="2">海南省</option>
 60 |                             </select>
 61 |                         </div>        
 62 |                     </div>
 63 |                     <div class="zform-control">
 64 |                         <label class="control-label control-label-area">个人简介：</label>
 65 |                         <div class="control-field">
 66 |                             <textarea class="field-area" rows="4" data-required="true" data-descriptions="intro" ></textarea>
 67 |                         </div>
 68 |                     </div>
 69 |                     <div class="zform-control zform-control-radiocheck">
 70 |                         <label class="control-label">兴趣爱好：</label>
 71 |                         <div class="control-field">
 72 |                             <label>
 73 |                                 <input type="checkbox"  name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">篮球
 74 |                             </label>    
 75 |                             <label>
 76 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">足球
 77 |                             </label>    
 78 |                             <label>
 79 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">排球
 80 |                             </label>
 81 |                             <label>
 82 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">乒乓球
 83 |                             </label>    
 84 |                         </div>
 85 |                     </div>
 86 |                     <div class="zform-control zform-control-radiocheck">
 87 |                         <label class="control-label">性别：</label>
 88 |                         <div class="control-field">
 89 |                             <label>
 90 |                                 <input type="radio" name="sex" class="field-radio  zicon" data-required="true"  data-descriptions="sex">男
 91 |                             </label>    
 92 |                             <label>
 93 |                                 <input type="radio"  name="sex" class="field-radio  zicon" data-required="true" data-descriptions="sex">女
 94 |                             </label>    
 95 |                         </div>
 96 |                     </div>
 97 |                     <div class="zform-control clearfix">
 98 |                         <label class="control-label control-label-area fl line-form">验证码：</label>
 99 |                         <div class="control-field fl">
100 |                             <input type="text" class="field-text" data-required="true" data-conditional="captcha" data-descriptions="captchacode">
101 |                         </div>
102 |                         <div class="fl">
103 |                             <img id="captcha_img" border="1" src="php/captcha.php?r=<?php echo rand();?>" width="100">
104 |                             <a href="javascript:void(0)" id="captcha_btn" class="line-form">看不清</a>
105 |                         </div>
106 |                     </div>
107 |                 </fieldset>
108 |                 <input type="submit" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">    
109 |         </form>
110 | 	</div>
111 | 	
112 | 	
113 | 
114 | 	
115 | 	<script type="text/javascript">
116 |    $(function(){
117 |         $("#captcha_btn").on("click",function(){
118 |             var src='php/captcha.php?r=Math.random()';
119 |             $("#captcha_img").attr("src",src);
120 |         });
121 |         $.mvalidateExtend({
122 |             phone:{
123 |                 required : true,   
124 |                 pattern : /^0?1[3|4|5|8][0-9]\d{8}$/,
125 |                 each:function(){                  
126 |                 },
127 |                 descriptions:{
128 |                     required : '<div class="field-invalidmsg">请输入手机号码</div>',
129 |                     pattern : '<div class="field-invalidmsg">手机号码格式不正确</div>',
130 |                     valid : '<div class="field-validmsg">正确</div>'
131 |                 }
132 |             }
133 |         });
134 |         $("#form1").mvalidate({
135 |             type:1,
136 |             onKeyup:true,
137 |             sendForm:true,
138 |             firstInvalidFocus:false,
139 |             valid:function(event,options){
140 |                 //点击提交按钮时,表单通过验证触发函数
141 |                 alert("验证通过！接下来可以做你想做的事情啦！");
142 |                  event.preventDefault();
143 |             },
144 |             invalid:function(event, status, options){
145 |                 //点击提交按钮时,表单未通过验证触发函数
146 |             },
147 |             eachField:function(event,status,options){
148 |                 //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
149 |             },
150 |             eachValidField:function(val){},
151 |             eachInvalidField:function(event, status, options){},
152 |             conditional:{
153 |                 confirmpwd:function(val){
154 |                     return val==$("#pwd").val();
155 |                 },
156 |                 captcha:function(val){
157 |                     if(!val && !val.length) return false;
158 |                     var flag
159 |                     $.ajax({
160 |                         url:"php/captchaAjax1.php",
161 |                         type:"post",
162 |                         async:false,
163 |                         data:{captchaCode:val},
164 |                         success:function(data){
165 |                             flag=(data==0) ? false : true;
166 |                             if(!flag){
167 |                                  $("#captcha_btn").click();
168 |                             }
169 |                         }
170 |                     });
171 |                     return flag;
172 |                 }
173 |             },
174 |             descriptions:{
175 |                 username:{
176 |                     required : '请输入用户名'
177 |                 },
178 |                 password:{
179 |                      required : '请输入密码'
180 |                 },
181 |                 confirmpassword:{
182 |                     required : '请再次输入密码',
183 |                     conditional : '两次密码不一样'
184 |                 },
185 |                 age : {
186 |                     required : '请输入年龄',
187 |                     pattern : '年龄格式不正确'
188 |                 },
189 |                 address:{
190 |                     required : '请选择地址'
191 |                 },
192 |                 intro:{
193 |                     required : '请输入个人介绍'
194 |                 },
195 |                 favourite:{
196 |                     required : '请选择兴趣爱好'
197 |                 },
198 |                 sex:{
199 |                     required : '请选择性别'
200 |                 },
201 |                 captchacode:{
202 |                     required : '请输入验证码',
203 |                     conditional : '您输入的验证码不正确'
204 |                 },
205 |             }
206 |         });
207 |    })
208 | </script>
209 | </body>
210 | </html>


--------------------------------------------------------------------------------
/demo/validate-captcha2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6 | 	<title>ZUI -表单验证控件</title>
  7 | 	
  8 | 	<link rel="stylesheet" type="text/css" href="css/reset.css">
  9 | 	<link rel="stylesheet" type="text/css" href="css/common.css">
 10 | 	<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
 11 |     <link rel="stylesheet" type="text/css" href="css/form.css">
 12 |     <link rel="stylesheet" type="text/css" href="css/button.css">
 13 | 	<link rel="stylesheet" type="text/css" href="css/validate.css">
 14 |     <link rel="stylesheet" type="text/css" href="css/demo.css">
 15 |     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 16 | 	<script type="text/javascript" src="js/jquery-mvalidate.js"></script>
 17 | 
 18 |     <!--<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.js"></script>
 19 |     <script type="text/javascript" src="js/zepto-mvalidate.js"></script>-->
 20 | 	
 21 | </head>
 22 | <body class="demo-bgf2f2f2">
 23 | 	<header class="zui-header">
 24 | 		<i class="zicon-goback icon-fanhui" onClick="javascript :history.back(-1);"></i>
 25 | 		<h1 class="title">表单验证控件</h1>
 26 | 	</header>
 27 | 	
 28 | 	<div class="demo-hd-1 ml10 mr10">验证类型2</div>
 29 | 	<div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
 30 | 		<form class="zform zform-radius" action="https://www.baidu.com" id="form2">
 31 |                 <fieldset class="zform-fieldset">       
 32 |                     <div class="zform-control">
 33 |                         <div class="control-field">
 34 |                             <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username" data-describedby="username-description">
 35 |                         </div>
 36 |                         <div id="username-description"></div>     
 37 |                     </div>
 38 |                     <div class="zform-control">
 39 |                         <div class="control-field">
 40 |                             <input type="password" id="pwd2" class="field-text" placeholder="请输入密码" data-required="true" data-descriptions="password" data-describedby="password-description"  data-conditional="pwd2">
 41 |                         </div> 
 42 |                         <div id="password-description"></div>    
 43 |                     </div>
 44 |                     <div class="zform-control">
 45 |                         <div class="control-field">
 46 |                             <input type="password" id="confirmpwd2" class="field-text"  placeholder="再次输入密码确认" data-required="true" data-descriptions="confirmpassword" data-conditional="confirmpwd2" data-describedby="confirmpassword-description">
 47 |                         </div>
 48 |                         <div id="confirmpassword-description"></div>
 49 |                     </div>
 50 |                     <div class="zform-control">
 51 |                         <div class="control-field">
 52 |                             <input type="text" class="field-text" placeholder="请输入手机号码" data-validate="phone" data-describedby="phone-description">
 53 |                         </div>
 54 |                         <div id="phone-description"></div>
 55 |                     </div>
 56 |                     <div class="zform-control">
 57 |                         <div class="control-field">
 58 |                             <input type="text" class="field-text" placeholder="请输入年龄" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age" data-describedby="age-description">
 59 |                         </div>
 60 |                         <div id="age-description"></div>
 61 |                     </div>
 62 |                     <div class="zform-control">
 63 |                         <div class="control-field">
 64 |                             <select class="field-select" data-required="true" data-descriptions="address" data-describedby="address-description" placeholder="请选择省事">
 65 |                                 <option value="" selected disabled>请选择地址</option>
 66 |                                 <option value="1">浙江省</option>
 67 |                                 <option value="2">海南省</option>
 68 |                             </select>
 69 |                         </div>
 70 |                         <div id="address-description"></div>
 71 |                     </div>
 72 |                     <div class="zform-control">
 73 |                         
 74 |                         <div class="control-field">
 75 |                             <textarea class="field-area" placeholder="个人简介" rows="4" data-required="true" data-descriptions="intro" data-describedby="intro-description"></textarea>
 76 |                         </div>
 77 |                         <div id="intro-description"></div>
 78 |                     </div>
 79 |                     <div class="zform-control zform-control-radiocheck">
 80 |                         <label class="control-label">兴趣爱好：</label>
 81 |                         <div class="control-field">
 82 |                             <label>
 83 |                                 <input type="checkbox"  name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">篮球
 84 |                             </label>    
 85 |                             <label>
 86 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">足球
 87 |                             </label>    
 88 |                             <label>
 89 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">排球
 90 |                             </label>
 91 |                             <label>
 92 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">乒乓球
 93 |                             </label>    
 94 |                         </div>
 95 |                         <div id="favourite-description"></div>
 96 |                     </div>
 97 |                     <div class="zform-control zform-control-radiocheck">
 98 |                         <label class="control-label">性别：</label>
 99 |                         <div class="control-field">
100 |                             <label>
101 |                                 <input type="radio" name="sex" class="field-radio  zicon" data-required="true"  data-descriptions="sex" data-describedby="sex-description">男
102 |                             </label>    
103 |                             <label>
104 |                                 <input type="radio"  name="sex" class="field-radio  zicon" data-required="true" data-descriptions="sex" data-describedby="sex-description">女
105 |                             </label>    
106 |                         </div>
107 |                         <div id="sex-description"></div>
108 |                     </div>
109 |                     <div class="zform-control clearfix">
110 |                         <label class="control-label control-label-area fl line-form">验证码：</label>
111 |                         <div class="control-field fl">
112 |                             <input type="text" name="captchaCode" class="field-text" data-required="true" data-descriptions="captchacode"  data-describedby="captchacode-description" data-conditional="captcha" id="J_captchaCode">
113 |                         </div>
114 |                         <div class="fl">
115 |                             <img id="captcha_img" border="1" src="php/captcha.php?r=<?php echo rand();?>" width="100">
116 |                             <a href="javascript:void(0)" id="captcha_btn" class="line-form">看不清</a>
117 |                         </div>
118 |                         <div id="captchacode-description" class="clearboth"></div>
119 |                     </div>
120 |                 </fieldset>
121 |                 <input type="submit" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">   
122 |         </form>
123 | 	</div>
124 | 
125 | 	
126 | 	<script type="text/javascript">
127 |    $(function(){
128 |         var captchaCodeVal;
129 |         $("#captcha_btn").on("click",function(){
130 |             var src='php/captcha.php?r=Math.random()';
131 |             $("#captcha_img").attr("src",src);
132 |             $.ajax({
133 |                 url:"php/captchaAjax2.php",
134 |                 type:"get",
135 |                 success:function(data){
136 |                     captchaCodeVal=data;
137 |                 }
138 |             });
139 |             $("#J_captchaCode").val("").trigger("keyup");
140 | 
141 |         }).trigger('click');
142 | 
143 |         
144 |         $.mvalidateExtend({
145 |             phone:{
146 |                 required : true,   
147 |                 pattern : /^0?1[3|4|5|8][0-9]\d{8}$/,
148 |                 each:function(){  
149 |                 },
150 |                 descriptions:{
151 |                     required : '<div class="field-invalidmsg">请输入手机号码</div>',
152 |                     pattern : '<div class="field-invalidmsg">您输入的手机号码格式不正确</div>',
153 |                     valid : '<div class="field-validmsg">正确</div>'
154 |                 }
155 |             }
156 |         });
157 |        
158 |         $("#form2").mvalidate({
159 |             type:2,
160 |             onKeyup:true,
161 |             sendForm:true,
162 |             firstInvalidFocus:true,
163 |             eachField:function(){
164 | 
165 |             },
166 |             valid:function(){
167 |                 
168 |             },
169 |             invalid:function(){
170 |                
171 |             },
172 |             eachValidField:function(){
173 |               
174 |             },
175 |             eachInvalidField:function(){
176 |                
177 |               
178 |             },
179 |             conditional:{
180 |                 pwd2:function(val,options){
181 |                     $("#confirmpwd2").trigger("keyup."+options.namespace);
182 |                     return true;
183 |                 },
184 |                 confirmpwd2:function(val){
185 |                     var flag;
186 |                     return (val==$("#pwd2").val()) ? true :false; 
187 |                 },
188 |                 captcha:function(val){
189 |                     
190 |                     return captchaCodeVal==val;
191 |                 }
192 |                 
193 | 
194 |             },
195 |             descriptions:{
196 |                 username:{
197 |                     required : '<div class="field-invalidmsg">请输入用户名</div>',
198 |                     valid : '<div class="field-validmsg">验证通过</div>'
199 |                 },
200 |                 password:{
201 |                      required : '<div class="field-invalidmsg">请输入密码</div>',
202 |                      conditional : '<div class="field-validmsg">验证通过</div>',
203 |                      valid : '<div class="field-validmsg">验证通过</div>'
204 |                 },
205 |                 confirmpassword:{
206 |                     required : '<div class="field-invalidmsg">请再次输入密码</div>',
207 |                     conditional : '<div class="field-invalidmsg">两次密码不一样</div>',
208 |                     valid : '<div class="field-validmsg">验证通过</div>'
209 |                 },
210 |                 age : {
211 |                     required : '<div class="field-invalidmsg">请输入年龄</div>',
212 |                     pattern : '<div class="field-invalidmsg">你输入的格式不正确</div>',
213 |                     valid : '<div class="field-validmsg">验证通过</div>'
214 |                 },
215 |                 address:{
216 |                     required : '<div class="field-invalidmsg">请选择地址</div>',
217 |                     valid : '<div class="field-validmsg">验证通过</div>'
218 |                 },
219 |                 intro:{
220 |                     required : '<div class="field-invalidmsg">请输入个人介绍</div>',
221 |                     valid : '<div class="field-validmsg">验证通过</div>'
222 |                 },
223 |                 favourite:{
224 |                     required : '<div class="field-invalidmsg">请选择个人爱好</div>',
225 |                     valid : '<div class="field-validmsg">验证通过</div>'
226 |                 },
227 |                 sex:{
228 |                     required : '<div class="field-invalidmsg">请输入性别</div>',
229 |                     valid : '<div class="field-validmsg">验证通过</div>'
230 |                 },
231 |                 captchacode:{
232 |                     required : '<div class="field-invalidmsg">请输入验证码</div>',
233 |                     conditional:'<div class="field-invalidmsg">您输入的验证码不正确</div>',
234 |                     valid : '<div class="field-validmsg">验证通过</div>'
235 |                 }
236 |             }
237 |         });
238 |    })
239 | </script>
240 | </body>
241 | </html>


--------------------------------------------------------------------------------
/demo/zepto-validate.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 |     <meta charset="UTF-8">
  4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  5 |     <title>ZUI -表单验证控件</title>
  6 |     <link rel="stylesheet" type="text/css" href="css/reset.css">
  7 |     <link rel="stylesheet" type="text/css" href="css/common.css">
  8 |     <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
  9 |     <link rel="stylesheet" type="text/css" href="css/form.css">
 10 |     <link rel="stylesheet" type="text/css" href="css/button.css">
 11 |     <link rel="stylesheet" type="text/css" href="css/validate.css">
 12 |     <link rel="stylesheet" type="text/css" href="css/demo.css">
 13 |     <script src="libs/zepto.all.js"></script>
 14 |     <script type="text/javascript" src="js/zepto-mvalidate.js"></script>
 15 |     
 16 | </head>
 17 | <body class="demo-bgf2f2f2">
 18 |     <header class="zui-header">
 19 |         <i class="zicon-goback icon-fanhui" onClick="javascript :history.back(-1);"></i>
 20 |         <h1 class="title">表单验证控件</h1>
 21 |     </header>
 22 |     <div class="demo-hd-1 ml10 mr10">验证类型1</div>
 23 |     <div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
 24 |         <form class="zform zform-radius" action="https://www.wnworld.com" id="form1">
 25 |                 <fieldset class="zform-fieldset">
 26 |                     <div class="zform-control">
 27 |                         <div class="control-field">
 28 |                             <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username">
 29 |                         </div>     
 30 |                     </div>
 31 |                     <div class="zform-control">
 32 |                         <div class="control-field">
 33 |                             <input type="password" id="pwd" class="field-text" placeholder="请输入密码" data-required="true" data-descriptions="password">
 34 |                         </div>     
 35 |                     </div>
 36 |                     <div class="zform-control">
 37 |                         <div class="control-field">
 38 |                             <input type="password" id="confirmpwd" class="field-text"  placeholder="再次输入密码确认" data-required="true" data-descriptions="confirmpassword" data-conditional="confirmpwd">
 39 |                         </div>
 40 |                     </div>
 41 |                     <div class="zform-control">
 42 |                         <div class="control-field">
 43 |                             <input type="text" class="field-text" placeholder="请输入手机号码" data-validate="phone" data-describedby="phone-description">
 44 |                         </div>
 45 |                     </div>
 46 |                     <div class="zform-control">
 47 |                         <div class="control-field">
 48 |                             <input type="text" class="field-text" placeholder="请输入年龄" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age">
 49 |                         </div>
 50 |                     </div>               
 51 |                     <div class="zform-control">
 52 |                         <div class="control-field">
 53 |                             <select class="field-select" data-required="true" data-descriptions="address" >
 54 |                                 <option value="" selected disabled>请选择地址</option>
 55 |                                 <option value="1">浙江省</option>
 56 |                                 <option value="2">海南省</option>
 57 |                             </select>
 58 |                         </div>        
 59 |                     </div>
 60 |                     <div class="zform-control">
 61 |                         <label class="control-label control-label-area">个人简介：</label>
 62 |                         <div class="control-field">
 63 |                             <textarea class="field-area" rows="4" data-required="true" data-descriptions="intro" ></textarea>
 64 |                         </div>
 65 |                     </div>
 66 |                     <div class="zform-control zform-control-radiocheck">
 67 |                         <label class="control-label">兴趣爱好：</label>
 68 |                         <div class="control-field">
 69 |                             <label>
 70 |                                 <input type="checkbox"  name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">篮球
 71 |                             </label>    
 72 |                             <label>
 73 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">足球
 74 |                             </label>    
 75 |                             <label>
 76 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">排球
 77 |                             </label>
 78 |                             <label>
 79 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">乒乓球
 80 |                             </label>    
 81 |                         </div>
 82 |                     </div>
 83 |                     <div class="zform-control zform-control-radiocheck">
 84 |                         <label class="control-label">性别：</label>
 85 |                         <div class="control-field">
 86 |                             <label>
 87 |                                 <input type="radio" name="sex" class="field-radio  zicon" data-required="true"  data-descriptions="sex">男
 88 |                             </label>    
 89 |                             <label>
 90 |                                 <input type="radio"  name="sex" class="field-radio  zicon" data-required="true" data-descriptions="sex">女
 91 |                             </label>    
 92 |                         </div>
 93 |                     </div>
 94 |                 </fieldset>
 95 |                 <input type="submit" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">    
 96 |         </form>
 97 |     </div>
 98 |     <div class="demo-hd-1 ml10 mr10">验证类型2</div>
 99 |     <div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
100 |         <form class="zform zform-radius" action="https://www.baidu.com" id="form2">
101 |                 <fieldset class="zform-fieldset">
102 |                     <div class="zform-control">
103 |                         <div class="control-field">
104 |                             <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username" data-describedby="username-description">
105 |                         </div>
106 |                         <div id="username-description"></div>     
107 |                     </div>
108 |                     <div class="zform-control">
109 |                         <div class="control-field">
110 |                             <input type="password" id="pwd2" class="field-text" placeholder="请输入密码" data-required="true" data-descriptions="password" data-describedby="password-description"  data-conditional="pwd2">
111 |                         </div> 
112 |                         <div id="password-description"></div>    
113 |                     </div>
114 |                     <div class="zform-control">
115 |                         <div class="control-field">
116 |                             <input type="password" id="confirmpwd2" class="field-text"  placeholder="再次输入密码确认" data-required="true" data-descriptions="confirmpassword" data-conditional="confirmpwd2" data-describedby="confirmpassword-description">
117 |                         </div>
118 |                         <div id="confirmpassword-description"></div>
119 |                     </div>
120 |                     <div class="zform-control">
121 |                         <div class="control-field">
122 |                             <input type="text" class="field-text" placeholder="请输入手机号码" data-validate="phone" data-describedby="phone-description">
123 |                         </div>
124 |                         <div id="phone-description"></div>
125 |                     </div>
126 |                     <div class="zform-control">
127 |                         <div class="control-field">
128 |                             <input type="text" class="field-text" placeholder="请输入年龄" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age" data-describedby="age-description">
129 |                         </div>
130 |                         <div id="age-description"></div>
131 |                     </div>
132 |                     <div class="zform-control">
133 |                         <div class="control-field">
134 |                             <select class="field-select" data-required="true" data-descriptions="address" data-describedby="address-description" placeholder="请选择省事">
135 |                                 <option value="" selected disabled>请选择地址</option>
136 |                                 <option value="1">浙江省</option>
137 |                                 <option value="2">海南省</option>
138 |                             </select>
139 |                         </div>
140 |                         <div id="address-description"></div>
141 |                     </div>
142 |                     <div class="zform-control">
143 |                         
144 |                         <div class="control-field">
145 |                             <textarea class="field-area" placeholder="个人简介" rows="4" data-required="true" data-descriptions="intro" data-describedby="intro-description"></textarea>
146 |                         </div>
147 |                         <div id="intro-description"></div>
148 |                     </div>
149 |                     <div class="zform-control zform-control-radiocheck">
150 |                         <label class="control-label">兴趣爱好：</label>
151 |                         <div class="control-field">
152 |                             <label>
153 |                                 <input type="checkbox"  name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">篮球
154 |                             </label>    
155 |                             <label>
156 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">足球
157 |                             </label>    
158 |                             <label>
159 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">排球
160 |                             </label>
161 |                             <label>
162 |                                 <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">乒乓球
163 |                             </label>    
164 |                         </div>
165 |                         <div id="favourite-description"></div>
166 |                     </div>
167 |                     <div class="zform-control zform-control-radiocheck">
168 |                         <label class="control-label">性别：</label>
169 |                         <div class="control-field">
170 |                             <label>
171 |                                 <input type="radio" name="sex" class="field-radio  zicon" data-required="true"  data-descriptions="sex" data-describedby="sex-description">男
172 |                             </label>    
173 |                             <label>
174 |                                 <input type="radio"  name="sex" class="field-radio  zicon" data-required="true" data-descriptions="sex" data-describedby="sex-description">女
175 |                             </label>    
176 |                         </div>
177 |                         <div id="sex-description"></div>
178 |                     </div>
179 |                 </fieldset>
180 |                 <input type="submit" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">   
181 |         </form>
182 |     </div>
183 | 
184 |     <div class="pl10 pr10 mb20 pb20 align-c"><a href="http://wnworld.com/mobilevalidate" target="_blank" class="zbtn zbtn-primary  zbtn-lg mb20">查看文档</a></div>
185 |     <script type="text/javascript">
186 |    $(function(){
187 |         $.mvalidateExtend({
188 |             phone:{
189 |                 required : true,   
190 |                 pattern : /^0?1[3|4|5|8][0-9]\d{8}$/,
191 |                 each:function(){
192 |                    
193 |                 },
194 |                 descriptions:{
195 |                     required : '<div class="field-invalidmsg">请输入手机号码</div>',
196 |                     pattern : '<div class="field-invalidmsg">您输入的手机号码格式不正确</div>',
197 |                     valid : '<div class="field-validmsg">正确</div>'
198 |                 }
199 |             }
200 |         });
201 |         $("#form1").mvalidate({
202 |             type:1,
203 |             onKeyup:true,
204 |             sendForm:true,
205 |             firstInvalidFocus:false,
206 |             valid:function(event,options){
207 |                 //点击提交按钮时,表单通过验证触发函数
208 |                 alert("验证通过！接下来可以做你想做的事情啦！");
209 |                  event.preventDefault();
210 |             },
211 |             invalid:function(event, status, options){
212 |                 //点击提交按钮时,表单未通过验证触发函数
213 |             },
214 |             eachField:function(event,status,options){
215 |                 //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
216 |             },
217 |             eachValidField:function(val){},
218 |             eachInvalidField:function(event, status, options){},
219 |             conditional:{
220 |                 confirmpwd:function(){
221 |                     return $("#pwd").val()==$("#confirmpwd").val();
222 |                 }
223 |             },
224 |             descriptions:{
225 |                 username:{
226 |                     required : '请输入用户名'
227 |                 },
228 |                 age : {
229 |                     required : '请输入年龄',
230 |                     pattern : '你输入的年龄格式不正确'
231 |                 },
232 |                 password:{
233 |                      required : '请输入密码'
234 |                 },
235 |                 confirmpassword:{
236 |                     required : '请再次输入密码',
237 |                     conditional : '两次密码不一样'
238 |                 },
239 |                 address:{
240 |                     required : '请选择地址'
241 |                 },
242 |                 intro:{
243 |                     required : '请输入个人介绍'
244 |                 },
245 |                 favourite:{
246 |                     required : '请选择个人爱好'
247 |                 },
248 |                 sex:{
249 |                     required : '请选择性别'
250 |                 }
251 |             }
252 |         });
253 |         $("#form2").mvalidate({
254 |             type:2,
255 |             onKeyup:true,
256 |             sendForm:true,
257 |             firstInvalidFocus:true,
258 |             valid:function(event,options){
259 |                 //点击提交按钮时,表单通过验证触发函数
260 |                 alert("验证通过！接下来可以做你想做的事情啦！");
261 |                 event.preventDefault();
262 |             },
263 |             invalid:function(event, status, options){
264 |                 //点击提交按钮时,表单未通过验证触发函数
265 |             },
266 |             eachField:function(event,status,options){
267 |                 //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
268 |             },
269 |             eachValidField:function(val){},
270 |             eachInvalidField:function(event, status, options){},
271 |             conditional:{
272 |                 pwd2:function(val,options){
273 |                     $("#confirmpwd2").trigger("keyup."+options.namespace);
274 |                     return true;
275 |                 },
276 |                 confirmpwd2:function(val){
277 |                     var flag;
278 |                     return (val==$("#pwd2").val()) ? true :false; 
279 |                 },
280 |             },
281 |             descriptions:{
282 |                 username:{
283 |                     required : '<div class="field-invalidmsg">请输入用户名</div>',
284 |                     valid : '<div class="field-validmsg">验证通过</div>'
285 |                 },
286 |                 age : {
287 |                     required : '<div class="field-invalidmsg">请输入年龄</div>',
288 |                     pattern : '<div class="field-invalidmsg">你输入的格式不正确</div>',
289 |                     valid : '<div class="field-validmsg">验证通过</div>'
290 |                 },
291 |                 password:{
292 |                      required : '<div class="field-invalidmsg">请输入密码</div>',
293 |                      conditional : '<div class="field-validmsg">验证通过</div>',
294 |                      valid : '<div class="field-validmsg">验证通过</div>'
295 |                 },
296 |                 confirmpassword:{
297 |                     required : '<div class="field-invalidmsg">请再次输入密码</div>',
298 |                     conditional : '<div class="field-invalidmsg">两次密码不一样</div>',
299 |                     valid : '<div class="field-validmsg">验证通过</div>'
300 |                 },
301 |                 address:{
302 |                     required : '<div class="field-invalidmsg">请选择地址</div>',
303 |                     valid : '<div class="field-validmsg">验证通过</div>'
304 |                 },
305 |                 intro:{
306 |                     required : '<div class="field-invalidmsg">请输入个人介绍</div>',
307 |                     valid : '<div class="field-validmsg">验证通过</div>'
308 |                 },
309 |                 favourite:{
310 |                     required : '<div class="field-invalidmsg">请选择个人爱好</div>',
311 |                     valid : '<div class="field-validmsg">验证通过</div>'
312 |                 },
313 |                 sex:{
314 |                     required : '<div class="field-invalidmsg">请输入性别</div>',
315 |                     valid : '<div class="field-validmsg">验证通过</div>'
316 |                 }
317 |             }
318 |         });
319 |    })
320 | </script>
321 | </body>
322 | </html>
323 | Status API Training Shop Blog About
324 | © 2016 GitHub, Inc. Terms Privacy Security Contact Help


--------------------------------------------------------------------------------
/dist/css/validate.css:
--------------------------------------------------------------------------------
1 | .field-invalid{border-color:#a94442}.field-invalidmsg{color:#a94442}.field-validmsg{color:#3c763d}.field-tooltipWrap{position:absolute;left:0;top:0;width:100%;z-index:19891014}.field-tooltipInner{pointer-events:none;display:table;position:fixed;left:0;top:0;width:100%;height:100%}.field-tooltip{display:table-cell;vertical-align:middle;text-align:center}.field-tooltip .field-invalidmsg,.field-tooltip .field-validmsg{color:#fff}.field-tooltip .zvalid-resultformat{display:inline-block;position:relative;background-color:rgba(0,0,0,.8);color:#fff;padding:10px 15px;font-size:14px;border-radius:6px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;animation-name:fieldTipBounceIn;-webkit-animation-name:fieldTipBounceIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.18s;animation-duration:.18s}@-webkit-keyframes fieldTipBounceIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}


--------------------------------------------------------------------------------
/dist/js/jquery-mvalidate.js:
--------------------------------------------------------------------------------
1 | /*! 
2 | 版本:1.0.0;
3 | 作者:散崖;
4 | 邮箱:948061564@qq.com;
5 | 博客地址:http://wnworld.com/;*/
6 | !function(a){"function"==typeof define&&define.amd?define(["jquery"],function(b){a(b)}):"function"==typeof define&&define.cmd?define(["jquery"],function(b,c,d){a(b("jquery"))}):a(jQuery)}(function(a){var b=['input:not([type]),input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="file"],input[type="hidden"],input[type="month"],input[type="number"],input[type="password"],input[type="range"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],textarea',"select",'input[type="checkbox"],input[type="radio"]'],c=b.join(","),d={},e=function(a,b,c){if("radio"==a.prop("type")||"checkbox"==a.prop("type")){var d=c.$form.find('[name="'+a.prop("name")+'"]');d.filter(":checked").length>0?d.removeClass("field-invalid"):d.addClass("field-invalid")}else b.required&&b.pattern&&b.conditional?a.removeClass("field-invalid"):a.addClass("field-invalid")},f=function(){function b(b){if(!c){var d=a('<div class="field-tooltipWrap"><div class="field-tooltipInner"><div class="field-tooltip fieldTipBounceIn">'+b+"</div></div></div>");d.appendTo(a("body")),c=!0,setTimeout(function(){d.remove(),c=!1},1500)}}var c=null;return{show:b}}(),g=function(c,g){var h,i=a(this),j={required:!0,conditional:!0,pattern:!0},k=a.fn.mvalidate.errorTipFormat,l=a.trim(i.val())||"",m=i.attr("data-validate"),n=void 0!=m?d[m]:{},o=i.attr("data-required"),p=i.attr("data-pattern")||("regexp"==a.type(n.pattern)?n.pattern:/(?:)/),q=i.attr("data-conditional")||n.conditional,r=i.attr("data-descriptions")||n.descriptions,s=i.attr("data-describedby")||n.describedby;r=a.isPlainObject(r)?r:g.descriptions[r]||{},o=""==o||(o||!!n.required),"regexp"!=a.type(p)&&(p=RegExp(p)),o&&(i.is(b[0]+","+b[1])?!l.length>0&&(j.required=!1):i.is(b[2])&&(i.is("[name]")?0==g.$form.find('[name="'+i.prop("name")+'"]:checked').length&&(j.required=!1):j.required=field.is(":checked"))),i.is(b[0])&&(p.test(l)||(o?j.pattern=!1:l.length>0&&(j.pattern=!1))),"undefined"!=q&&(a.isFunction(q)?j.conditional=!!q.call(i,l,g):g.conditional.hasOwnProperty(q)&&!g.conditional[q].call(i,l,g)&&(j.conditional=!1)),h=k(r.valid),j.required?j.pattern?j.conditional||(h=k(r.conditional)):h=k(r.pattern):h=k(r.required);var t=a('[id="'+s+'"]');return t.length>0&&2==g.type&&("keyup"!=c.type&&"change"!=c.type||t.children().length&&a.trim(t.text()))&&(t.html(h||""),e(i,j,g)),"function"==typeof n.each&&n.each.call(i,c,j,g),g.eachField.call(i,c,j,g),j.required&&j.pattern&&j.conditional?("function"==typeof n.valid&&n.valid.call(i,c,j,g),g.eachValidField.call(i,c,j,g)):(!g.firstInvalid&&g.firstInvalidFocus&&(g.firstInvalid=!0,i.focus()),1==g.type&&f.show(h),"function"==typeof n.invalid&&n.invalid.call(i,c,j,g),g.eachInvalidField.call(i,c,j,g)),j};a.extend(a,{mvalidateExtend:function(b){return a.extend(d,b)},mvalidateTip:function(b){var c=a.fn.mvalidate.errorTipFormat(b);f.show(c)}}),a.fn.mvalidate=function(d){var e,f={type:1,validateInSubmit:!0,sendForm:!0,onKeyup:!1,onChange:!0,firstInvalidFocus:!0,conditional:{},descriptions:{},eachField:a.noop,eachValidField:a.noop,eachInvalidField:a.noop,valid:a.noop,invalid:a.noop,namespace:"mvalidate"},h=a.extend(!0,f,d),i=h.namespace;return h.type=Number(h.type),h.firstInvalid=!1,e=1!=h.type,this.mvalidateDestroy().each(function(d){var f,j=a(this);j.is("form")&&(h.$form=j,j.data(name,{options:h}),f=j.find(c),e&&h.onKeyup&&f.filter(b[0]).each(function(){a(this).on("keyup."+i,function(a){g.call(this,a,h)})}),e&&h.onChange&&f.each(function(){a(this).is(b[1]+","+b[2])&&a(this).on("change."+i,function(a){g.call(this,a,h)})}),h.validateInSubmit&&j.on("submit."+i,function(b){var c=!0;h.firstInvalid=!1,f.each(function(){var a=g.call(this,b,h);a.pattern&&a.conditional&&a.required||(c=!1)}),c?(h.sendForm||b.preventDefault(),a.isFunction(h.valid)&&h.valid.call(j,b,h)):(b.preventDefault(),b.stopImmediatePropagation(),a.isFunction(h.invalid)&&h.invalid.call(j,b,h))}))})},a.fn.mvalidateDestroy=function(){var b,d=a(this),e="mvalidate",f=d.data(e);return f?(d.is("form")&&a.isPlainObject(f)&&"string"==typeof f.options.nameSpace&&(b=d.removeData(name).find(c),b.off("."+f.options.nameSpace)),d):d},a.fn.mvalidate.errorTipFormat=function(a){return'<div class="zvalid-resultformat">'+a+"</div>"}});


--------------------------------------------------------------------------------
/dist/js/zepto-mvalidate.js:
--------------------------------------------------------------------------------
1 | /*! 
2 | 版本:1.0.0;
3 | 作者:散崖;
4 | 邮箱:948061564@qq.com;
5 | 博客地址:http://wnworld.com/;*/
6 | !function(a){"function"==typeof define&&define.amd?define(["Zepto"],function(b){a(b)}):"function"==typeof define&&define.cmd?define(["Zepto"],function(b,c,d){a(b("Zepto"))}):a(Zepto)}(function(a){var b=['input:not([type]),input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="file"],input[type="hidden"],input[type="month"],input[type="number"],input[type="password"],input[type="range"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],textarea',"select",'input[type="checkbox"],input[type="radio"]'],c=b.join(","),d={},e=function(a,b,c){if("radio"==a.prop("type")||"checkbox"==a.prop("type")){var d=c.$form.find('[name="'+a.prop("name")+'"]');d.filter(":checked").length>0?d.removeClass("field-invalid"):d.addClass("field-invalid")}else b.required&&b.pattern&&b.conditional?a.removeClass("field-invalid"):a.addClass("field-invalid")},f=function(){function b(b){if(!c){var d=a('<div class="field-tooltipWrap"><div class="field-tooltipInner"><div class="field-tooltip fieldTipBounceIn">'+b+"</div></div></div>");d.appendTo(a("body")),c=!0,setTimeout(function(){d.remove(),c=!1},1500)}}var c=null;return{show:b}}(),g=function(c,g){var h,i=a(this),j={required:!0,conditional:!0,pattern:!0},k=a.fn.mvalidate.errorTipFormat,l=a.trim(i.val())||"",m=i.attr("data-validate"),n=void 0!=m?d[m]:{},o=i.attr("data-required"),p=i.attr("data-pattern")||("regexp"==a.type(n.pattern)?n.pattern:/(?:)/),q=i.attr("data-conditional")||n.conditional,r=i.attr("data-descriptions")||n.descriptions,s=i.attr("data-describedby")||n.describedby;r=a.isPlainObject(r)?r:g.descriptions[r]||{},o=""==o||(o||!!n.required),"regexp"!=a.type(p)&&(p=RegExp(p)),o&&(i.is(b[0]+","+b[1])?!l.length>0&&(j.required=!1):i.is(b[2])&&(i.is("[name]")?0==g.$form.find('[name="'+i.prop("name")+'"]:checked').length&&(j.required=!1):j.required=field.is(":checked"))),i.is(b[0])&&(p.test(l)||(o?j.pattern=!1:l.length>0&&(j.pattern=!1))),"undefined"!=q&&(a.isFunction(q)?j.conditional=!!q.call(i,l,g):g.conditional.hasOwnProperty(q)&&!g.conditional[q].call(i,l,g)&&(j.conditional=!1)),h=k(r.valid),j.required?j.pattern?j.conditional||(h=k(r.conditional)):h=k(r.pattern):h=k(r.required);var t=a('[id="'+s+'"]');return t.length>0&&2==g.type&&("keyup"!=c.type&&"change"!=c.type||t.children().length&&a.trim(t.text()))&&(t.html(h||""),e(i,j,g)),"function"==typeof n.each&&n.each.call(i,c,j,g),"function"==typeof g.eachField&&g.eachField.call(i,c,j,g),j.required&&j.pattern&&j.conditional?("function"==typeof n.valid&&n.valid.call(i,c,j,g),g.eachValidField.call(i,c,j,g)):(!g.firstInvalid&&g.firstInvalidFocus&&(g.firstInvalid=!0,i.focus()),1==g.type&&f.show(h),"function"==typeof n.invalid&&n.invalid.call(i,c,j,g),"function"==typeof g.eachInvalidField&&g.eachInvalidField.call(i,c,j,g)),j};a.extend(a,{mvalidateExtend:function(b){return a.extend(d,b)}}),a.fn.mvalidate=function(d){var e,f={type:1,validateInSubmit:!0,sendForm:!0,onKeyup:!1,onChange:!0,firstInvalidFocus:!0,conditional:{},descriptions:{},eachField:a.noop,eachValidField:a.noop,eachInvalidField:a.noop,valid:a.noop,invalid:a.noop,namespace:"mvalidate"},h=a.extend(!0,f,d),i=h.namespace;return h.type=Number(h.type),h.firstInvalid=!1,e=1!=h.type,this.mvalidateDestroy().each(function(d){var f,j=a(this);j.is("form")&&(h.$form=j,j.data(i,{options:h}),f=j.find(c),e&&h.onKeyup&&f.filter(b[0]).each(function(){a(this).on("keyup."+i,function(a){g.call(this,a,h)})}),e&&h.onChange&&f.each(function(){a(this).is(b[1]+","+b[2])&&a(this).on("change."+i,function(a){g.call(this,a,h)})}),h.validateInSubmit&&j.on("submit."+i,function(b){var c=!0;h.firstInvalid=!1,f.each(function(){var a=g.call(this,b,h);a.pattern&&a.conditional&&a.required||(c=!1)}),c?(h.sendForm||b.preventDefault(),a.isFunction(h.valid)&&h.valid.call(j,b,h)):(b.preventDefault(),b.stopImmediatePropagation(),a.isFunction(h.invalid)&&h.invalid.call(j,b,h))}))})},a.fn.mvalidateDestroy=function(){var b,d=a(this),e="mvalidate",f=d.data(e);return f?(d.is("form")&&a.isPlainObject(f)&&"string"==typeof f.options.namespace&&(b=d.removeData(name).find(c),b.off("."+f.options.namespace)),d):d},a.fn.mvalidate.errorTipFormat=function(a){return'<div class="zvalid-resultformat">'+a+"</div>"}});


--------------------------------------------------------------------------------
/gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (grunt) {
 2 | 	grunt.initConfig({
 3 | 		pkg: grunt.file.readJSON('package.json'),
 4 | 		cssmin: {
 5 | 			minify:{
 6 | 				expand:true,
 7 | 				cwd:"demo/css",
 8 | 				src:["validate.css"],
 9 | 				dest:"dist/css",
10 | 				ext:".css"
11 | 			}
12 | 		},
13 | 		uglify:{
14 | 			 options: {
15 | 		        banner: '/*! \n版本:<%= pkg.version %>;\n作者:<%= pkg.author.name %>;\n邮箱:<%= pkg.author.email %>;\n博客地址:<%= pkg.author.blog %>;*/\n'
16 | 		      },
17 | 			my_target: {
18 | 				files:[
19 | 		        		{'dist/js/jquery-mvalidate.js': ['demo/js/jquery-mvalidate.js']},
20 | 		        		{'dist/js/zepto-mvalidate.js': ['demo/js/zepto-mvalidate.js']}
21 | 		      		]
22 | 	      	}
23 | 		}, 
24 | 		copy:{
25 | 			my_target: {
26 | 				files:[
27 | 					{expand:true,src:["demo/css/validate.css"],dest:"src/css",flatten:true},
28 | 					{expand:true,src:["demo/js/*.js"],dest:"src/js",flatten:true}
29 | 				]
30 | 			}
31 | 		}
32 | 	});
33 | 	require('load-grunt-tasks')(grunt);
34 | 	grunt.registerTask("default",['cssmin:minify',"uglify:my_target","copy:my_target"]);
35 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mvalidate",
 3 |   "version": "1.0.0",
 4 |   "description": "移动端的验证控件",
 5 |   "author": {
 6 |     "name": "散崖",
 7 |     "email": "948061564@qq.com",
 8 |     "blog": "http://wnworld.com/"
 9 |   },
10 |   "devDependencies": {
11 |     "grunt": "^0.4.5",
12 |     "load-grunt-tasks": "~0.3.0",
13 |     "grunt-contrib-connect": "^0.7.1",
14 |     "grunt-contrib-watch": "^0.6.1",
15 |     "connect-livereload": "^0.5.2",
16 |     "grunt-contrib-concat": "^0.5.0",
17 |     "grunt-contrib-cssmin": "^0.11.0",
18 |     "grunt-contrib-copy": "^0.7.0",
19 |     "grunt-contrib-uglify": "^0.7.0",
20 |     "grunt-contrib-jshint": "^0.11.0",
21 |     "grunt-contrib-less": "^1.0.0",
22 |     "grunt-contrib-clean": "^0.6.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/css/validate.css:
--------------------------------------------------------------------------------
 1 | .field-invalid{
 2 |     border-color:#a94442;
 3 | }
 4 | .field-invalidmsg{
 5 |     color:#a94442;
 6 | }
 7 | .field-validmsg{
 8 |     color:#3c763d;
 9 | }
10 | .field-tooltipWrap{
11 |     position: absolute;
12 |     left: 0;
13 |     top: 0;
14 |     width: 100%;
15 |     z-index: 19891014;
16 | }
17 | .field-tooltipInner{
18 |     pointer-events: none;
19 |     display: table;
20 |     position:fixed;
21 |     left:0;
22 |     top:0;
23 |     width:100%;
24 |     height:100%;
25 | }
26 | .field-tooltip{
27 |     display: table-cell;
28 |     vertical-align: middle;
29 |     text-align: center;
30 | }
31 | .field-tooltip .field-invalidmsg,
32 | .field-tooltip .field-validmsg{
33 |     color: #fff;
34 | }
35 | .field-tooltip .zvalid-resultformat{
36 |     display: inline-block;
37 |     position: relative;
38 |     background-color:rgba(0,0,0,0.8);
39 |     color: #fff;
40 |     padding: 10px 15px;
41 |     font-size: 14px;
42 |     border-radius: 6px;
43 |     box-shadow: 0 0 8px rgba(0,0,0,.1);
44 |     pointer-events: auto;
45 |     animation-name:fieldTipBounceIn;
46 |     -webkit-animation-name:fieldTipBounceIn;
47 |     -webkit-animation-fill-mode: both;
48 |     animation-fill-mode: both;
49 |     -webkit-animation-duration: .18s;
50 |     animation-duration: .18s;
51 | }
52 | 
53 | @-webkit-keyframes fieldTipBounceIn{
54 | 
55 |   0% {
56 |     opacity: 0;
57 |     -webkit-transform: scale3d(.3, .3, .3);
58 |     transform: scale3d(.3, .3, .3);
59 |   }
60 |   100% {
61 |     opacity: 1;
62 |     -webkit-transform: scale3d(1, 1, 1);
63 |     transform: scale3d(1, 1, 1);
64 |   }
65 | }
66 | 
67 | 
68 | @keyframes 
69 | 
70 | {
71 | 
72 | 
73 |   0% {
74 |     opacity: 0;
75 |     -webkit-transform: scale3d(.3, .3, .3);
76 |     transform: scale3d(.3, .3, .3);
77 |   }
78 |   100% {
79 |     opacity: 1;
80 |     -webkit-transform: scale3d(1, 1, 1);
81 |     transform: scale3d(1, 1, 1);
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/src/js/jquery-mvalidate.js:
--------------------------------------------------------------------------------
  1 | (function (factory) {
  2 | 	if (typeof define === 'function' && define.amd) {
  3 | 		define(['jquery'], function (jquery) {
  4 | 			// 返回构造函数
  5 | 			factory(jquery); // 初始化插件	
  6 | 		});
  7 | 	} else if (typeof define === 'function' && define.cmd) {
  8 | 		define(['jquery'], function (require, exports, moudles) {
  9 | 			factory(
 10 | 				require('jquery')); // 初始化插件
 11 | 		})
 12 | 	} else {
 13 | 		factory(jQuery);
 14 | 	}
 15 | })(function ($) {
 16 | 	var type = ['input:not([type]),input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="file"],input[type="hidden"],input[type="month"],input[type="number"],input[type="password"],input[type="range"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],textarea', 'select', 'input[type="checkbox"],input[type="radio"]'],
 17 | 		allTypes = type.join(","),
 18 | 		extend = {};
 19 | 	var fieldValidTypeHand = function ($field, status, options) {
 20 | 		if ($field.prop("type") == "radio" || $field.prop("type") == "checkbox") {
 21 | 			var $fields = options.$form.find('[name="' + $field.prop('name') + '"]');
 22 | 
 23 | 			if ($fields.filter(":checked").length > 0) {
 24 | 				$fields.removeClass('field-invalid')
 25 | 			} else {
 26 | 				$fields.addClass('field-invalid')
 27 | 			}
 28 | 		} else {
 29 | 			if (status.required && status.pattern && status.conditional) {
 30 | 				$field.removeClass('field-invalid');
 31 | 			} else {
 32 | 				$field.addClass('field-invalid');
 33 | 			}
 34 | 		}
 35 | 	};
 36 | 	var fieldTooltip = (function () {
 37 | 		var instance = null;
 38 | 
 39 | 		function show(text) {
 40 | 			if (!instance) {
 41 | 				var $container = $('<div class="field-tooltipWrap"><div class="field-tooltipInner"><div class="field-tooltip fieldTipBounceIn">' + text + '</div></div></div>');
 42 | 				$container.appendTo($("body"));
 43 | 				instance = true;
 44 | 				setTimeout(function () {
 45 | 					$container.remove();
 46 | 					instance = false;
 47 | 				}, 1500)
 48 | 			}
 49 | 		}
 50 | 
 51 | 		return {
 52 | 			show: show
 53 | 		}
 54 | 	})();
 55 | 	var validateField = function (event, options) {
 56 | 		var $field = $(this),
 57 | 			status = {
 58 | 				required: true,
 59 | 				conditional: true,
 60 | 				pattern: true
 61 | 			},
 62 | 			log, //验证提示信息存储变量
 63 | 
 64 | 			errorTipFormat = $.fn.mvalidate.errorTipFormat, //错误信息输出的格式化
 65 | 
 66 | 			fieldValue = $.trim($field.val()) || "",
 67 | 
 68 | 			//*****获取当前字段的data-validate
 69 | 			fieldValidate = $field.attr("data-validate"),
 70 | 			validation = (fieldValidate != undefined) ? extend[fieldValidate] : {},
 71 | 			//*****获取当前字段的data-required
 72 | 			fieldRequired = $field.attr("data-required"),
 73 | 			//*****获取当前字段的data-pattern
 74 | 			fieldPattern = ($field.attr('data-pattern') || ($.type(validation.pattern) == 'regexp' ? validation.pattern : /(?:)/)),
 75 | 
 76 | 
 77 | 			//*****获取当前字段的data-conditional
 78 | 			fieldConditional = $field.attr("data-conditional") || validation.conditional,
 79 | 			//*****获取当前字段的data-description
 80 | 			fieldDescription = $field.attr("data-descriptions") || validation.descriptions,
 81 | 			//*****获取当前字段的data-describedby
 82 | 			fieldDescribedby = $field.attr("data-describedby") || validation.describedby;
 83 | 
 84 | 		fieldDescription = $.isPlainObject(fieldDescription) ? fieldDescription : (options.descriptions[fieldDescription] || {});
 85 | 		fieldRequired = fieldRequired != '' ? (fieldRequired || !!validation.required) : true;
 86 | 		if ($.type(fieldPattern) != 'regexp') {
 87 | 			fieldPattern = RegExp(fieldPattern);
 88 | 		}
 89 | 
 90 | 		//如果是必填验证,那么就要判断是什么类型的表单
 91 | 		if (fieldRequired) {
 92 | 			//如果是那种可以通过val()来判断的
 93 | 			if ($field.is(type[0] + ',' + type[1])) {
 94 | 				if (!fieldValue.length > 0) {
 95 | 					status.required = false;
 96 | 				}
 97 | 				//如果是raido和checkbox,通过name和checked来判断
 98 | 			} else if ($field.is(type[2])) {
 99 | 				if ($field.is('[name]')) {
100 | 					if (options.$form.find('[name="' + $field.prop('name') + '"]:checked').length == 0) {
101 | 						status.required = false;
102 | 					}
103 | 				} else {
104 | 					status.required = field.is(':checked');
105 | 				}
106 | 			}
107 | 		}
108 | 		/**如果是正则验证
109 | 		 * 只有那些类似type=text的文本框我们才能通过正则表达式去验证pattern,
110 | 		 * 而对于select,radio,checkbox pattern显然是无效的
111 | 		 */
112 | 		if ($field.is(type[0]) && status.required) {
113 | 			//如果不匹配
114 | 			if (!fieldPattern.test(fieldValue)) {
115 | 				if (fieldRequired) {
116 | 					status.pattern = false;
117 | 				} else {
118 | 					if (fieldValue.length > 0) {
119 | 						status.pattern = false;
120 | 					}
121 | 				}
122 | 			}
123 | 		}
124 | 
125 | 		//如果是data-conditional="name"函数验证,函数返回true或者是false
126 | 		if (fieldConditional != "undefined" && status.pattern) {
127 | 			if ($.isFunction(fieldConditional)) {
128 | 				status.conditional = !!fieldConditional.call($field, fieldValue, options);
129 | 			} else {
130 | 				if (options.conditional.hasOwnProperty(fieldConditional) && !options.conditional[fieldConditional].call($field, fieldValue, options)) {
131 | 					status.conditional = false;
132 | 				}
133 | 			}
134 | 		}
135 | 
136 | 
137 | 		//验证通过的信息所在对象
138 | 
139 | 		log = errorTipFormat(fieldDescription.valid);
140 | 		if (!status.required) {
141 | 			log = errorTipFormat(fieldDescription.required);
142 | 
143 | 		} else if (!status.pattern) {
144 | 			log = errorTipFormat(fieldDescription.pattern);
145 | 
146 | 
147 | 		} else if (!status.conditional) {
148 | 			log = errorTipFormat(fieldDescription.conditional);
149 | 		}
150 | 
151 | 		var $describedShowElem = $('[id="' + fieldDescribedby + '"]');
152 | 		//如果找打提示的容器，是第二种类型的验证
153 | 		if ($describedShowElem.length > 0 && options.type == 2) {
154 | 			//如果是change 或者是keyup 同时是第一次输入的时候就不要验证
155 | 			if ((event.type == "keyup" || event.type == "change") && (!$describedShowElem.children().length || !$.trim($describedShowElem.text()))) {
156 | 
157 | 			} else {
158 | 				$describedShowElem.html(log || '');
159 | 				fieldValidTypeHand($field, status, options)
160 | 			}
161 | 		}
162 | 
163 | 		if (typeof (validation.each) == 'function') {
164 | 			validation.each.call($field, event, status, options);
165 | 		}
166 | 		options.eachField.call($field, event, status, options);
167 | 
168 | 		if (status.required && status.pattern && status.conditional) {
169 | 
170 | 			if (typeof (validation.valid) == 'function') { //二外拓展的
171 | 				validation.valid.call($field, event, status, options);
172 | 			}
173 | 			options.eachValidField.call($field, event, status, options);
174 | 		} else { //验证未通过
175 | 			if (!options.firstInvalid && options.firstInvalidFocus) {
176 | 				options.firstInvalid = true;
177 | 				$field.focus();
178 | 			}
179 | 			if (options.type == 1) {
180 | 				fieldTooltip.show(log)
181 | 			}
182 | 			if (typeof (validation.invalid) == 'function') {
183 | 				validation.invalid.call($field, event, status, options);
184 | 			}
185 | 			options.eachInvalidField.call($field, event, status, options);
186 | 		}
187 | 
188 | 		/**
189 | 		 * 如果是data-describedby="elemId"验证信息要显示的地方，类型3的验证:
190 | 		 * 		第一元素获取焦点，keyUp的时候要一直验证，如果正确那么错误信息就隐藏，如果不正确，那么错误
191 | 		 * 		提示信息要根据状态而改变,对于与验证通过，那么可以通过eachInvalid来让用户自定义，而无需要
192 | 		 * 		在插件中写它的操作方式
193 | 		 */
194 | 		return status;
195 | 	};
196 | 	$.extend($, {
197 | 		mvalidateExtend: function (options) {
198 | 			return $.extend(extend, options);
199 | 		},
200 | 		mvalidateTip: function (text) {
201 | 			var txt = $.fn.mvalidate.errorTipFormat(text);
202 | 			fieldTooltip.show(txt)
203 | 		}
204 | 	});
205 | 
206 | 
207 | 
208 | 
209 | 
210 | 	$.fn.mvalidate = function (options) {
211 | 		var defaults = {
212 | 				type: 1,
213 | 				validateInSubmit: true,
214 | 				sendForm: true,
215 | 				onKeyup: false,
216 | 				onChange: true,
217 | 				firstInvalidFocus: true, //第一个未通过验证的表单是否获得交代呢
218 | 				conditional: {},
219 | 				descriptions: {},
220 | 				eachField: $.noop,
221 | 				eachValidField: $.noop,
222 | 				eachInvalidField: $.noop,
223 | 				valid: $.noop,
224 | 				invalid: $.noop,
225 | 				namespace: "mvalidate"
226 | 			},
227 | 			opts = $.extend(true, defaults, options),
228 | 			flag,
229 | 			namespace = opts.namespace;
230 | 
231 | 		opts.type = Number(opts.type);
232 | 		opts.firstInvalid = false;
233 | 		flag = opts.type == 1 ? false : true;
234 | 		return this.mvalidateDestroy().each(function (event) {
235 | 
236 | 			var $form = $(this),
237 | 				$fields; //存放当前表单下的所有元素;
238 | 			if (!$form.is("form")) return;
239 | 			opts.$form = $form;
240 | 			$form.data(name, {
241 | 				"options": opts
242 | 			});
243 | 			$fields = $form.find(allTypes);
244 | 
245 | 			//
246 | 			if (flag && opts.onKeyup) {
247 | 				$fields.filter(type[0]).each(function () {
248 | 
249 | 					$(this).on("keyup." + namespace, function (event) {
250 | 						validateField.call(this, event, opts)
251 | 					})
252 | 				});
253 | 			}
254 | 
255 | 			if (flag && opts.onChange) {
256 | 				$fields.each(function () {
257 | 					var $this = $(this);
258 | 					if ($this.is(type[1] + ',' + type[2])) {
259 | 						$(this).on('change.' + namespace, function (event) {
260 | 							validateField.call(this, event, opts);
261 | 						})
262 | 					}
263 | 				})
264 | 			}
265 | 
266 | 			//如果需要验证的时候,在提交表单的时候对所有的字段进行验证
267 | 			if (opts.validateInSubmit) {
268 | 				$form.on("submit." + namespace, function (event) {
269 | 					var formValid = true;
270 | 					opts.firstInvalid = false;
271 | 					$fields.each(function () {
272 | 						var status = validateField.call(this, event, opts);
273 | 						if (!status.pattern || !status.conditional || !status.required) {
274 | 							formValid = false;
275 | 						}
276 | 					});
277 | 
278 | 					if (formValid) {
279 | 						if (!opts.sendForm) {
280 | 							event.preventDefault();
281 | 						}
282 | 						if ($.isFunction(opts.valid)) {
283 | 							opts.valid.call($form, event, opts);
284 | 						}
285 | 						//验证没有通过,禁用提交事件,以及绑定在这个elem上的其他事件	
286 | 					} else {
287 | 						event.preventDefault();
288 | 						event.stopImmediatePropagation();
289 | 						if ($.isFunction(opts.invalid)) {
290 | 							opts.invalid.call($form, event, opts)
291 | 						}
292 | 					}
293 | 
294 | 				})
295 | 			}
296 | 		})
297 | 	};
298 | 	$.fn.mvalidateDestroy = function () {
299 | 		var $form = $(this),
300 | 			$fields, namespace = "mvalidate",
301 | 			dataValidate = $form.data(namespace);
302 | 
303 | 		if (!dataValidate) {
304 | 			return $form;
305 | 		}
306 | 		if ($form.is('form') && $.isPlainObject(dataValidate) && typeof (dataValidate.options.nameSpace) == 'string') {
307 | 			$fields = $form.removeData(name).find(allTypes);
308 | 			$fields.off('.' + dataValidate.options.nameSpace);
309 | 		}
310 | 		return $form;
311 | 	};
312 | 	$.fn.mvalidate.errorTipFormat = function (text) {
313 | 		return '<div class="zvalid-resultformat">' + text + '</div>';
314 | 	}
315 | 
316 | 
317 | })


--------------------------------------------------------------------------------
/src/js/zepto-mvalidate.js:
--------------------------------------------------------------------------------
  1 | (function (factory) {
  2 | 	if (typeof define === 'function' && define.amd ) {
  3 | 		define(['Zepto'], function(zepto){
  4 | 			// 返回构造函数
  5 | 			factory(zepto); // 初始化插件
  6 | 		});
  7 | 	}else if(typeof define === 'function' && define.cmd){
  8 | 		define(['Zepto'], function(require,exports,moudles){
  9 | 			factory(require('Zepto')); // 初始化插件
 10 | 		})
 11 | 	}else{
 12 | 		factory(Zepto);
 13 | 	}
 14 | })(function($){
 15 | 	var type = ['input:not([type]),input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="file"],input[type="hidden"],input[type="month"],input[type="number"],input[type="password"],input[type="range"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],textarea', 'select', 'input[type="checkbox"],input[type="radio"]'],
 16 | 		allTypes=type.join(","),
 17 | 		extend={};
 18 | 	var fieldValidTypeHand=function($field,status,options){
 19 | 				if($field.prop("type")=="radio" || $field.prop("type")=="checkbox"){
 20 | 					var $fields=options.$form.find('[name="'+$field.prop('name')+'"]');
 21 | 
 22 | 					if($fields.filter(":checked").length > 0){
 23 | 						$fields.removeClass('field-invalid')
 24 | 					}else{
 25 | 						$fields.addClass('field-invalid')
 26 | 					}
 27 | 				}else{
 28 | 					if(status.required && status.pattern && status.conditional) {
 29 | 						$field.removeClass('field-invalid');
 30 | 					}else{
 31 | 						$field.addClass('field-invalid');
 32 | 					}
 33 | 				}
 34 | 	};
 35 | 	var fieldTooltip=(function(){
 36 | 			var instance=null;
 37 | 				function show(text){
 38 | 					if(!instance){
 39 | 						var $container=$('<div class="field-tooltipWrap"><div class="field-tooltipInner"><div class="field-tooltip fieldTipBounceIn">'+text+'</div></div></div>');
 40 | 		    			$container.appendTo($("body"));
 41 | 		    			instance=true;
 42 | 		    			setTimeout(function(){
 43 | 							$container.remove();
 44 | 							instance=false;
 45 | 						},1500)
 46 | 					}
 47 | 				}
 48 | 
 49 | 			return {
 50 | 				show:show
 51 | 			}
 52 | 	})();
 53 | 	var validateField=function(event,options){
 54 | 		var $field=$(this),
 55 | 			status={
 56 | 				required:true,
 57 | 				conditional:true,
 58 | 				pattern:true
 59 | 			},
 60 | 			log,//验证提示信息存储变量
 61 | 
 62 | 			errorTipFormat=$.fn.mvalidate.errorTipFormat,//错误信息输出的格式化
 63 | 
 64 | 			fieldValue =$.trim($field.val()) || "",
 65 | 
 66 | 		    //*****获取当前字段的data-validate
 67 | 			fieldValidate=$field.attr("data-validate"),
 68 | 			validation=(fieldValidate != undefined) ? extend[fieldValidate]:{},
 69 | 			//*****获取当前字段的data-required
 70 | 			fieldRequired=$field.attr("data-required"),
 71 | 			//*****获取当前字段的data-pattern
 72 | 			fieldPattern = ($field.attr('data-pattern') || ($.type(validation.pattern) == 'regexp' ? validation.pattern : /(?:)/)),
 73 | 
 74 | 
 75 | 			//*****获取当前字段的data-conditional
 76 | 			fieldConditional=$field.attr("data-conditional") || validation.conditional,
 77 | 			//*****获取当前字段的data-description
 78 | 			fieldDescription=$field.attr("data-descriptions") || validation.descriptions,
 79 | 			//*****获取当前字段的data-describedby
 80 | 			fieldDescribedby=$field.attr("data-describedby") || validation.describedby;
 81 | 
 82 | 			fieldDescription = $.isPlainObject(fieldDescription) ? fieldDescription : (options.descriptions[fieldDescription] || {});
 83 | 			fieldRequired=fieldRequired !='' ? (fieldRequired || !!validation.required ) : true;
 84 | 			if($.type(fieldPattern) != 'regexp') {
 85 | 				fieldPattern=RegExp(fieldPattern);
 86 | 			}
 87 | 
 88 | 		//如果是必填验证,那么就要判断是什么类型的表单
 89 | 		if(fieldRequired) {
 90 | 			//如果是那种可以通过val()来判断的
 91 | 			if($field.is(type[0] + ',' + type[1])) {
 92 | 				if(!fieldValue.length > 0){
 93 | 					status.required = false;
 94 | 				}
 95 | 			//如果是raido和checkbox,通过name和checked来判断
 96 | 			}else if($field.is(type[2])){
 97 | 				if($field.is('[name]')) {
 98 | 					if(options.$form.find('[name="'+$field.prop('name')+'"]:checked').length==0){
 99 | 						status.required = false;
100 | 					}
101 | 				}else{
102 | 					status.required = field.is(':checked');
103 | 				}
104 | 			}
105 | 		}
106 | 		/**如果是正则验证
107 | 		 * 只有那些类似type=text的文本框我们才能通过正则表达式去验证pattern,
108 | 		 * 而对于select,radio,checkbox pattern显然是无效的
109 | 		 */
110 | 		if($field.is(type[0])) {
111 | 			//如果不匹配
112 | 			if(!fieldPattern.test(fieldValue)){
113 | 				if(fieldRequired){
114 | 					status.pattern=false;
115 | 				}else{
116 | 					if(fieldValue.length > 0){
117 | 						status.pattern = false;
118 | 					}
119 | 				}
120 | 			}
121 | 		}
122 | 
123 | 		//如果是data-conditional="name"函数验证,函数返回true或者是false
124 | 		if(fieldConditional !="undefined"){
125 | 			if($.isFunction(fieldConditional)){
126 | 				status.conditional=!!fieldConditional.call($field, fieldValue,options);
127 | 			}else{
128 | 				if(options.conditional.hasOwnProperty(fieldConditional) && !options.conditional[fieldConditional].call($field,fieldValue,options)){
129 | 					status.conditional=false;
130 | 				}
131 | 			}
132 | 		}
133 | 
134 | 
135 | 		//验证通过的信息所在对象
136 | 
137 | 		log = errorTipFormat(fieldDescription.valid);
138 | 		if(!status.required) {
139 | 			log = errorTipFormat(fieldDescription.required);
140 | 
141 | 		}else if(!status.pattern) {
142 | 			log = errorTipFormat(fieldDescription.pattern);
143 | 
144 | 
145 | 		} else if(!status.conditional) {
146 | 			log =errorTipFormat(fieldDescription.conditional);
147 | 		}
148 | 
149 | 		var $describedShowElem=$('[id="' + fieldDescribedby +'"]');
150 | 		//如果找打提示的容器，是第二种类型的验证
151 | 		if($describedShowElem.length > 0 && options.type==2){
152 | 			//如果是change 或者是keyup 同时是第一次输入的时候就不要验证
153 | 			if((event.type=="keyup" || event.type=="change") && (!$describedShowElem.children().length || !$.trim($describedShowElem.text()))){
154 | 
155 | 			}else{
156 | 				$describedShowElem.html(log || '');
157 | 				fieldValidTypeHand($field,status,options)
158 | 			}
159 | 		}
160 | 
161 | 		if(typeof(validation.each) == 'function') {
162 | 			validation.each.call($field, event, status, options);
163 | 		}
164 | 
165 | 		typeof(options.eachField) === 'function' && options.eachField.call($field, event, status, options);
166 | 
167 | 		if(status.required && status.pattern && status.conditional) {
168 | 
169 | 			if(typeof(validation.valid) == 'function') {//二外拓展的
170 | 				validation.valid.call($field, event, status, options);
171 | 			}
172 | 			options.eachValidField.call($field, event, status, options);
173 | 		}else{//验证未通过
174 | 			if(!options.firstInvalid && options.firstInvalidFocus){
175 | 				options.firstInvalid=true;
176 | 				$field.focus();
177 | 			}
178 | 			if(options.type==1){
179 | 				fieldTooltip.show(log)
180 | 			}
181 | 			if(typeof(validation.invalid) == 'function') {
182 | 				validation.invalid.call($field, event, status, options);
183 | 			}
184 | 			typeof(options.eachInvalidField) === 'function' && options.eachInvalidField.call($field, event, status, options);
185 | 		}
186 | 
187 | 	/**
188 | 	 * 如果是data-describedby="elemId"验证信息要显示的地方，类型3的验证:
189 | 		 * 		第一元素获取焦点，keyUp的时候要一直验证，如果正确那么错误信息就隐藏，如果不正确，那么错误
190 | 		 * 		提示信息要根据状态而改变,对于与验证通过，那么可以通过eachInvalid来让用户自定义，而无需要
191 | 		 * 		在插件中写它的操作方式
192 | 		 */
193 | 		return status;
194 | 	};
195 | 	$.extend($,{
196 | 		mvalidateExtend:function(options){
197 | 			return $.extend(extend, options);
198 | 		}
199 | 	});
200 | 
201 | 
202 | 
203 | 	$.fn.mvalidate=function(options){
204 | 		var defaults={
205 | 			type:1,
206 | 			validateInSubmit:true,
207 | 			sendForm:true,
208 | 			onKeyup:false,
209 | 			onChange:true,
210 | 			firstInvalidFocus:true,//第一个未通过验证的表单是否获得交代呢
211 | 			conditional:{},
212 | 			descriptions:{},
213 | 			eachField : $.noop,
214 | 			eachValidField:$.noop,
215 | 			eachInvalidField : $.noop,
216 | 			valid:$.noop,
217 | 			invalid:$.noop,
218 | 			namespace:"mvalidate"
219 | 		},
220 | 		opts=$.extend(true,defaults,options),
221 | 		flag,
222 | 		namespace=opts.namespace;
223 | 
224 | 		opts.type=Number(opts.type);
225 | 		opts.firstInvalid=false;
226 | 		flag=opts.type==1 ? false : true;
227 | 		return this.mvalidateDestroy().each(function(event) {
228 | 
229 | 			var $form=$(this),
230 | 				$fields;//存放当前表单下的所有元素;
231 | 			if(!$form.is("form")) return;
232 | 			opts.$form=$form;
233 | 			$form.data(namespace,{"options":opts});
234 | 			$fields=$form.find(allTypes);
235 | 
236 | 			//
237 | 			if(flag && opts.onKeyup){
238 | 				$fields.filter(type[0]).each(function() {
239 | 
240 | 					$(this).on("keyup."+namespace,function(event){
241 | 						validateField.call(this,event,opts)
242 | 					})
243 | 				});
244 | 			}
245 | 
246 | 			if(flag && opts.onChange){
247 | 				$fields.each(function() {
248 | 					var $this=$(this);
249 | 					if($this.is(type[1]+ ',' + type[2])){
250 | 						$(this).on('change.' + namespace, function(event) {
251 | 							validateField.call(this, event, opts);
252 | 						})
253 | 					}
254 | 				})
255 | 			}
256 | 
257 | 			//如果需要验证的时候,在提交表单的时候对所有的字段进行验证
258 | 			if(opts.validateInSubmit){
259 | 				$form.on("submit."+namespace,function(event){
260 | 					var formValid = true;
261 | 					opts.firstInvalid=false;
262 | 					$fields.each(function() {
263 | 						var status=validateField.call(this,event,opts);
264 | 						if(!status.pattern || !status.conditional || !status.required) {
265 | 							formValid = false;
266 | 						}
267 | 					});
268 | 
269 | 					if(formValid){
270 | 						if(!opts.sendForm){
271 | 							event.preventDefault();
272 | 						}
273 | 						if($.isFunction(opts.valid)){
274 | 							opts.valid.call($form,event,opts);
275 | 						}
276 | 					//验证没有通过,禁用提交事件,以及绑定在这个elem上的其他事件
277 | 					}else{
278 | 						event.preventDefault();
279 | 						event.stopImmediatePropagation();
280 | 						if($.isFunction(opts.invalid)) {
281 | 							opts.invalid.call($form,event,opts)
282 | 						}
283 | 					}
284 | 
285 | 				})
286 | 			}
287 | 		})
288 | 	};
289 | 	 $.fn.mvalidateDestroy=function(){
290 |         var $form=$(this),$fields,namespace="mvalidate",
291 |             dataValidate=$form.data(namespace);
292 |             
293 |         if(!dataValidate){
294 |             return $form;
295 |         }
296 |         if($form.is('form') && $.isPlainObject(dataValidate) && typeof(dataValidate.options.namespace) == 'string') {
297 |             $fields = $form.removeData(name).find(allTypes);
298 |             $fields.off('.' + dataValidate.options.namespace);
299 |         }   
300 |         return $form;
301 |     };
302 | 	$.fn.mvalidate.errorTipFormat=function(text){
303 | 		return '<div class="zvalid-resultformat">'+text+'</div>';
304 | 	}
305 | })
306 | 


--------------------------------------------------------------------------------