浅析Bootstrap验证控件的使用

前端技术 2023/09/06 JavaScript

废话不多说，本文大概给大家分享两块代码，第一块前端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>

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

本文地址：https://www.stayed.cn/item/15986

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案