-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheasyValidator.html
174 lines (168 loc) · 6.16 KB
/
easyValidator.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript 表单验证插件</title>
<link rel="stylesheet" type="text/css" href="style/easyValidator.css">
</head>
<body>
<div class="login">
<form class="form" id="login">
<div class="btn-add" style="display:inline-block;border:1px solid orange;cursor:pointer;">增加</div>
<div class="form-infor">
<div class="form-item">
<label for="username">用户名:</label>
<input type="text" id="user-name" class="text user-name" value="请输入用户名" data-default="请输入用户名" />
<div class="error"></div>
<div class="tips">ssssssssssssssssss</div>
</div>
<div class="form-item">
<label for="select">身份：</label>
<select>
<option value=''>---请选择---</option>
<option value='0'>学生</option>
<option value='1'>军人</option>
<option value='2'>教师</option>
<option value='3'>记者</option>
<option value='4'>无业</option>
</select>
<div class="error"></div>
<div class="tips"></div>
</div>
<div class="form-item">
<label>密码:</label>
<input type="password" class="pwd passowrd" />
<div class="error"></div>
<div class="tips"></div>
</div>
<div class="form-item">
<label>确认密码:</label>
<input type="password" class="confirm-pwd passowrd" />
<div class="error"></div>
<div class="tips"></div>
</div>
<div class="form-item">
<label>注册邮箱:</label>
<input type="text" class="text reg-email" />
<div class="error"></div>
<div class="tips"></div>
</div>
<div class="form-item">
<label>你的心情：</label>
<textarea name=""></textarea>
<div class="error"></div>
<div class="tips"></div>
</div>
<div class="form-item">
<input id="read-text" type="checkbox" />
<label for="read-text">同意该协议</label>
<div class="error"></div>
</div>
<div class="form-item submit-container">
<input type="submit" class="form-submit" value="注册">
</div>
</div>
</form>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/easyValidator.js"></script>
<script type="text/javascript">
var v1 = new EasyValidator($('#login'), {
fullName: {
ele: '#user-name',
isRequired: true,
defaultValidate: ['isUserName']
},
readText: {
ele: '#read-text',
isRequired: true,
isEmpty: {
validate: function(val, ele) {
return ele.attr('checked') === 'checked' ? true : false;
},
message: '请选择协议' //错误消息
}
},
regEmail: {
ele: '.reg-email',
isRequired: false,
tips: '邮箱是你重要资料找回的联系信息',
isEmpty: {
validate: function(val) {
return val != '';
},
message: '邮箱不能为空！' //错误消息
},
defaultValidate: ['isEmail']
},
pwd: {
ele: '.pwd',
isRequired: true,
tips: '先填写我哦',
defaultValidate: ['isEmpty'],
minLength: {
validate: function(val) {
return val.length >= 6;
},
message: '密码长度至少6位以上'
},
isSame: {
validate: function(val) {
if ($('.confirm-pwd').val() !== '') {
return val === $('.confirm-pwd').val();
} else {
return true;
}
},
message: '密码不一致'
}
},
confirmPwd: {
ele: '.confirm-pwd',
isRequired: true,
tips: '确认密码要和初始一致',
defaultValidate: ['isEmpty'],
minLength: {
validate: function(val) {
return val.length >= 6;
},
message: '密码长度至少6位以上'
},
isSame: {
validate: function(val) {
return val === $('.pwd').val();
},
message: '密码不一致'
}
},
select: {
ele: 'select',
isRequired: true,
isEmpty: {
validate: function(val) {
return val !== '';
},
message: '选择不能为空'
}
}
}).initialize();
$('.btn-add').on('click', function() {
var tmp = ['<div class="form-item">',
'<label for="username">另一个:</label>',
'<input type="text" id="test" class="text" value="请输入用户名" data-default="请输入用户名" />',
'<div class="error"></div>',
'<div class="tips">ssssssssssssssssss</div>',
'</div>'
].join('');
$(this).parents('form').prepend(tmp);
v1.setCheckConfig({
testName: {
ele: '#test',
isRequired: true,
defaultValidate: ['isUserName']
}
}).initialize();
});
</script>
</body>
</html>