jquery - 如何在 Bootstrap Validation 中创建自定义验证

Question

我的目标是验证一个特定的文本字段，该字段依赖于其他元素的值。

例如我有选择标签和输入文本标签，

input text is required when select tag has a selected value.

希望有人能帮忙。

score 6 · Accepted Answer

看一眼

http://bootstrapvalidator.com/

在我们正在使用的项目中，Backbone 验证器与 Bootstrap 集成

https://github.com/thedersen/backbone.validation

Backbone.validation & Bootstrap 集成示例

[jsfiddle.net/thedersen/c3kK2/][1]

也就是说，如果您使用的是 Backbone :)

对于bootstrapvalidator，有一个用于验证的回调方法

http://bootstrapvalidator.com/validators/callback/

从示例：

  <input type="text" class="form-control" name="captcha"
                data-bv-callback="true"
                data-bv-callback-message="Wrong answer"
                data-bv-callback-callback="checkCaptcha" />

和 JS

function checkCaptcha(value, validator) {
    // Determine the numbers which are generated in captchaOperation
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
   return value == sum;
};

$(document).ready(function() {
    // Return a random number between min and max
    function randomNumber(min, max) {
       return Math.floor(Math.random() * (max - min + 1) + min);
    };

    // Generate a sum of two random numbers
    function generateCaptcha() {
        $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
    };

    generateCaptcha();

    $('#callbackForm').bootstrapValidator();
});

您可以使用它实现任意验证。

所以你的验证可以通过一些全局函数来实现

使用 HTML

  <input type="text" class="form-control" name="captcha"
                data-bv-callback="true"
                data-bv-callback-message="Wrong answer"
                data-bv-callback-callback="specialValidation" />

用 JS

 function specialValidation(value, validator) {
    // Determine the numbers which are generated in captchaOperation
    var items = $('#otherField').txt();
    return value == sum;
};

并且您需要对元素属性进行创意，以正确链接相关元素。

score 2 · Accepted Answer

使用回调进行自定义验证，您可以对回调使用任何验证，例如 javascript 验证。需要发送 false 或 true。

pwd:
{
    validators:
    {
        notEmpty:
        {
            message: 'The password is required and cannot be empty'
        },
        callback:
        {
            message: 'The password is not valid',
            callback: function(value, validator, $field)
            {
                if (value === '')
                {
                    return true;
                }
            }
        }
    }
}

score 0 · Accepted Answer

您可以这样做，在调用引导验证之前，如果 select 已选择值，则只需将 data-required 属性添加到您的输入元素，否则不要添加该属性。希望这会帮助你。

score 0 · Accepted Answer

页面中间有几个示例如何使用引导验证：

http://bootstrapvalidator.com/getting-started/#usage

http://bootstrapvalidator.com/getting-started/#example

score -1 · Accepted Answer

使用以下代码， onchange jquery 函数用于此。

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>

<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>

</body>
</html>

jquery - 如何在 Bootstrap Validation 中创建自定义验证

5 回答 5

http://bootstrapvalidator.com/getting-started/#example

Related

Reference