Bootstrap 验证冲突

Question

我正在使用 Vue.js 和 Bootstrap 来设计一个网站。我有一个表单，我正在尝试在其上运行我的自定义验证。它工作正常，直到用户单击提交，was-validated根据引导程序文档将类添加到表单中。

此时，无论是否满足我的自定义验证，任何具有任何输入的必填输入字段都被标记为有效并获得绿色边框和复选标记。我的自定义验证仍在运行并b-form-invalid-feedback正确显示。但是，似乎将was-validated具有所需属性的字段标记为有效，而没有考虑我的自定义验证，这会导致验证冲突，因为字段具有绿色复选标记（因为它满足所需的属性）但仍然是错误消息，因为根据我的自定义验证，它尚未生效。

我尝试删除:valid样式，这不是我想要的效果，因为我确实希望它在根据我的验证有效时显示这些样式。希望这是有道理的，如果不是我会提供图片。我还有第二个问题，我有一个日期选择器，b-form-invalid-feedback即使was-validated添加时也根本不显示。

我的代码

<b-form @submit.prevent="addReview" name="review-form" novalidate>
  <div class="name">
    <label class="sr-only" for="form-input-name">Name</label>
    <b-input id="form-input-name" class="form-inputs mb-2 mr-sm-2 mb-sm-0" v-model="name" placeholder="Name" required :state="isStateValid(this.name)"></b-input>
    <b-form-invalid-feedback id="form-input-name">
      You must enter a name
    </b-form-invalid-feedback>
  </div>

  <div class="date">
    <label class="sr-only" for="example-datepicker">Choose a date</label>
    <b-form-datepicker id="datepicker" v-model="dateVisited" class="mb-2" required placeholder="Date Visited" :state="isStateValid(this.dateVisited)"></b-form-datepicker>
    <b-form-invalid-feedback id="datepicker">
      You must enter a valid date
    </b-form-invalid-feedback>
  </div>

  <div class="service">
    <label class="sr-only" for="form-input-service">Service Provided</label>
    <b-input id="form-input-service" class="form-inputs mb-2" placeholder="Service Provided" v-model="service" required :state="isStateValid(this.service)"></b-input>
    <b-form-invalid-feedback id="form-input-service">
      You must enter the service provided
    </b-form-invalid-feedback>
  </div>

  <div class="email">
    <label class="sr-only" for="inline-form-input-username">Email</label>
    <b-input id="inline-form-input-username" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Email" v-model="email" required :state="emailStateValidation"></b-input>
    <b-form-invalid-feedback id="inline-form-input-username">
      You must enter the part of your email that comes before the '@' symbol
    </b-form-invalid-feedback>
  </div>

  <div class="domain">
    <label class="sr-only" for="inline-form-input-domain">Domain</label>
    <b-input-group prepend="@" class="mb-2 mr-sm-2 mb-sm-0">
      <b-input id="inline-form-input-domain" placeholder="Domain ex: gmail.com" v-model="domain" required :state="domainStateValidation"></b-input>
      <b-form-invalid-feedback id="inline-form-input-domain">
        You must enter the part of your email that comes after the '@' symbol
      </b-form-invalid-feedback>
    </b-input-group>
  </div>

  <div class="description">
    <label class="sr-only" for="textarea-rows">Describe Your Experience</label>
    <b-form-textarea class="mb-3 mr-sm-2 mb-sm-0" id="textarea-rows" placeholder="Describe Your Experience" rows="4" required v-model="description" :state="isStateValid(this.description)"></b-form-textarea>
    <b-form-invalid-feedback id="textarea-rows">
      You must enter a description of your experience
    </b-form-invalid-feedback>
  </div>

  <b-button type="submit">Save</b-button>
</b-form>

