bootstrapValidator表單驗證
阿新 • • 發佈:2018-12-30
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">×</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');