bootstrapvalidator实现校验、校验清除重置
2017-12-19 10:39
435 查看
问题:经常开发中用到modal对话框弹出验证以后第二次弹框时上次的验证效果依然有效,那就要想办法第二次弹框之前去掉上次的验证;
解决办法:
1.引入bootstrap的validator的校验js和css;
<linkrel="stylesheet"
href="<%=realPath%>/bootstrap/css/bootstrapValidator.css"/>
<scripttype="text/javascript"
src="<%=realPath%>/bootstrap/js/bootstrapValidator.js"></script>
2.body中定义的弹框modal
<body>
<!-- 弹框 -->
<divclass="modal
fade"id="addDepModal"tabindex="-1"role="dialog"aria-labelledby="adddepLabel">
<divclass="modal-dialog"role="document">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button>
<h4class="text-center"style="font-size:16px;font-weight:bold;">添加部门</h4>
</div>
<formid="addDepForm"method="post">
<inputtype="hidden"id="bizDepId"name="bizDepId"/>
<inputtype="hidden"id="orgId"name="orgId"/>
<divclass="modal-body">
<divclass="form-group">
<label>部门名称:</label>
<inputtype="text"class="form-control"name="dep_name"id="dep_name"placeholder="请请输入部门名称"/>
</div>
</div>
</form>
<divclass="modal-footer">
<buttontype="button"id="addDepBtn"class="btn
btn-primary">确定</button>
<buttontype="button"class="btn
btn-default"data-dismiss="modal">取消</button>
</div>
</div>
</div>
<!--/添加弹框-->
</div>
</body>
3.通常情况下默认会在初始化中默认加载bootstrapvalidator验证代码
$(function(){bootstrapvalidator验证代码});
解决二次校验问题方法
1.定义bootstrap validator校验方法(校验部门名称是否重复)
//form验证规则
function formValidator(){
$("#addDepForm").bootstrapValidator({
message: '无效的值',
feedbackIcons: {
/* valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove', */
validating:'glyphicon glyphicon-refresh'
},
fields:{
dep_name: {
validators: {
notEmpty: {
message:
'部门名不能为空'
},
remote: {
type:
"post",
url: '<%=realPath%>/dep/validateBepExist',
data:
function (validator) {
return {
name: validator.getFieldElements('dep_name').val(),
id:validator.getFieldElements('bizDepId').val()
};
},
message:
'当前部门已被创建,请修改部门名称!',
delay: 300
}
}
}
}
});
}
2. 在js默认启动时调用启动校验
$(function(){formValidator();});
3.在modal隐藏时移除校验重新添加校验
$("#addDepModal").on('hidden.bs.modal',function(e){
//移除上次的校验配置
$("#addDepForm").data('bootstrapValidator').destroy();
$('#addDepForm').data('bootstrapValidator',null);
//重新添加校验
formValidator();
});
解决办法:
1.引入bootstrap的validator的校验js和css;
<linkrel="stylesheet"
href="<%=realPath%>/bootstrap/css/bootstrapValidator.css"/>
<scripttype="text/javascript"
src="<%=realPath%>/bootstrap/js/bootstrapValidator.js"></script>
2.body中定义的弹框modal
<body>
<!-- 弹框 -->
<divclass="modal
fade"id="addDepModal"tabindex="-1"role="dialog"aria-labelledby="adddepLabel">
<divclass="modal-dialog"role="document">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button>
<h4class="text-center"style="font-size:16px;font-weight:bold;">添加部门</h4>
</div>
<formid="addDepForm"method="post">
<inputtype="hidden"id="bizDepId"name="bizDepId"/>
<inputtype="hidden"id="orgId"name="orgId"/>
<divclass="modal-body">
<divclass="form-group">
<label>部门名称:</label>
<inputtype="text"class="form-control"name="dep_name"id="dep_name"placeholder="请请输入部门名称"/>
</div>
</div>
</form>
<divclass="modal-footer">
<buttontype="button"id="addDepBtn"class="btn
btn-primary">确定</button>
<buttontype="button"class="btn
btn-default"data-dismiss="modal">取消</button>
</div>
</div>
</div>
<!--/添加弹框-->
</div>
</body>
3.通常情况下默认会在初始化中默认加载bootstrapvalidator验证代码
$(function(){bootstrapvalidator验证代码});
解决二次校验问题方法
1.定义bootstrap validator校验方法(校验部门名称是否重复)
//form验证规则
function formValidator(){
$("#addDepForm").bootstrapValidator({
message: '无效的值',
feedbackIcons: {
/* valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove', */
validating:'glyphicon glyphicon-refresh'
},
fields:{
dep_name: {
validators: {
notEmpty: {
message:
'部门名不能为空'
},
remote: {
type:
"post",
url: '<%=realPath%>/dep/validateBepExist',
data:
function (validator) {
return {
name: validator.getFieldElements('dep_name').val(),
id:validator.getFieldElements('bizDepId').val()
};
},
message:
'当前部门已被创建,请修改部门名称!',
delay: 300
}
}
}
}
});
}
2. 在js默认启动时调用启动校验
$(function(){formValidator();});
3.在modal隐藏时移除校验重新添加校验
$("#addDepModal").on('hidden.bs.modal',function(e){
//移除上次的校验配置
$("#addDepForm").data('bootstrapValidator').destroy();
$('#addDepForm').data('bootstrapValidator',null);
//重新添加校验
formValidator();
});
相关文章推荐
- bootstrapvalidator实现校验、校验清除重置
- Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
- bootstrapvalidator实现校验、校验清除重置
- Validform重置并清除校验提示文字的方法
- bootstrapvalidator校验、校验清除重置
- Android注解方式实现表单校验
- Android EditText 自带清除按钮 (ViewGroup实现)
- Struts框架之手工编写代码方式实现校验
- 如何用asp.net实现校验功能!
- xml配置方式实现action的所有方法的输入校验
- Domino9下通过代理实现WEB方式重置Internet密码
- bootstrap重置校验方法
- vue-router登录校验后跳转到之前指定页面如何实现
- 图片实现 提交/重置 按钮
- LINUX下实现用脚本自动安装,显示,关闭,快照,重置,删除虚拟机
- python和shell实现的校验IP地址合法性脚本分享
- android 实现edittext输入内容后可以点击右侧小图片进行清除内容
- 清除缓存---更多页面的实现
- .net下遍历内容页所有控件实现重置功能
- jsp页面实现input框实时ajax校验任务名称是否存在