bootstrapValidator表單校驗、更改狀態、新增、移除校驗欄位的例項程式碼
阿新 • • 發佈：2020-05-20
注意：jQuery報 Maximum call stack size exceeded
錯誤描述：超出最大呼叫堆疊大小
錯誤原因：內部形成遞迴
解決方案：html 寫法不規範，更改 html 寫法，可參考官網示例，或下面程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>validate</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<form id="inputForm">
<div class="form-group">
<label class="col-lg-4 control-label">姓名</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="xm" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">性別</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="xb" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">年齡</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="nl" />
</div>
</div>
</form>
<div class="row">
<button id="btn1" class="btn btn-primary" >提交</button>
<button id="btn2" class="btn btn-primary" >更改校驗狀態</button>
<button id="btn3" class="btn btn-primary" >增加校驗欄位</button>
<button id="btn4" class="btn btn-primary" >移除校驗欄位</button>
<button id="btn5" class="btn btn-primary" >重置表單校驗</button>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<script>
$(function(){
var formValidator = function(){
$('#inputForm').bootstrapValidator({
fields:{
xm:{
validators:{
notEmpty:{
message: '姓名不能為空'
}
}
},xb:{
validators:{
notEmpty:{
message: '性別不能為空'
}
}
}
}
});
}
formValidator();
// 提交表單
$('#btn1').on('click',function(){
var bootstrapValidator = $('#inputForm').data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
alter('提交成功');
}
});
// 改變欄位校驗狀態
$('#btn2').on('click',function(){
/*
NOT_VALIDATED 未校驗的
VALIDATING 校驗中的
INVALID 校驗失敗的
VALID 校驗成功的
*/
// $('#inputForm').bootstrapValidator('updateStatus','xm','NOT_VALIDATED');
// 或
$('#inputForm').data('bootstrapValidator').updateStatus('xm','NOT_VALIDATED');
});
// 增加校驗欄位
$('#btn3').on('click',function(){
/*$('#inputForm').bootstrapValidator('addField','nl',{
validators:{
notEmpty:{
message: '年齡不能為空'
}
}
});*/
// 或
$('#inputForm').data('bootstrapValidator').addField('nl',{
validators:{
notEmpty:{
message: '年齡不能為空'
}
}
});
});
// 移除校驗欄位
$('#btn4').on('click',function(){
// 欄位可以處於校驗中，所以先處理校驗狀態
// $('#inputForm').bootstrapValidator('updateStatus','NOT_VALIDATED');
// $('#inputForm').bootstrapValidator('removeField','xm');
// 或
$('#inputForm').data('bootstrapValidator').updateStatus('xm','NOT_VALIDATED');
$('#inputForm').data('bootstrapValidator').removeField('xm');
});
// 重置表單校驗
$('#btn5').on('click',function(){
$('#inputForm').bootstrapValidator('resetForm',true);
// 或
//$('#inputForm').data('bootstrapValidator').resetForm(true);
});
});
</script>
</html>總結
到此這篇關於bootstrapValidator表單校驗、更改狀態、新增、移除校驗欄位的例項程式碼的文章就介紹到這了,更多相關bootstrapvalidator表單校驗內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！