淺析Bootstrap驗(yàn)證控件的使用

更新時(shí)間：2016年06月23日 10:16:40 作者：逸飛

這篇文章主要介紹了淺析Bootstrap驗(yàn)證控件的使用的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

廢話不多說(shuō)，本文大概給大家分享兩塊代碼，第一塊前端HTML代碼，第二塊js代碼，代碼簡(jiǎn)單易懂，關(guān)鍵代碼如下所示：

前端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">任務(wù)名稱</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表達(dá)</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">表達(dá)式說(shuō)明</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">
關(guān)閉
</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: '任務(wù)名稱不能為空'
}
}
},
dllName: {
validators: {
notEmpty: {
message: '程序集名稱不能為空'
},
//remote: {//ajax驗(yàn)證。server result:{"valid",true or false} 向服務(wù)發(fā)送當(dāng)前input name值，獲得一個(gè)json數(shù)據(jù)。例表示正確：{"valid",true} 
// url: '/Task/Test3',//驗(yàn)證地址
// message: '用戶已存在',//提示消息
// delay :3000,
// type: 'POST',//請(qǐng)求方式
// /**自定義提交數(shù)據(jù)，默認(rèn)值提交當(dāng)前input value
// * data: function(validator) {
// return {
// password: $('[name="passwordNameAttributeInYourForm"]').val(),
// whatever: $('[name="whateverNameAttributeInYourForm"]').val()
// };
// }
// */
//},
}
},
methodName: {
validators: {
notEmpty: {
message: '類名稱不能為空'
}
}
},
cron: {
validators: {
notEmpty: {
message: 'cron表達(dá)不能為空'
}
}
}
},
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驗(yàn)證控件的使用的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: