/
exclude.html
executable file
·98 lines (90 loc) · 3.61 KB
/
exclude.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
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>exclude用法举例</title>
<script src="http://g.tbcdn.cn/kissy/k/1.4.7/seed-min.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://g.tbcdn.cn/kissy/k/1.4.7/??css/dpl/base-min.css,css/dpl/forms-min.css,button/assets/dpl-min.css">
<style type="text/css">
form{
width:600px;
}
</style>
</head>
<body>
<h2>exclude用法举例</h2>
<p>Field的exclude配置非常有用，有时我们需要根据业务场景排除字段的验证。</p>
<p>V2.0.0 Auth新增fnFilter参数，可以用于控制不需要实例化的字段。</p>
<form class="form-horizontal refund-form logistics-form" method="post" action="" id="J_Auth">
<input type="hidden" name="hidden" required value=""/>
<!--物流公司-->
<div class="control-group">
<label class="control-label">物流公司：<em>*</em></label>
<div class="controls">
<select class="g-u text-input select J_LogisticsCompany" name="logisticsCompany" required required-msg="请选择一个物流公司">
<option value="" selected="selected">请选择物流公司</option>
<option value="1" data-type="快递">EMS</option>
<option value="2" data-type="快递">申通E物流</option>
<option value="9" data-type="快递">其他</option>
</select>
</div>
</div>
<!--物流方式-->
<div class="control-group" id="bidi-form-17">
<label class="control-label">物流方式：<em>*</em></label>
<div class="controls">
<label class="radio control-inline">
<input class="J_LogisticsType" name="logisticsType" type="radio" value="200" required="" required-msg="必须选择一项物流方式！" msg-wrapper="logisticsType-auth-wrapper"> 快递
</label>
<label class="radio control-inline">
<input class="J_LogisticsType" name="logisticsType" type="radio" value="100" required=""> 平邮
</label>
<div id="logisticsType-auth-wrapper"></div>
</div>
</div>
<div class="form-actions">
<input class="ks-button ks-button-primary ks-button-shown" type="submit" value="提交">
<label class="checkbox control-inline">
<input class="J_IsAuthType" name="is-auth-type" type="checkbox" value="1" checked> 验证物流方式
</label>
</div>
</form>
<script>
var S = KISSY;
if (S.Config.debug) {
var srcPath = "../";
S.config({
packages:[
{
name:"kg/auth/2.0.1",
path:srcPath,
charset:"utf-8",
ignorePackageNameInUri:true
}
]
});
}
S.use('kg/auth/2.0.1/,kg/auth/2.0.1/plugin/msgs/,kg/auth/2.0.1/plugin/msgs/style.css', function (S, Auth,AuthMsgs) {
var auth = new Auth('#J_Auth',{
//过滤掉不需要实例化的字段
fnFilter:function($field){
return $field.attr('type') == 'hidden';
}
});
auth.plug(new AuthMsgs());
auth.render();
S.log(auth.getField('hidden'));
S.one('.J_IsAuthType').on('click',function(ev){
var checked = S.one(ev.target).prop('checked');
var typeField = auth.field('logisticsType');
if(checked){
//验证所有规则
typeField.set('exclude','');
}else{
typeField.set('exclude','required');
}
})
})
</script>
</body>
</html>