Bootstrap Validator 表單驗(yàn)證
在線演示地址:http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html
使用方法,代碼如下所示:
1.<form id="defaultForm" method="post" class="form-horizontal" action="target.php">
2. <div class="form-group">
3. <label class="col-lg-3 control-label">用戶名</label>
4. <div class="col-lg-5">
5. <input type="text" class="form-control" name="username" />
6. </div>
7. </div>
8.
9. <div class="form-group">
10. <label class="col-lg-3 control-label">郵箱</label>
11. <div class="col-lg-5">
12. <input type="text" class="form-control" name="email" />
13. </div>
14. </div>
15.
16. <div class="form-group">
17. <label class="col-lg-3 control-label">生日</label>
18. <div class="col-lg-5">
19. <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
20. </div>
21. </div>
22.
23. <div class="form-group">
24. <div class="col-lg-9 col-lg-offset-3">
25. <button type="submit" class="btn btn-primary" name="signup" value="Sign up">提交</button>
26. <button type="button" class="btn btn-info" id="validateBtn">自動(dòng)驗(yàn)證</button>
27. <button type="button" class="btn btn-info" id="resetBtn">重置表單</button>
28. </div>
29. </div>
30.</form>
1.$('#defaultForm').bootstrapValidator({
2. message: 'This value is not valid',
3. feedbackIcons: {
4. valid: 'glyphicon glyphicon-ok',
5. invalid: 'glyphicon glyphicon-remove',
6. validating: 'glyphicon glyphicon-refresh'
7. },
8. fields: {
9. username: {
10. message: 'The username is not valid',
11. validators: {
12. notEmpty: {
13. message: 'The username is required and cannot be empty'
14. },
15. stringLength: {
16. min: 6,
17. max: 30,
18. message: 'The username must be more than 6 and less than 30 characters long'
19. },
20. regexp: {
21. regexp: /^[a-zA-Z0-9_\.]+$/,
22. message: 'The username can only consist of alphabetical, number, dot and underscore'
23. },
24. remote: {
25. url: 'remote.php',
26. message: 'The username is not available'
27. },
28. different: {
29. field: 'password',
30. message: 'The username and password cannot be the same as each other'
31. }
32. }
33. },
34. email: {
35. validators: {
36. emailAddress: {
37. message: 'The input is not a valid email address'
38. }
39. }
40. },
41. }
42.});

以上所述是小編給大家介紹的Bootstrap Validator 表單驗(yàn)證的全部敘述,希望對(duì)大家有所幫助,如果大家想了解更多內(nèi)容敬請(qǐng)關(guān)注腳本之家!
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- jquery插件bootstrapValidator表單驗(yàn)證詳解
- bootstrap 表單驗(yàn)證使用方法
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)表單驗(yàn)證
- 基于BootstrapValidator的Form表單驗(yàn)證(24)
- Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能
- 基于Bootstrap表單驗(yàn)證功能
相關(guān)文章
淺談JavaScript中的this指針和引用知識(shí)
this是javascript的一個(gè)關(guān)鍵字,隨著函數(shù)使用場(chǎng)合不同,this的值會(huì)發(fā)生變化。但是總有一個(gè)原則,那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。接下來(lái)通過(guò)本文給大家介紹js中的this指針和引用,非常不錯(cuò),需要的朋友參考下2016-08-08
js當(dāng)前頁(yè)面登錄注冊(cè)框,固定div,底層陰影的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇js當(dāng)前頁(yè)面登錄注冊(cè)框,固定div,底層陰影的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行
這篇文章主要介紹了JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
JavaScript如何實(shí)現(xiàn)精準(zhǔn)倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)精準(zhǔn)倒計(jì)時(shí)功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
JavaScript 一行代碼,輕松搞定浮動(dòng)快捷留言-V2升級(jí)版

