如何在Bootstrap验证中创建自定义验证 [英] How to create a custom validation in Bootstrap Validation

问题描述

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

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

希望有人可以提供帮助。

解决方案

请看看

http://bootstrapvalidator.com/

在我们的项目中，我们使用了Backbone验证器，并将其与Bootstrap集成在一起。

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

整合Backbone.validation& amp; amp; Bootstrap

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

这就是说，如果您使用的是Backbone：）

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

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

举例：

< pre $ < input type =textclass =form-controlname =captcha
data -bv-callback =true
data- bv-callback-message =错误的答案
data-bv-callback-callback =checkCaptcha/>


和JS

  function checkCaptcha（value，validator）{
 //确定在captchaOperation中生成的数字
 var items = $（'＃captchaOperation'）。html（）。split（'' ），
 sum = parseInt（items [0]）+ parseInt（items [2]）; 
返回值== sum; 
}; 
 
 $（document）.ready（function（）{
 //返回最小值和最大值之间的随机数
函数randomNumber（min，max）{
 return Math.floor（Math.random（）*（max-min + 1）+ min）; 
}; 
 
 //产生两个随机数的和
 function generateCaptcha （）{
 $（'＃captchaOperation'）。html（[randomNumber（1，100），'+'，randomNumber（1，200），'=']。join（''））; 
 $; 
 
 generateCaptcha（）; 
 
 $（'＃callbackForm'）。bootstrapValidator（）; 
}）; 
  

您可以使用它进行任意验证。

<因此，您的验证可以通过一些全局函数来实现

使用HTML

  data -bv-callback =true
 data-bv-callback-message =错误答案
 data-bv-callback-callback =specialValidation/> 
  

与JS

  function specialValidation（value，validator）{
 //确定在captchaOperation中生成的数字
 var items = $（'＃otherField'）。txt（）; 
返回值== sum; 
}; 
  

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

My Goal is to validate a specific text field where this field is dependent to the value of the other element.

For example i have select tag and input text tag,

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

hope someone could help.

解决方案

Take a look at

http://bootstrapvalidator.com/

In our project we are using, Backbone validator, integrated with Bootstrap

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

Sample of integration Backbone.validation & Bootstrap

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

That is if you are using Backbone :)

For bootstrapvalidator there is a callback method for validation

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

From example:

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

And 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();
});

You can implement arbitrary validation with it.

So your validation can be implemented through some global function

With HTML

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

with JS

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

And you need to be creative with element attributes, to link related elements correctly.

这篇关于如何在Bootstrap验证中创建自定义验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！