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}');
}
}
以上就是我在开发中碰见的坑,希望对大家有点作用
来源:https://www.cnblogs.com/liuxuyang522/p/8941769.html