基于Bootstrap+jQuery.validate实现表单验证
标签： 基于Bootstrap+jQuery.validate实现表单验证 JavaScript博客 51CTO博客
2023-04-27 18:23:53 206浏览
基于Bootstrap+jQuery.validate实现表单验证，这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持
这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。
用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解：
1.正则表达式的基本了解
其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍的效果吧。
2.ajax异步请求
在验证用户名是否存在、用户登录时账号或者密码错误时给出相应的提示。
3.一些方便的验证库，比如jQuery.validate
正因为如此普遍的需求和一定的复杂性，bootstrap表单和jQuery.validate表单校验等一些优秀的类库专为人们解决UI、表单校验问题。
下面就是我用bootstrap+jQuery.validate做的界面：
一、bootstrap3基本表单和水平表单
1、基本表单
基本的表单结构是 Bootstrap 自带的，下面列出了创建基本表单的步骤：
向父元素<form> 添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
1. <formrole="form">
2. <divclass="form-group">
3. <labelfor="name">名称</label>
4. <inputtype="text"class="form-control"id="name"
5. placeholder="请输入名称">
6. </div>
7. </form>效果如下：
2、水平表单
在了解水平表单之间，我们应该对bootstrap的网格系统有所了解。
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列,也就是说它是以百分比定义宽度的。
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：
步骤1：向父 <form> 元素添加 class .form-horizontal。
步骤2：把标签和控件放在一个带有 class .form-group 的 <div> 中。
步骤3：向标签添加 class .control-label。
1. <formclass="form-horizontal"role="form">
2. <divclass="form-group">
3. <labelfor="firstname"class="col-sm-2 control-label">名字</label>
4. <divclass="col-sm-10">
5. <inputtype="text"class="form-control"id="firstname"
6. placeholder="请输入名字">
7. </div>
8. </div>
9. </form>效果如下：
二、jQuery.validate 自定义校验方法
1、自定义校验方法
1. // 手机号码验证
2. jQuery.validator.addMethod("isPhone",function(value, element){
3. var length = value.length;
4. returnthis.optional(element)||(length ==11&&/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
5. },"请正确填写您的手机号码。");2、调用自定义校验
1. rules :{
2. phone :{
3. required :true,
4. isPhone :true
5. }
6. }3、自定义错误显示
三、register.html
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2. <html>
3. <head>
4. <title>注册</title>
5. <metahttp-equiv="pragma"content="no-cache">
6. <metahttp-equiv="cache-control"content="no-cache">
7. <metahttp-equiv="expires"content="0">
8.
9. <linktype="text/css"href="jslib/bootstrap-3.3.5/css/bootstrap.min.css"rel="stylesheet">
10.
11. <scriptsrc="jslib/jquery-1.9.1.min.js"type="text/javascript"></script>
12. <scriptsrc="scripts/form.js"type="text/javascript"></script>
13. <scriptsrc="jslib/jQuery.validate/jquery.validate.js"type="text/javascript"></script>
14. <scriptsrc="jslib/bootstrap-3.3.5/bootstrap.min.js"type="text/javascript"></script>
15. <styletype="text/css">
16. #register-form{
17. border:1px solid rgb(197,197,197);
18. width:1000px;
19. margin:auto;
20. border-image: none;
21. padding:30px;
22. border-radius:3px;
23. }
24. </style>
25.
26. </head>
27. <body>
28. <h1class="text-center text-danger">用户注册</h1><br>
29. <formid="register-form"role="form"class="form-horizontal"method="get">
30. <divclass="form-group">
31. <labelclass="col-sm-2 control-label"for="firstname">用户名：</label>
32. <divclass="col-sm-5">
33. <inputclass="form-control"id="firstname"name="firstname"/>
34. </div>
35. </div>
36. <divclass="form-group">
37. <labelclass="col-sm-2 control-label"for="password">密码：</label>
38. <divclass="col-sm-5">
39. <inputclass="form-control"id="password"name="password"type="password"/>
40. </div>
41. </div>
42. <divclass="form-group">
43. <labelclass="col-sm-2 control-label"for="confirm_password">确认密码：</label>
44. <divclass="col-sm-5">
45. <inputclass="form-control"id="confirm_password"name="confirm_password"type="password"/>
46. </div>
47. </div>
48. <divclass="form-group">
49. <labelclass="col-sm-2 control-label"for="email">E-Mail：</label>
50. <divclass="col-sm-5">
51. <inputclass="form-control"id="email"name="email"/>
52. </div>
53. </div>
54. <divclass="form-group">
55. <labelclass="col-sm-2 control-label"for="phone">手机号码：</label>
56. <divclass="col-sm-5">
57. <inputclass="form-control"id="phone"name="phone"/>
58. </div>
59. </div>
60. <divclass="form-group">
61. <labelclass="col-sm-2 control-label"for="tel">固定电话：</label>
62. <divclass="col-sm-5">
63. <inputclass="form-control"id="tel"name="tel"/>
64. </div>
65. </div>
66. <divclass="form-group">
67. <labelclass="col-sm-2 control-label"for="address">家庭住址：</label>
68. <divclass="col-sm-5">
69. <inputclass="form-control"id="address"name="address"/>
70. </div>
71. </div>
72. <divclass="form-group">
73. <divclass="col-md-offset-2 col-md-10">
74. <buttontype="submit"class="btn btn-primary btn-sm">注册</button>
75. <buttontype="reset"class="btn btn-primary btn-sm">重置</button>
76. </div>
77. </div>
78. </form>
79. </body>
80. </html>四、form.js
1. $(document).ready(function(){
2. // 手机号码验证
3. jQuery.validator.addMethod("isPhone",function(value, element){
4. var length = value.length;
5. returnthis.optional(element)||(length ==11&&/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
6. },"请正确填写您的手机号码。");
7.
8. // 电话号码验证
9. jQuery.validator.addMethod("isTel",function(value, element){
10. var tel =/^(\d{3,4}-)?\d{7,8}$/g;// 区号－3、4位 号码－7、8位
11. returnthis.optional(element)||(tel.test(value));
12. },"请正确填写您的电话号码。");
13. // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。
14. jQuery.validator.addMethod("isPwd",function(value, element){
15. var str = value;
16. if(str.length <6|| str.length >18)
17. returnfalse;
18. if(!/^[a-zA-Z]/.test(str))
19. returnfalse;
20. if(!/[0-9]/.test(str))
21. return fasle;
22. returnthis.optional(element)||/[^A-Za-z0-9]/.test(str);
23. },"以字母开头，长度在6-12之间，必须包含数字和特殊字符。");
24.
25. $("#register-form").validate({
26. errorElement :'span',
27. errorClass :'help-block',
28.
29. rules :{
30. firstname :"required",
31. email :{
32. required :true,
33. email :true
34. },
35. password :{
36. required :true,
37. isPwd :true
38. },
39. confirm_password :{
40. required :true,
41. isPwd :true,
42. equalTo :"#password"
43. },
44. phone :{
45. required :true,
46. isPhone :true
47. },
48. tel :{
49. isTel :true
50. },
51. address :{
52. minlength :10
53. }
54. },
55. messages :{
56. firstname :"请输入姓名",
57. email :{
58. required :"请输入Email地址",
59. email :"请输入正确的email地址"
60. },
61. password :{
62. required :"请输入密码",
63. minlength : jQuery.format("密码不能小于{0}个字 符")
64. },
65. confirm_password :{
66. required :"请输入确认密码",
67. minlength :"确认密码不能小于5个字符",
68. equalTo :"两次输入密码不一致不一致"
69. },
70. phone :{
71. required :"请输入手机号码"
72. },
73. tel :{
74. required :"请输入座机号码"
75. },
76. address :{
77. required :"请输入家庭地址",
78. minlength : jQuery.format("家庭地址不能少于{0}个字符")
79. }
80. },
81. //自定义错误消息放到哪里
82. errorPlacement :function(error, element){
83. element.next().remove();//删除显示图标
84. element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
85. element.closest('.form-group').append(error);//显示错误消息提示
86. },
87. //给未通过验证的元素进行处理
88. highlight :function(element){
89. $(element).closest('.form-group').addClass('has-error has-feedback');
90. },
91. //验证通过的处理
92. success :function(label){
93. var el=label.closest('.form-group').find("input");
94. el.next().remove();//与errorPlacement相似
95. el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
96. label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");
97. label.remove();
98. },
99.
100. });
101. });源码下载：Bootstrap+jQuery.validate实现表单验证
以上就是Bootstrap+jQuery.validate实现表单验证相关知识介绍，希望大家可以熟练掌握，设计自己的表单验证。
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
暂无评论，快来写一下吧
展开评论
