-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvalidate1.2a_More.html
251 lines (232 loc) · 10.7 KB
/
validate1.2a_More.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="css/asdui1.4b.css" type="text/css" media="all" />
<style type="text/css">
*{padding:0;margin:0}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif}
a { color: #0099CB; text-decoration: none; }
a:hover { color: #FF7E03; }
ul,ol,li{list-style:none;padding:0;margin:0;}
input { border:1px solid #919191; height:18px; padding:3px 0 1px 2px; vertical-align:middle}
input.radio, input.checkbox { width:12px;border:0; margin:0 5px;float:left }
input.button { background:url(images/train.png) 0 -940px repeat-x; height:24px; line-height:22px; color:#fff; padding:0 5px; border:1px solid #5B9400; margin:5px 20px 5px 0; cursor:pointer }
a:hover input.button { background:url(images/train.png) 0 -964px repeat-x; }
select { height:22px; line-height:18px; margin-right:5px; _margin-top:3px; }
textarea { padding: 3px; border: 1px solid #919191; }
/*commen*/
/*------------------------@Form-------------------------------*/
ul.fm { margin: 30px 0;padding-left:300px}
ul.fm li {padding:5px 0; position:relative}
ul.fm li.hr {/* border-top: 1px solid #ccc; padding-top: 20px; */}
ul.fm input[type="text"], ul.fm textarea { width: 300px; }
ul.fm select {margin:0;width: 90px; }
ul.fm textarea { height: auto; }
ul.fm .radio { width: 30px;cursor:pointer;line-height:20px; float:none; }
ul.fm label.first { display: inline-block; width: 100px; font-size: 12px; text-align:right; margin-right: 15px; float: left; margin-top: 4px; }
ul.fm label.other { font-size: 14px;cursor:pointer}
ul.fm span { color: #999; }
ul.fm span.rq { color: #f00; display: inline-block; margin: 0 3px; }
ul.fm li .customSelect{width:100px;position:static}
ul.bd .sb { margin: 10px 20px; text-align: center; }
.pass{background:#f6fbed;border-color:#7DBE09}
/*-----------------------//Form-----------------------------*/
.fValidator-form fieldset {border: 1px solid #ccc;padding: 10px;}
.fValidator-form legend {padding: 0 5px;}
.fValidator-form input, select {color: #666;}
.fValidator-form input {padding: 2px;}
.full {width: 100%;}
.half {width: 50%; vertical-align: top;}
/*custom select*/
.customSelect{position:absolute;z-index:-1;background:#fff url(images/select.jpg) right center no-repeat;border:1px solid #d8d8d8;color:#555;height:20px;line-height:20px;
-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;box-shadow: 0 0 2px #eee inset;min-width:50px}
.customSelectInner{padding-left:5px;text-align:left}
.customSelect.customSelectHover {border-color:#c7c7c7;background-color:#f5f5f5;}
.customSelect.customSelectFocus {border-color:#aaa;}
.customSelect.customSelectOpen {border-color:#aaa;}
.customSelect.customSelectChanged {-webkit-animation: changed 0.5s;-moz-animation: changed 0.5s;-ms-animation: changed 0.5s;animation: changed 0.5s;}
</style>
</head>
<body>
<h2>异步验证</h2>
<form id="exA" class="fValidator-form" method="post" action="#">
<ul class="fm" id="fm">
<li>
<label for="exA_Id" class="first">异步验证:<span class="rq">*</span></label>
<input class="validate" data-valid="elemt:'#exA_Id',tip:'#tip01',rule:'ajax',action:'checkRegName.php',pos:'north',warn:_ZUI_请输入昵称._ZUI_,pass:' ',passhide:1" id="exA_Id" name="id" type="text" />
<dfn>自定义验证：邮箱地址或者手机号并提交服务器验证</dfn>
<span class="Vmsg" id="tip01"></span>
</li>
<li>
<label for="exA_Id2" class="first">异步验证2:<span class="rq">*</span></label>
<input class="validate" data-valid="elemt:'#exA_Id2',tip:'#tip02',rule:'aynsc',pos:'north',warn:_ZUI_请输入昵称._ZUI_,pass:' ',passhide:1" id="exA_Id2" name="id" type="text" />
<dfn>自定义验证：邮箱地址或者手机号并提交服务器验证</dfn>
<span class="Vmsg" id="tip02"></span>
</li>
<li>
<label for="fix_Id3" class="first">email 或 phone:<span class="rq">*</span></label>
<input class="validate" data-valid="elemt:'#fix_Id3',tip:'#tip03',rule:'email|moblie',warn:_ZUI_请输入邮箱或手机号._ZUI_,pass:' ',passhide:1" id="fix_Id3" name="id" type="text" />
<span class="Vmsg" id="tip03">请输入邮箱或手机号</span>
</li>
<li>
<label for="email_address" class="first"><em class="red">*</em>Email addresses<dfn class="gray">(逗号分隔)</dfn></label>
<textarea class="validate" data-valid="elemt:'#email_address',tip:'#tip04',rule:'emailArr',warn:_ZUI_请输入邮箱地址以逗号分隔._ZUI_,pass:' ',passhide:1" name="emails" id="email_address" rows="5" cols="60" class="textarea"></textarea>
<span class="Vmsg" id="tip04"> </span>
</li>
<li>
<label for="card" class="first">信用卡:<span class="rq">*</span></label>
<input class="validate" data-valid="elemt:'#card',tip:'#tip05',rule:'creditcard',warn:_ZUI_请输入信用卡._ZUI_,pass:' ',passhide:1" id="card" name="decimal" type="text" />
<span class="Vmsg" id="tip05">请输入信用卡</span>
</li>
<li>
<label class="first"> </label>
<input id="sendBtn" type="button" value="Submit"/>
<input id="restBtn" type="button" value="Reset"/>
</li>
</ul>
</form>
<h2>禁止验证</h2>
<form id="disFm" class="fValidator-form" method="post" action="#">
<ul class="fm" id="fm">
<li>
<label for="dis_Id" class="first">我被禁止了:<span class="rq">*</span></label>
<input class="validate" data-valid="elemt:'#dis_Id',tip:'#tip06',rule:'required',warn:_ZUI_请输入点什么._ZUI_,pass:' ',passhide:1" id="dis_Id" name="id" type="text" disabled="disabled" />
<span class="Vmsg" id="tip06"></span>
</li>
<li>
<label class="first"> </label>
<input id="sendBtn2" type="button" value="Submit"/>
<input id="restBtn2" type="button" value="Reset"/>
<a href="javascript:;" id="liveInput">激活</a>
<a href="javascript:;" id="noback">无回调验证</a>
</li>
</ul>
<div id="output"></div>
</form>
<script type="text/javascript" src="js/jquery1.91.min.js"></script>
<script src="js/asdui.js" type="text/javascript"></script>
<script type="text/javascript">
var valid = new ZUI.Validator("exA",{
ruleTag:'.validate',
tagClass:'Vmsg',
autoSbmit:false,//是否开启自动提交
submitBtn:'#sendBtn',
restBtn:'#restBtn',
locating:true,
onSubmit: function(fm,err){
//console.log(fm);
console.log('erro:'+err);
},
ajax:{type:"ajax",re:function(a,b,c,d){//a为当前输入的值，b为当前的input对象，c为验证提示的tip,d为当前验证dom对象
var mobi = d.options['moblie'].re,mail = d.options['email'].re,action = c.data('action'), NStyle = d.options.styleNeutral,IStyle = d.options.styleInvalid;satus=false;
//step01
var mb =mobi.test(a),ml=mail.test(a);
if(mb || ml){
if(!c.hasClass('Vpass')){
b.addClass(d.options.styleProcess).prop('disabled',true);
c.attr('class',"Vmsg Vsend").html('服务器正在验证...').flpos(b,'north',0,2);
// $.ajax({
// type: "POST",
// url: action,
// data: {"params" : a}
// }).done(function() {b.removeClass(d.options.styleProcess).prop('disabled',false);})
// //.fail(function() { alert("error"); })
// .always(function(datas) {
//
// b.removeClass(d.options.styleProcess).prop('disabled',false);
// if(datas == 0){
//
// b.removeClass(IStyle);
// c.attr('class',"Vmsg Vpass").html(mb ? '您输入的手机号可以使用。':'您输入的邮件地址可以使用。');
// d._onSubmit();
// }else{
//
// b.addClass(IStyle);
// c.attr('class',"Vmsg Verro").html(mb ? '该手机号已被注册。':'该邮件地址已被注册。');
// }
//
//
// });
$('body').oneTime('5s',function(){
b.removeClass(d.options.styleProcess).prop('disabled',false);
//satus = true;
c.attr('class',"Vmsg Vpass").html(mb ? '您输入的手机号可以使用。':'您输入的邮件地址可以使用。');
d._onSubmit();
});
}
}else{
satus = false;
b.css(IStyle);
c.attr('class',"Vmsg Verro").html('您输入的用户名不合法。');
};
return satus;
},custom:1
},
aynsc:{type:"aynsc",re:function(a,b,c,d){
if(c.hasClass('Vpass'))return true;
setTimeout(function(){
b.removeClass(d.options.styleProcess).prop('disabled',false);
//satus = false;
c.attr('class',"Vmsg Vpass").html('验证通过.');
d._onSubmit();
console.log(555);
},2000);
},custom:1},
emailArr:{type:"emailArr",re:function(a,b,c){//a为当前输入的值，b为当前的input对象，c为验证提示的tip
if(a =='')return false;
var valid_regexp = /^[a-z0-9\._-]{1,30}@([a-z0-9_-]{1,30}\.){1,5}[a-z]{2,4}$/i;
var emails = a.split(',');
for (var i=0; i<emails.length; i++) {
if(!valid_regexp.test(emails[i])) {
return false;
}
}
return true;
}},
creditcard:{
type:"creditcard",
re:/^(?:4[0-9]{12}(?:[0-9]{3})?|(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$/
}
});
//^(?:4[0-9]{12}(?:[0-9]{3})? # Visa
// | (?:5[1-5][0-9]{2} # MasterCard
// | 222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}
// | 3[47][0-9]{13} # American Express
// | 3(?:0[0-5]|[68][0-9])[0-9]{11} # Diners Club
// | 6(?:011|5[0-9]{2})[0-9]{12} # Discover
// | (?:2131|1800|35\d{3})\d{11} # JCB
//)$
var valid2 = new ZUI.Validator("disFm",{
ruleTag:'.validate',
tagClass:'Vmsg',
autoSbmit:false,//是否开启自动提交
submitBtn:'#sendBtn2',
restBtn:'#restBtn2',
valiHide:true,//是否开启验证不可见表单规则
infoHide:true,//是否开启错误提示点击消失
locating:true,//是否开启错误自动定位
keybord:false,//是否开启enter键提交表单
Qmode:false,
validDisabled:false,
onSubmit: function(fm,err){
var h = '';
h+='错误数:'+err;
if(err<1){
h += '验证通过。';
}
$('#output').html(h);
}
});
$(document).ready(function(){
$('#liveInput').on('click',function(){
$('#dis_Id').prop('disabled',false);
});
$('#noback').on('click',function(){
$('#output').html('错误数:' + valid2._onSubmit()[1]);
});
});
</script>
</body>
</html>