浅析Bootstrap验证控件的使用

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

<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验证控件的使用的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！