Question

我将Bootstrap 4与内置表单验证结合使用。我可以要求提交一个这样的文本

<div class="col-6 mb-3">
   <label for="field">field</label>
   <input type="text" class="form-control" id="field" name="field" placeholder="" value="" required>
   <div class="invalid-feedback">
      Please enter.
   </div>
</div>

但是如果我在一个组中有3个文本字段（如上），而用户只需要在其中一个文件上键入内容，该怎么办。

Ex

所有字段为空-引导程序验证失败。

用户在文本字段2和3中写入内容-引导程序验证通过。

用户在文本字段1中写入内容-引导程序验证通过。

用户在文本字段3中写一些东西-引导程序验证通过。

用户只需要在3个字段中的至少1个中编写一些内容即可通过验证。如果三个都为空，则验证失败。

Answer 1

我假设您有一个包含4个字段的注册表，其中3个字段（用户名，电子邮件和联系人）之一是必填项，而密码字段则是必填项。

在页面中添加jQuery validate.js

https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.js

HTML

<form id='register-form' action='#' method='post'>
   <label>Username</label>
   <input type='text' name='username' id='user_name' class='' />

   <label>Email</label>
   <input type='email' name='email' id='email_id' class='' />

   <label>Contact No</label>
   <input type='text' name='contact' id='contact_no' class='' />

   <label>Password</label>
   <input type='text' name='password' id='pass' class='' />

   <button type='submit'>Submit</button>
</form>

jQuery

// custom validation method
    $.validator.addMethod("require_any", function (value, element, param) {
        var is_filled=false; // flag to check input is empty or filled
        $.each(param.split(/\|/), function (i, input_id) { // split input ids
            if($('#'+ input_id).val()!==''){
                return is_filled=true; // if any empty input found break the loop
            }
        });
        return is_filled; 
    });
// submit form and apply validation rules
$('#register-form').submit(function (e) {
            e.preventDefault();

        }).validate({
            rules: {
              username: {
                 require_any: 'user_name|email_id|contact_no' //pass the ids
                 },
              email: {
                 require_any: 'user_name|email_id|contact_no', //pass the ids
                 email: true // for email validation
                 },
              contact: {
                 require_any: 'user_name|email_id|contact_no' //pass the ids
                 },
              password: {
                 required: true // password is required
                 }
            },
            messages: {
               require_any: 'Please provide one of Username or Email or Contact',
               required: 'Password field is required.' // by default message 'This field is required.'
            },
            submitHandler: function (form) {
                 // validation success code ...
               }
        });

Bootstrap表单验证，需要3个文本字段之一？

1 个答案: