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