浅析Bootstrap验证控件的使用
废话不多说,本文大概给大家分享两块代码,第一块前端HTML代码,第二块js代码,代码简单易懂,关键代码如下所示:
前端HTML代码
<formid="myForm"method="post"class="form-horizontal"action="/Task/Test"> <divclass="modal-body"> <divclass="form-group"> <labelclass="col-lg-3control-label">任务名称</label> <divclass="col-lg-5"> <inputtype="text"class="form-control"name="takeName"id="takeName"/> </div> </div> <divclass="form-group"> <labelclass="col-lg-3control-label">程序集名称</label> <divclass="col-lg-5"> <inputtype="text"class="form-control"name="dllName"id="dllName"/> </div> </div> <divclass="form-group"> <labelclass="col-lg-3control-label">类名称</label> <divclass="col-lg-5"> <inputtype="text"class="form-control"name="methodName"id="methodName"/> </div> </div> <divclass="form-group"> <labelclass="col-lg-3control-label">cron表达</label> <divclass="col-lg-5"> <inputtype="text"class="form-control"name="cron"id="cron"/> </div> </div> <divclass="form-group"> <labelclass="col-lg-3control-label">表达式说明</label> <divclass="col-lg-5"> <inputtype="text"class="form-control"name="cronRemark"id="cronRemark"/> </div> </div> <divclass="form-group"> <divclass="col-lg-4col-sm-4col-xs-4"> <divclass="checkbox"> <label> <inputtype="checkbox"class="colored-success"checked="checked"id="enabled"> <spanclass="text">启用</span> </label> </div> </div> </div> </div> <divclass="modal-footer"> <buttontype="button"class="btnbtn-default" data-dismiss="modal"> 关闭 </button> <buttontype="submit"class="btnbtn-primary">提交</button> </div> </form>
JS
<script> $(document).ready(function(){ $("#myForm").bootstrapValidator({ message:'Thisvalueisnotvalid', feedbackIcons:{ valid:'glyphiconglyphicon-ok', invalid:'glyphiconglyphicon-remove', validating:'glyphiconglyphicon-refresh' }, fields:{ takeName:{ validators:{ notEmpty:{ message:'任务名称不能为空' } } }, dllName:{ validators:{ notEmpty:{ message:'程序集名称不能为空' }, //remote:{//ajax验证。serverresult:{"valid",trueorfalse}向服务发送当前inputname值,获得一个json数据。例表示正确:{"valid",true} //url:'/Task/Test3',//验证地址 //message:'用户已存在',//提示消息 //delay:3000, //type:'POST',//请求方式 ///**自定义提交数据,默认值提交当前inputvalue //*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){ vartaskData={}; 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验证控件的使用的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!