前端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">任務名稱</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">關閉</button><button type="submit" class="btn btn-primary"> 提交</button></div></form> View Code

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: '任務名稱不能為空'}}},dllName: {validators: {notEmpty: {message: '程序集名稱不能為空'},//remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送當前input name值，獲得一個json數據。例表示正確：{"valid",true} // url: '/Task/Test3',//驗證地址// message: '用戶已存在',//提示消息// delay :3000,// type: 'POST',//請求方式// /**自定義提交數據，默認值提交當前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> View Code

該方式為AJAX提交，提交事件寫在submitHandler

轉載于:https://www.cnblogs.com/Nomads/p/5462606.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Bootstrap验证控件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。