当前位置: 首页 > 编程笔记 >

BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

匡安宜
2023-03-14
本文向大家介绍BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析,包括了BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析的使用技巧和注意事项,需要的朋友参考一下

问题1:

如下代码:

<input type="hidden" name="productId"/>
$("#addForm").bootstrapValidator({
fields: {
productId: {
validators: {
notEmpty: {
message: '请选择一个商品'
}
}
}
}
});

这样的配置并没有在提交的时候对表单元素productId进行验证,那是因为bootstrapValidator默认配置对于“隐藏域(:hidden)、禁用域(:disabled)、那啥域(:not(visible))”是不进行验证的。

解决方法:

$("#addForm").bootstrapValidator({
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
excluded:[":disabled"],//关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
fields: {
productId: {
validators: {
notEmpty: {
message: '请选择一个商品'
}
}
}
}
});

问题2:

我们往往会有这样的需求,如下图:

在选择商品之后会在productName里面展示商品名称给用户看,而在productId这个隐藏域里面放一个商品的ID。

一般情况下这样的操作是由程序来完成的,

$("input[name='productId']").val(data.productId);

bootstrapValidator这个插件不能捕获这样的“程序赋值事件”,所以这里不能达到验证的效果,所以我们需要做一个小小的变通:

$("#addForm").bootstrapValidator({
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
excluded:[":disabled"],//关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
fields: {
productId: {
trigger:"change", //问题2.关键配置
validators: {
notEmpty: {
message: '请选择一个商品'
}
}
}
}
});
//赋值之后触发一次“change”事件
$("input[name='productId']").val(data.productId).change();

这样以后bootrapValidator会因为触发了“change”事件,而捕获,达到验证的效果

以上所述是小编给大家介绍的BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍浅谈关于iview表单验证的问题,包括了浅谈关于iview表单验证的问题的使用技巧和注意事项,需要的朋友参考一下 关于iview表单验证的问题 iview表单验证的步骤: 第一步:给 Form 设置属性 rules   :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意:Form标签里面是  :model

  • 我是一个新手,我正在使用java bean验证。 我有一个java bean类,如下所示,带有null和size约束。 我的主要课程如下 当我传递长度小于4的名称时,这将引发错误。但是对于我传递的所有值,这个类都成功地执行了。让我知道我错过了什么。 提前谢谢。

  • 请让我知道openapi请求验证程序nodejs库是否可以用于根据openapi 3规范yaml文件验证请求。我看了一下ExpressOpenAPI验证器,但我的应用程序不使用expressjs。我的服务是部署在aws中的lambda函数(nodejs)。

  • 本文向大家介绍关于ThinkPhp 框架表单验证及ajax验证问题,包括了关于ThinkPhp 框架表单验证及ajax验证问题的使用技巧和注意事项,需要的朋友参考一下 之前的表单验证都是用js写的,这里也可以使用tp框架的验证。但是两者比较而言还是js验证比较好,因为tp框架验证会运行后台代码,这样运行速度和效率就会下降。    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用c

  • 我正在用Xtext创建一个DSL,用于生成图像。然而,由于我对Xtext完全不了解,我遇到了一些问题,希望您能给我一些指导。 最终,我希望用户使用以下编码结构: 我在Xtext中想到了以下内容(我没有对MWE2做任何更改): 我需要解决几个问题,但我想知道解决这些问题的最佳方法是什么。 如何为终端规则SIZE中使用的INT设置边界。 如何设置bgColor:或bgsize:只能使用一次? 如何设置

  • 本文向大家介绍浅谈JS验证表单文本域输入空格的问题,包括了浅谈JS验证表单文本域输入空格的问题的使用技巧和注意事项,需要的朋友参考一下 在表单中验证输入的文本域字符是否为空格,即空字符串,通常需要去除字符两边的空格才可验证准确。否则如果连续输入多个空格键,仅凭 document.getElementById("name").value == ""  验证不出来的。 去除字符串两边的空格的方法,还要