-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
64 lines (55 loc) · 2.43 KB
/
index.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
/*叠加风格*/
#form_tip_cover { position:fixed; top:50%; left:50%; z-index:99; margin:-50px 0 0 -100px; padding:30px; display:none; width:140px; text-align:center; font:normal 1.4em/1em '\5FAE\8F6F\96C5\9ED1'; color:#fff;
-webkit-border-radius:6px; -moz-border-radius:6px; -o-border-radius:6px; border-radius:6px;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000', endColorstr='#CC000000');background:rgba(0,0,0,0.8);
}
:root #form_tip_cover {filter:none;}/*for IE9*/
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="vForm.js"></script>
</head>
<body>
<form id="test">
<p><input type="text" class="phone" data-empty="请填写xx" data-error="手机号码格式错误" /></p>
<p><input type="text" class="phone" data-empty="请填写xx" data-error="手机号码格式错误" /></p>
<p><input type="text" class="phone" data-empty="请填写xx" data-error="手机号码格式错误" /></p>
<p><input type="text" id="email" data-empty="请填写xx" data-error="手机号码格式错误" /></p>
<p>
<label><input type="checkbox" name="sex" value="1" />男</label>
<label><input type="checkbox" name="sex" value="2" />女</label>
</p>
<p><textarea id="texta" data-error="最少要5个字" ></textarea></p>
<p><input type="submit" value="提交" /></p>
</form>
<div id="form_tip_cover"></div>
<script type="text/javascript">
$('#test').vForm({
item: [
['input.phone', 'phone'], //插件库里面的正则，可自行拓展
['#email', /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/], //正则
['#texta', function(target){ //自定义function验证
return target.length > 5;
}]
],
//额外的验证条件
extra: function(){
var b = $('input[name="sex"]:checked').length > 0;
if(!b){
$.vForm.tips(0, $('body'), '请选择性别');
}
},
//验证成功后回调函数（不设置则普通表单提交）
submitCallback: function(t, btn, fn){
$.vForm.tips(0, $('body'), 'submit');
console.log('submit');
}
});
</script>
</body>
</html>