-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvalidate_opt_old.html
158 lines (145 loc) · 7.84 KB
/
validate_opt_old.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
<!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}
h2{text-align:center;font-size:18px}
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;margin-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: 120px; font-size: 12px; text-align:right; margin-right: 15px; float: left;line-height:24px}
ul.fm label.other { font-size: 14px;cursor:pointer}
ul.fm span { color: #999; }
ul.fm span.rq { color: #f00; display: inline-block;vertical-align:-4px;*vertical-align:-1px;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;}
.Vmsg{position:absolute}
/*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;}
.err{border-color:#c00}
</style>
</head>
<body>
<form id="exA" class="fValidator-form" method="post" action="#">
<h2>提示定位</h2>
<ul class="fm">
<li>
<label for="exA_Id" class="first">定位上</label>
<input class="validate" id="exA_Id" name="id" type="text" />
<span class="Vmsg" data-valid="elemt:'exA_Id',rule:'required',warn:_ZUI_不能为空._ZUI_,pass:' ',passhide:1,pos:'north',skew:'0,4'">定位上</span>
</li>
<li>
<label for="exA_Id2" class="first">定位右</label>
<input class="validate" id="exA_Id2" name="id" type="text" />
<span class="Vmsg" data-valid="elemt:'exA_Id2',rule:'required',warn:_ZUI_不能为空._ZUI_,pass:' ',passhide:1,pos:'east',skew:'4,0'">定位右</span>
</li>
<li>
<label for="exA_Id3" class="first">定位下</label>
<input class="validate" id="exA_Id3" name="id" type="text" />
<span class="Vmsg" data-valid="elemt:'exA_Id3',rule:'required',warn:_ZUI_不能为空._ZUI_,pass:' ',passhide:1,pos:'south',skew:'0,4'">定位下</span>
</li>
<li style="padding-top:24px">
<label for="exA_Id4" class="first">定位左</label>
<input class="validate" id="exA_Id4" name="id" type="text" />
<span class="Vmsg" data-valid="elemt:'exA_Id4',rule:'required',warn:_ZUI_不能为空._ZUI_,pass:' ',passhide:1,pos:'west',skew:'120,0'">定位左</span>
</li>
<li style="padding-top:24px">
<label for="exA_Id5" class="first">定位自定义</label>
<input class="validate" id="exA_Id5" name="id" type="text" />
<span class="Vmsg" data-valid="elemt:'exA_Id5',rule:'required',warn:_ZUI_不能为空._ZUI_,pass:' ',passhide:1,pos:'custom',skew:'20,20'">定位左</span>
</li>
</ul>
<h2>提示显示</h2>
<ul class="fm">
<li>
<label for="exA_Id6" class="first">验证通过不显示提示</label>
<input class="validate" id="exA_Id6" name="id" type="text" />
<span class="Vmsg" data-valid="elemt:'exA_Id6',rule:'required',warn:_ZUI_不能为空._ZUI_,pass:' ',passhide:1">验证通过不显示提示</span>
</li>
<li>
<label for="exA_Id7" class="first">不通过不显示提示</label>
<input class="validate" id="exA_Id7" name="id" type="text"/>
<span class="Vmsg" data-valid="elemt:'exA_Id7',rule:'required',warn:_ZUI_不能为空._ZUI_,pass:' ',valihide:1,passhide:1">验证不通过不显示提示</span>
</li>
<li>
<label for="exA_Id8" class="first">自定义验证通过语</label>
<input class="validate" id="exA_Id8" name="id" type="text" />
<span class="Vmsg" data-valid="elemt:'exA_Id8',rule:'required',warn:_ZUI_不能为空._ZUI_,pass:'你想说什么'">自定义验证通过语</span>
</li>
<li>
<label class="first"> </label>
<input class="validate" id="sendBtn" type="button" value="Submit"/>
<input class="validate" id="restBtn" type="button" value="Reset"/>
<input id="Hand" type="button" value="手动触发" />
</li>
</ul>
</form>
<!-- <script>
//var str = "nisdhfis <img sds id = 'emoticon01' /> sdf <img sds id = 'abc01' /> aaa";
//
//str = str.replace(/<\s?img[^>]*>/gi,'');
//
//alert(str)
</script>-->
<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:'span.Vmsg',
tagClass:'Vmsg',
autoSbmit:false,//是否开启自动提交
submitBtn:'#sendBtn',
restBtn:'#restBtn',
valiHide:true,//是否开启验证不可见表单规则
infoHide:true,//是否开启错误提示点击消失
locating:true,//是否开启错误自动定位
keybord:false,//是否开启enter键提交表单
valiHide:true,
onSubmit: function(fm,err){
console.log(err);
if(err<1){
//fm.submit()
}
}
});
$(document).ready(function(){
$('#Hand').on('click',function(){
console.log(valid._onSubmit()[1]);
});
});
</script>
</body>
</html>