1 加載jQuery和bootstrap.min.js 后引入bootstrapValidator.min.js
字段驗證之remote 遠程驗證(類似ajax驗證)，返回值必須是 {"valid":true}{"valid":false} true表示 驗證通過 false 表示驗證不通過。
當添加remote 驗證后，驗證通過表單不能提交 submit 按鈕里面多了一個 disabled="disabled" 按鈕被禁用了，無法提交表單，
這個是因為提交按鈕里面含有name或者其他元素如id, 導致表單增加驗證項，驗證不通過當然就不能提交了。所以果斷去掉。
如下：<button type="submit" class="btn btn-danger">提交</button> 里面的name id 都不能有。
貼源碼：
<form class="form-horizontal" role="form" method="post" action="/Admin/ProductCate/doAdd" id="addForm">
<div class="form-group">
<label for="cate_name" class="col-lg-2 col-sm-2 control-label text-center">分類名</label>
<div class="col-lg-6">
<input type="text" name="cate_name" class="form-control" id="cate_name" value="" placeholder="分類名">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-6">
<button type="submit" class="btn btn-danger">提交</button>
</div>
</div>
</form>
<script src="/Admin/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
$(function(){
$('#addForm').bootstrapValidator({
message: 'This value is not valid',
fields: {
cate_name: {
validators: {
notEmpty: {message: '分類名不能為空'},
stringLength: {min: 2,max: 30,message: '分類名長度必須在2到30之間'},
remote: {//ajax驗證。
url: '/Admin/ProductCate/ajaxCheckCateName',
type: 'post',
data:{cate_name:function() {
return $('input[name="cate_name"]').val() }
},
delay : 2000,
dataFilter:function(data,type){
return data;
},
message: '分類名稱已存在',//提示消息
}
}
}
}
})
});
后端PHP驗證：
public function ajaxCheckCateName()
{
$data['cate_name'] = I('post.cate_name','','trim,strip_tags');
$hasName = $this->productcateService->findByName($data['cate_name']);
if($hasName){
exit('{"valid":false}');
}else{
exit('{"valid":true}');
}
}
以上就是我在開發中碰見的坑，希望對大家有點作用