BootstrapValidator 验证表单

在线实例

实例演示

使用方法

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">自动验证</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. });

复制

参数详解

参数	描述	默认值
defaultSubmit	默认提交表单	-
disableSubmitButtons	禁用或启用提交按钮	-
enableFieldValidators	启用/禁用所有给定的字段验证器 （如果 true,使字段验证器。如果 false禁用字段验证器）	-
getFieldElements	检索字段元素的名字	-
isValid	返回 true如果所有的表单字段是有效的。否则,返回 false.	-
resetForm	重置表单	-
updateElementStatus	更新验证给定元素的结果	-
updateStatus(field, status, validatorName)	更新为给定字段验证器的结果，status可以 NOT_VALIDATED, VALIDATING, INVALID或 VALID，validatorName 字符串 验证器的名称。如果 null所有验证器,更新方法有效性的结果	-

---

下载