jobCode.html
3.03 KB
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
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet light portlet-fit portlet-form bordered">
<div class="portlet-body">
<form class="form-horizontal" id="jobCodeForm">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>您的输入有误，请检查下面的输入项
</div>
<div class="form-group" style="margin-top: 60px">
<label class="control-label col-md-5">姓名：
</label>
<div class="col-md-4">
<div class="input-icon right">
<i class="fa"></i>
<input type="input" class="form-control" name="realName" /> </div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-5">工号：
</label>
<div class="col-md-4">
<div class="input-icon right">
<i class="fa"></i>
<input type="input" class="form-control" name="jobCode" /> </div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-5 col-md-7">
<button type="submit" id="confirm" class="btn green">确定</button>
<button type="reset" class="btn default">取消</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(function(){
var form = $('#jobCodeForm');
//表单 validate
var error = $('.alert-danger', form);
$.validator.addMethod("jobcoderule", function(value, element) {
var reg = /^0[1-5]-[A-Za-z0-9]{5}$/;
return this.optional(element) || reg.test(value) && validate(value);
}, "格式应该为【2位公司代码-6位工号】");
//表单 validate
form.validate({
errorElement : 'span',
errorClass : 'help-block help-block-error',
focusInvalid : false,
rules : {
'realName': {
required: true,
minlength: 2,
maxlength: 16
},
'jobCode': {
required: true,
minlength: 6,
maxlength: 9,
jobcoderule: false
}
},
invalidHandler : function(event, validator) {
error.show();
App.scrollTo(error, -200);
},
highlight : function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight : function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
success : function(label) {
label.closest('.form-group').removeClass('has-error');
},
submitHandler : function(f) {
var params = form.serializeJSON();
error.hide();
$.ajax({
url: '/user/realName',
type: 'POST',
traditional: true,
data: params,
success: function(res){
layer.alert(res.data);
if (res.status == 'SUCCESS') {
layer.closeAll('page');
}
}
});
}
});
});
</script>