bootstrap html5 表单验证,Bootstrap如何使用表单验证插件bootstrapValidator？（代码实例）...

本篇文章给大家带来的内容是介绍Bootstrap使用表单验证插件bootstrapValidator的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。如果大家想要学习和获取更多的bootstrap相关教程也可以访问：bootstrap教程！

插件下载：http://www.jq22.com/jquery-info522

插件介绍

先上一个图：

下载地址：https://github.com/nghuuphuoc/bootstrapvalidator

使用方法：http://www.cnblogs.com/huangcong/p/5335376.html

使用提示

中文化：

下载插件后，将\js\bootstrapValidator\language\zh_CN.js 引入文件，即实现中文化

提交前验证表单：

更丰富一点的表单验证例子：http://www.jq22.com/yanshi522，直接上代码：1

2

3

4

BootstrapValidator demo

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

Sign up

24

25

26

27

28 Full name

29

30

31

32

33

34

35

36

37

38 Username

39

40

41

42

43

44

45 Email address

46

47

48

49

50

51

52 Password

53

54

55

56

57

58

59 Retype password

60

61

62

63

64

65

66 Gender

67

68

69

70 Male

71

72

73

74

75 Female

76

77

78

79

80 Other

81

82

83

84

85

86

87 Birthday

88

89 (YYYY/MM/DD)

90

91

92

93

94 Languages

95

96

97

98 English

99

100

101

102

103 French

104

105

106

107

108 German

109

110

111

112

113 Russian

114

115

116

117

118 Other

119

120

121

122

123

124

125 Programming Languages

126

127

128

129 .Net

130

131

132

133

134 Java

135

136

137

138

139 C/C++

140

141

142

143

144 PHP

145

146

147

148

149 Perl

150

151

152

153

154 Ruby

155

156

157

158

159 Python

160

161

162

163

164 Javascript

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179 Sign up

180 Sign up 2

181 Manual validate

182 Reset form

183

184

185

186

187

188

189

190

191

192

193 $(document).ready(function() {

194 // Generate a simple captcha

195 function randomNumber(min, max) {

196 return Math.floor(Math.random() * (max - min + 1) + min);

197 };

198 $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

199

200 $('#defaultForm').bootstrapValidator({

201 // live: 'disabled',

202 message: 'This value is not valid',

203 feedbackIcons: {

204 valid: 'glyphicon glyphicon-ok',

205 invalid: 'glyphicon glyphicon-remove',

206 validating: 'glyphicon glyphicon-refresh'

207 },

208 fields: {

209 firstName: {

210 validators: {

211 notEmpty: {

212 message: 'The first name is required and cannot be empty'

213 }

214 }

215 },

216 lastName: {

217 validators: {

218 notEmpty: {

219 message: 'The last name is required and cannot be empty'

220 }

221 }

222 },

223 username: {

224 message: 'The username is not valid',

225 validators: {

226 notEmpty: {

227 message: 'The username is required and cannot be empty'

228 },

229 stringLength: {

230 min: 6,

231 max: 30,

232 message: 'The username must be more than 6 and less than 30 characters long'

233 },

234 regexp: {

235 regexp: /^[a-zA-Z0-9_\.]+$/,

236 message: 'The username can only consist of alphabetical, number, dot and underscore'

237 },

238 remote: {

239 url: 'remote.php',

240 message: 'The username is not available'

241 },

242 different: {

243 field: 'password',

244 message: 'The username and password cannot be the same as each other'

245 }

246 }

247 },

248 email: {

249 validators: {

250 emailAddress: {

251 message: 'The input is not a valid email address'

252 }

253 }

254 },

255 password: {

256 validators: {

257 notEmpty: {

258 message: 'The password is required and cannot be empty'

259 },

260 identical: {

261 field: 'confirmPassword',

262 message: 'The password and its confirm are not the same'

263 },

264 different: {

265 field: 'username',

266 message: 'The password cannot be the same as username'

267 }

268 }

269 },

270 confirmPassword: {

271 validators: {

272 notEmpty: {

273 message: 'The confirm password is required and cannot be empty'

274 },

275 identical: {

276 field: 'password',

277 message: 'The password and its confirm are not the same'

278 },

279 different: {

280 field: 'username',

281 message: 'The password cannot be the same as username'

282 }

283 }

284 },

285 birthday: {

286 validators: {

287 date: {

288 format: 'YYYY/MM/DD',

289 message: 'The birthday is not valid'

290 }

291 }

292 },

293 gender: {

294 validators: {

295 notEmpty: {

296 message: 'The gender is required'

297 }

298 }

299 },

300 'languages[]': {

301 validators: {

302 notEmpty: {

303 message: 'Please specify at least one language you can speak'

304 }

305 }

306 },

307 'programs[]': {

308 validators: {

309 choice: {

310 min: 2,

311 max: 4,

312 message: 'Please choose 2 - 4 programming languages you are good at'

313 }

314 }

315 },

316 captcha: {

317 validators: {

318 callback: {

319 message: 'Wrong answer',

320 callback: function(value, validator) {

321 var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);

322 return value == sum;

323 }

324 }

325 }

326 }

327 }

328 });

329

330 // Validate the form manually

331 $('#validateBtn').click(function() {

332 $('#defaultForm').bootstrapValidator('validate');

333 });

334

335 $('#resetBtn').click(function() {

336 $('#defaultForm').data('bootstrapValidator').resetForm(true);

337 });

338 });

339

340

341

看331行，点击提交时，用$('#defaultForm').bootstrapValidator('validate');

触发表单验证

下面是碰到的一个坑：

bootstrapValidator默认逻辑是当表单验证失败时，把按钮给变灰色。

但是项目中，button并不在form内部，是通过事件绑定来ajax提交的。那么问题来了：

项目需要当form验证失败时，不执行所绑定的后续事件。百度半天找不到相关资料，最后还是要靠google：$("#yourform").submit(function(ev){ev.preventDefault();});

$("#submit").on("click", function(){

var bootstrapValidator = $("#yourform").data('bootstrapValidator');

bootstrapValidator.validate();

if(bootstrapValidator.isValid())

$("#yourform").submit();

else return;

});

酱紫就可以判断表单验证是否通过了。