浅析Bootstrap验证控件的使用

废话不多说，本文大概给大家分享两块代码，第一块前端HTML代码，第二块js代码，代码简单易懂，关键代码如下所示：

前端HTML代码

<form id="myForm" method="post" action="/Task/Test"><div><div><label>任务名称</label><div><input type="text" name="takeName" id="takeName" /></div></div><div><label>程序集名称</label><div><input type="text" name="dllName" id="dllName" /></div></div><div><label>类名称</label><div><input type="text" name="methodName" id="methodName" /></div></div><div><label>cron表达</label><div><input type="text" name="cron" id="cron" /></div></div><div><label>表达式说明</label><div><input type="text" name="cronRemark" id="cronRemark" /></div></div><div><div><div><label><input type="checkbox" checked="checked" id="enabled"><span>启用</span></label></div></div></div></div><div><button type="button"data-dismiss="modal">关闭</button><button type="submit"> 提交</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: '任务名称不能为空'}}},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> 

该方式为AJAX提交，提交事件写在submitHandler

以上所述是小编给大家介绍的Bootstrap验证控件的使用 的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！