bootstrapValidator表單驗證：

github下載：https://github.com/pengpengbhne/BootstrapValidator

引入js等

  6     <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
  7     <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
  

 11 
 12     <script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script>
 13     <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
 14     <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
 

html:

<a class="btn btn-base btn-xm-base" data-toggle="modal" data-target="#myModal2">
<span class="glyphicon glyphicon-plus btn-base-padding"></span>大按鈕</a>

<!--模態框2  -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" onclick="modelClose2()" aria-hidden="true">&times;</button>
			<h4 class="modal-title" id="myModalLabel">新增使用者</h4>
		</div>
        <div class="row modal-body">
            <!-- form: -->
            <section>
                <div class="col-md-12">
                    <form id="defaultForm" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-3 control-label">使用者名稱：</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="username" placeholder="使用者名稱"  />
                            </div>
                        </div>
						<div class="form-group">
                            <label class="col-md-3 control-label">角色：</label>
                            <div class="col-md-8">
                                 
                                <select class="selectpicker"  title="-----請選擇-----"
									data-style="select-info"
									data-width="370px"
									name="roles"
									id="roles">
                         
								</select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">郵箱：</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="email" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">密碼：</label>
                            <div class="col-md-8">
                                <input type="password" class="form-control" name="password" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">確認密碼：</label>
                            <div class="col-md-8">
                                <input type="password" class="form-control" name="confirmPassword" />
                            </div>
                        </div>
						<div class="form-group">
                             <label class="col-md-3 control-label">手機號：</label>
                             <div class="col-md-8">
                                  <input type="text" class="form-control" name="phoneNumber" />
                             </div>
                        </div>
	 					<div class="form-group">
	                        <label class="col-md-3 control-label">描述：</label>
	                        <div class="col-md-8">
	                            <textarea class="form-control" name="dis" rows="10" ></textarea>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-3 control-label">檔案大小和型別</label>
	                        <div class="col-md-8">
	                            <input type="file" class="form-control" name="secondFile" />
	                            <span class="help-block">棄用</span>
	                        </div>
	                    </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">性別：</label>
                            <div class="col-md-8">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="gender" value="male" /> 男
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="gender" value="female" /> 女
                                    </label>
                                </div>
                            </div>
                        </div>
						<div class="form-group">
                             <label class="col-md-3 control-label">年齡：</label>
                             <div class="col-md-8 ">
                                  <input type="text" class="form-control" name="ages" />
                             </div>
                        </div>

                       <div class="form-group ">
			                <label for="name" class="col-md-3 control-label">生日：</label>
			               	<div class="input-group col-md-8 date form_date "  id="birthday_day">
			                    <input class=" input-group form-control remove-border " size="20" type="text" name="birthday" value="" readonly id="date_input">
			                    <span class="input-group-addon  date-remove"><span class="glyphicon glyphicon-remove"></span></span>
			                </div>
			          </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">語言：</label>
                            <div class="col-md-5">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="english" /> English
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="french" /> French
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="german" /> German
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="russian" /> Russian
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="other" /> Other
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-4 col-md-offset-4">
                           
                              
                                <button type="button" class="btn btn-info" id="validateBtn">驗證提交</button>
                                <button type="button" class="btn btn-info" id="resetBtn">重置表單</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
            <!-- :form -->
        </div>
        
    </div>
   </div>
</div><!-- 模態框結束 -->
 

表單驗證js:

幾乎涵蓋所有的常用的驗證：

/*
 * 參考bootstrapValidator
 * 表單驗證*/
$(function() {
    $('#defaultForm').bootstrapValidator({
        fields: {
        	
            username: {
                validators: {
                    notEmpty: {
                        message: '使用者名稱不能為空！'
                    },
                    stringLength: {
                        min: 6,
                        max: 20,
                        message: '使用者名稱長度為6-20'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '使用者名稱只能包括字元、數字、下劃線'
                    },
                    /*遠端驗證
                     * remote: {
                        type: 'POST',
                        url: '#',
                        message: '使用者名稱不能重複'
                    },*/
                }
            },
            roles: {
                validators: {
                    notEmpty: {
                        message: 'The country is required and can\'t be empty'
                    }
                }
            },
            email: {
                validators: {
                    emailAddress: {
                        message: '請填入正確的email地址！'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密碼不能為空'
                    },
                    different: {
                        field: 'username',
                        message: '密碼不能和使用者名稱相同！'
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: '確認密碼不能為空！'
                    },
                    identical: {
                        field: 'password',
                        message: '請與密碼保持一致！'
                    }
                }
            },
            phoneNumber: {
                validators: {
                	notEmpty: {
                        message: '手機號碼不能為空'
                    },
                    /*stringLength: {
                        min: 11,
                        max: 11,
                        message: '請輸入11位手機號碼'
                    },*/
                    regexp: {
                        regexp: /^1[34578]\d{9}$/,
                        message: '請輸入11位正確的手機號碼'
                    }
                }
            },
            secondFile: {
                validators: {
                    file: {
                        extension: 'pdf',
                        type: 'application/pdf',
                        minSize: 1024*1024,
                        message: '請選擇一個大小小於 1M的pdf檔案'
                    }
                }
            },
            dis:{
            	validators:{
            		notEmpty: {
                        message: '描述不能為空！'
                    },
                    stringLength:{
                    	max:100,
                    	message:'最大長度為100'
                    }
            	}
            },
            birthday: {
                validators: {
                	notEmpty: {
                        message: '日期不能為空！'
                    },
                    date: {
                        format: 'yyyy-mm-dd',
                        message: '時間日期不對'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: '性別必填！'
                    }
                }
            },ages: {
                validators: {
                    lessThan: {
                        value: 100,
                        inclusive: true,//設定為true表示可以等於
                        message: '年齡最大為100'
                    },
                    greaterThan: {
                        value: 1,
                        inclusive: true,
                        message: '年齡最小為 1'
                    }
                }
            },
            'languages[]': {
                validators: {
                    notEmpty: {
                        message: '語言至少選擇2個'
                    },
                    choice: {
                        min: 2,
                        max: 4,
                        message: '語言需要選擇2-4個'
                    }
                }
            },
        }
    });

    // Validate the form manually
    $('#validateBtn').click(function() {
        $('#defaultForm').bootstrapValidator('validate');
    });

    $('#resetBtn').click(function() {
        $('#defaultForm').data('bootstrapValidator').resetForm(true);
    });
});
 

效果：

1、重置某一單一驗證欄位驗證規則

$(formName).data(“bootstrapValidator”).updateStatus("fieldName",  "NOT_VALIDATED",  null );
2、重置表單所有驗證規則

$(formName).data("bootstrapValidator").resetForm();
3、手動觸發表單驗證

//觸發全部驗證
$(formName).data(“bootstrapValidator”).validate();
//觸發指定欄位的驗證
$(formName).data(“bootstrapValidator”).validateField('fieldName');
4、獲取當前表單驗證狀態

// flag = true/false 
var flag = $(formName).data(“bootstrapValidator”).isValid();
5、根據指定欄位名稱獲取驗證物件

// element = jq物件 / null
var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');