computed: {
        emailStateValidation() {
            if (this.email) {
                return this.emailIsValid() ? true : false;
            }
            return null;
        },
        domainStateValidation() {
            if (this.domain) {
                return this.domainIsValid() ? true : false;
            }
            return null;
        },
    },
    methods: {
        emailIsValid() {
            let regEx = /^(?!.*@)((^[^\.])[a-z0-9\.!#$%&'*+\-\/=?^_`{|}~"]*)*([^\.]$)/;
            return regEx.test(this.email);
        },
        domainIsValid() {
            let regEx = /((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return regEx.test(this.domain);
        },
        isStateValid(variable) {
            if (variable) {
                return variable.length > 0 ? true : false;
            }
            return null;
        },
        addReview() {
            let mainForm = document.getElementsByName("review-form")[0];
            mainForm.classList.add("was-validated");
        ...

问题

1. 解决 required 和我的自定义验证之间的冲突导致输入字段被过早标记为有效
2. b-form-invalid-feedback如果未选择日期，则在表单提交的日期选择器上显示

Answer 1

简而言之，novalidate从<form>Vue 模板中删除。当您设置时novalidate，输入将:valid在其整个生命周期中保持其状态，直到您显式调用为止setCustomValidity。工作沙箱

\n

因为，Bootstrap 样式也适用于:valid或:invalid状态，所以即使您的自定义验证器确定输入无效，有效和无效样式都将被应用，:valid即.is-invalid，但是，我想它只是发生了，:valid样式优先于这种方式目前已编写 Bootstrap 样式表。

\n

U\xcc\xb6s\xcc\xb6e\xcc\xb6\xcc \xcc\xb6n\xcc\xb6o\xcc\xb6v\xcc\xb6a\xcc\xb6l\xcc\xb6i\xcc\xb6d\xcc\xb6a\xcc\xb6t\xcc\xb6e\xcc\xb6\xb6\xcc\xb6\xcc\xb6w\xcc\xb6h\xcc\xb6e\xcc\xb6n\xcc\xb6\xcc\xb6y\xcc\xb6o\ xcc\xb6u\xcc\xb6\'\xcc\xb6r\xcc\xb6e\xcc\xb6\xcc\xb6i\xcc\xb6m\xcc\xb6p\xcc\xb6l\xcc\xb6e\xcc\xb6m\xcc\xb6e\ xcc\xb6n\xcc\xb6t\xcc\xb6i\xcc\xb6n\xcc\xb6g\xcc\xb6\xcc\xb6a\xcc\xb6\xcc\xb6c\xcc\xb6o\xcc\xb6m\xcc\xb6p\xcc\ xb6l\xcc\xb6e\xcc\xb6t\xcc\xb6e\xcc\xb6\xcc\xb6v\xcc\xb6a\xcc\xb6l\xcc\xb6i\xcc\xb6d\xcc\xb6a\xcc\xb6t\xcc\xb6i\ xcc\xb6o\xcc\xb6n\xcc\xb6\xcc\xb6s\xcc\xb6o\xcc\xb6l\xcc\xb6u\xcc\xb6t\xcc\xb6i\xcc\xb6o\xcc\xb6n\xcc\xb6\xcc\ xb6y\xcc\xb6o\xcc\xb6u\xcc\xb6r\xcc\xb6s\xcc\xb6e\xcc\xb6l\xcc\xb6f\xcc\xb6\xcc\xb6i\xcc\xb6n\xcc\xb6c\xcc\xb6l\ xcc\xb6u\xcc\xb6d\xcc\xb6i\xcc\xb6n\xcc\xb6g\xcc\xb6\xcc\xb6\xcc \xcc\xb6r\xcc\xb6e\xcc\xb6q\xcc\xb6u\xcc\xb6i\xcc\xb6r\xcc\xb6e\xcc\xb6d\xcc\xb6\xb6\xcc\xb6v\xcc\xb6a\xcc\xb6l\xcc\xb6i\xcc\ xb6d\xcc\xb6a\xcc\xb6t\xcc\xb6o\xcc\xb6r\xcc\xb6.\xcc\xb6

\n

使用 Bootstrap，因为它还应用样式:valid或:invalid输入状态，所以最好不要使用novalidate.

\n

当然，这将启用浏览器弹出窗口，要求填写某些可能不需要的字段。

\n

建议：在表单上使用validatedprop 并将其绑定到表单的状态并将其设置为truein addReview()，它会自动添加was-validated类，并且您不需要直接操作 DOM。

\n

编辑：由于删除novalidate启用浏览器验证，submit事件不再在表单上触发，因此was-validated类永远不会添加到表单中。这在我原来的答案中提出了一个问题，因为消息和图标没有显示was-validated。我已经修改了沙箱以建议解决该问题，即将click事件绑定到提交按钮以进行验证逻辑，并使用submit事件来处理成功验证后应该发生的事情。

\n

Datepicker 的编辑： datepicker 从未失效的原因是因为isStateValid()方法中的问题，特别是该部分：

\n

if(variable) { // "" evaluates to false\n   // ...\n}\n

\n

由于""计算结果为 false，因此它将始终返回null。解决这个问题的方法是结合上面维护表单validated状态的建议。if(variable)现在，我们不再检查，而是检查if(this.validated)，如果是true，我们只需检查长度并返回true或false。

\n