淺析Bootstrap驗證控件的使用
廢話不多說,本文大概給大家分享兩塊代碼,第一塊前端HTML代碼,第二塊js代碼,代碼簡單易懂,關(guān)鍵代碼如下所示:
前端HTML代碼
<form id="myForm" method="post" class="form-horizontal" action="/Task/Test"> <div class="modal-body"> <div class="form-group"> <label class="col-lg-3 control-label">任務(wù)名稱</label> <div class="col-lg-5"> <input type="text" class="form-control" name="takeName" id="takeName" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">程序集名稱</label> <div class="col-lg-5"> <input type="text" class="form-control" name="dllName" id="dllName" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">類名稱</label> <div class="col-lg-5"> <input type="text" class="form-control" name="methodName" id="methodName" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">cron表達</label> <div class="col-lg-5"> <input type="text" class="form-control" name="cron" id="cron" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">表達式說明</label> <div class="col-lg-5"> <input type="text" class="form-control" name="cronRemark" id="cronRemark" /> </div> </div> <div class="form-group"> <div class="col-lg-4 col-sm-4 col-xs-4"> <div class="checkbox"> <label> <input type="checkbox" class="colored-success" checked="checked" id="enabled"> <span class="text">啟用</span> </label> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 關(guān)閉 </button> <button type="submit" class="btn btn-primary"> 提交</button> </div> </form>
JS
<script> $(document).ready(function () { $("#myForm").bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { takeName: { validators: { notEmpty: { message: '任務(wù)名稱不能為空' } } }, dllName: { validators: { notEmpty: { message: '程序集名稱不能為空' }, //remote: {//ajax驗證。server result:{"valid",true or false} 向服務(wù)發(fā)送當前input name值,獲得一個json數(shù)據(jù)。例表示正確:{"valid",true} // url: '/Task/Test3',//驗證地址 // message: '用戶已存在',//提示消息 // delay :3000, // type: 'POST',//請求方式 // /**自定義提交數(shù)據(jù),默認值提交當前input value // * data: function(validator) { // return { // password: $('[name="passwordNameAttributeInYourForm"]').val(), // whatever: $('[name="whateverNameAttributeInYourForm"]').val() // }; // } // */ //}, } }, methodName: { validators: { notEmpty: { message: '類名稱不能為空' } } }, cron: { validators: { notEmpty: { message: 'cron表達不能為空' } } } }, submitHandler: function (validator, form, submitButton) { var taskData = {}; taskData.taskName = $('#takeName').val(); taskData.dllPath = $('#dllName').val(); taskData.methodName = $('#methodName').val(); taskData.cronExpression = $('#cron').val(); taskData.remark = $('#cronRemark').val(); taskData.enabled = $('#enabled').is(':checked'); $.ajax({ type: "post", url: "/Task/AddTask", data:taskData, success: function (data) { alert(data); $('#myForm').data('bootstrapValidator').resetForm(true); } }); } }) }) </script>
該方式為AJAX提交,提交事件寫在submitHandler
以上所述是小編給大家介紹的Bootstrap驗證控件的使用 的相關(guān)知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 使用bootstrap validator的remote驗證代碼經(jīng)驗分享(推薦)
- 利用bootstrapValidator驗證UEditor
- Bootstrap Validator 表單驗證
- Bootstrap中的表單驗證插件bootstrapValidator使用方法整理(推薦)
- 實用又漂亮的BootstrapValidator表單驗證插件
- JS組件Form表單驗證神器BootstrapValidator
- 基于jQuery 實現(xiàn)bootstrapValidator下的全局驗證
- 基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
- Bootstrap實現(xiàn)登錄校驗表單(帶驗證碼)
- 使用BootStrapValidator完成前端輸入驗證
相關(guān)文章
JS 組件系列之BootstrapTable的treegrid功能
這篇文章主要介紹了JS 組件系列之BootstrapTable的treegrid功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09JavaScript調(diào)試技巧之console.log()詳解
對于JavaScript程序的調(diào)試,相比于alert(),使用console.log()是一種更好的方式,原因在于:alert()函數(shù)會阻斷JavaScript程序的執(zhí)行,從而造成副作用;而console.log()僅在控制臺中打印相關(guān)信息,因此不會造成類似的顧慮2014-03-03Javascript實現(xiàn)快速排序(Quicksort)的算法詳解
排序算法(Sorting algorithm)是計算機科學(xué)最古老、最基本的課題之一,要想成為合格的程序員,就必須理解和掌握各種排序算法。2015-09-09