引导验证。我如何将零视为空值？

Posted 2023-05-08

【中文标题】引导验证。我如何将零视为空值？

【英文标题】：Bootstrap validation. How can i treat zero as null?

【发布时间】：2020-08-06 12:09:50

【问题描述】：

我的表单呈现的 html 是

    <div class="form-group col-xl-6">
        <label class="form-label" for="SalePrice">Sale price</label>
        <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0" max="99999" step="0.10" required="">
        <div class="invalid-feedback">
            The field is required
        </div>
    </div>

当没有输入值时，验证效果很好。显示The field is required。

但是我怎么能把零也当作空值呢？

如果用户输入 0 作为输入，则不会发生验证。

我也可以为零值扩展所需的属性吗？

【问题讨论】：

您可以将“min”值更改为“0.10”

Bootstrap Validation 与 jQuery Validate 插件不同。请正确标记。已编辑。

【参考方案1】：

您对 HTML5 验证（您在这里提到它作为引导验证）和 jQuery 验证感到非常困惑。两者在发展方面的观点不同。

因此，为了区分这两个方面，我添加了 2 个表单，第一个带有普通 HTML5 验证，第二个带有 jQ​​yery 验证插件。两者都完全满足您的期望，但 jQuery 会更好一些，因此 HTML5 取决于您的浏览器。

$(function() 

  $("form#val2").validate(
    rules: 
      SalePrice: 
        required: true,
        number: true,
        minlength: 0,
        range: [0.1, 99999]
      ,
      email: 
        required: true,
        email: true
      
    ,
    messages: 
      SalePrice: 
        required: "Sale Price is Required",
        number: "Enter a valid number",
        minlength: jQuery.validator.format("At least 0 characters required!"),
      ,
      email: 
        required: "Email is required",
        email: "Your email address must be in the format of [e-mail]"
      
    
  );
);

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style type="text/css">
  form 
    margin: 30px;
    padding: 30px;
    border: 1px solid #8c8c8c;
  
  
  label.error 
    color: red;
    margin-top: 5px;
  
  
  .submit 
    margin-top: 15px;
    display: block;
  
  
  .form-label 
    margin-top: 10px;
    display: block;
  
</style>
<div class="container">

  <form id="val" action="" method="post">
    <h4>Validation With HTML5</h4>
    <div class="form-group col-xl-6">
      <label class="form-label" for="SalePrice">Sale price</label>
      <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0.1" max="99999" step="0.10" required="">
      <button id="submit" class="submit btn btn-success">Submit</button>
    </div>
  </form>

  <form id="val2" action="" method="post" novalidate>
    <h4>Validation with <a href="https://jqueryvalidation.org/validate/">jQuery Validation Plugin</a></h4>
    <div class="form-group col-xl-6">
      <label class="form-label" for="SalePrice">Sale price</label>
      <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0.1" max="99999" step="0.10">
      <label class="form-label" for="email">Email</label>
      <input class="form-control" id="email" type="email" name="email">
      <button id="submit1" class="submit btn btn-success">Submit</button>
    </div>
  </form>

</div>

在第二种形式中，HTML5 验证使用“novalidate”进行限制 表单标签

【参考方案2】：

对于这个要求，我们可以通过两种方式来实现。 1）不需要在jquery中编写任何验证，直接我们需要使用表单验证。当提交表单或任何页面按钮类提供作为提交和使用表单提交。 例如：-

<div class="container">
  <form id="val" action="" method="post">
    <h4>Validation With HTML5</h4>
    <div class="form-group col-xl-6">
      <label class="form-label" for="SalePrice">Sale price</label>
      <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0.1" max="99999" step="0.10" required="">
      <button id="btnSubmit" class="submit btn btn-primary">Submit</button>
    </div>
  </form>
</div>`

2)在引导部分，您分配了一个无效反馈类 div 元素。如果您想将 div 元素显示为输入验证的反馈消息，那么您可以在 jquery 中遵循此代码。

`<div class="form-group col-xl-6">
        <label class="form-label" for="SalePrice">Sale price</label>
        <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0" max="99999" step="0.10" required="">
        <div class="invalid-feedback" style="display:none">
            The field is required
        </div>
    </div>`


    `<script type="text/javascript">
    $(document).ready(function()
    $("#SalePrice").change(function()
    var saleprice = parseInt(($(this).val() == "" || $(this).val() == 0) ? 0 : $(this).val());
    if(saleprice == 0)
        $(".invalid-feedback").show();
        else
        $(".invalid-feedback").hide();    
);
);
</script>`

【参考方案3】：

是的，您可以像这样进一步验证以实现它：

$('#SalePrice').on('keyup', function()
    if($(this).val() == 0)
        alert("Price Not Accepted!");
        $(this).val("");
    
)