Vue-Bootstrap b-form-input 状态模糊而不是加载

Question

我正在使用 Vue-Bootstrap 并且我的组件中有一个 b-form-input 作为密码。我检查了此输入的验证，密码长度至少为 8 个字符：

<b-form-group
        label="Password: (8 characters minimum)"
        minlength="8"
        class="text-left  mt-3"
      >
        <b-form-input
          v-model="form.password"
          type="password"
          name="password"
          placeholder="Enter Your Password"
          :state="passwordState"
          pattern=".{8,}"
          description="please enter a password "
          title="Password should be at least 8 characters long"
          required
        ></b-form-input>
        <b-form-invalid-feedback :state="passwordState">
          Your password must be at least 8 characters long.
        </b-form-invalid-feedback>
      </b-form-group>
      <b-form-group
        was-validated
        label="Confirm Password:"
        class="text-left  mt-3"
      >
        <b-form-input
          type="password"
          v-model="form.confirmpassword"
          placeholder="Confirm Your Password"
          required
          :state="confirmPasswordState"
          pattern=".{8,}"
        ></b-form-input>
        <b-form-invalid-feedback :state="confirmPasswordState">
          Your confirmed password must be exactly the same as your password
          field.
        </b-form-invalid-feedback>
      </b-form-group>

 computed: {
    confirmPasswordState() {
      return this.form.password == this.form.confirmpassword &&
        this.form.confirmpassword != ""
        ? true
        : false;
    },
    passwordState() {
      return this.form.password.length >= 8 ? true : false;
    },
  },

我只希望此状态验证在模糊时显示，而不是在加载时显示。

Answer 1

我认为最简单的方法是在数据中添加一个标志来跟踪输入是否模糊，然后根据该标志进行有条件的验证。

将 passwordHasBlurred: false 添加到 data()
将 @blur="passwordHasBlurred = true" 添加到您的两个 <b-form-input>：
- ```
<b-form-input
   ...
   @blur="passwordHasBlurred = true"
>
```

当 passwordHasBlurred 为 false 时，将您的计算验证函数调整为 return null。 This tells Bootstrap-Vue to display no validation state 在一个输入模糊之前。

passwordState() {
  return this.passwordHasBlurred
    ? this.form.password.length >= 8
      ? true
      : false
    : null;
},

confirmPasswordState() {
  return this.passwordHasBlurred 
    ? this.form.password == this.form.confirmpassword &&
     this.form.confirmpassword != "" 
     ? true 
     : false
    : null;
},

这是一个可运行的例子！（由于其大小而隐藏）：

new Vue({
  el: '#app',
  data() {
    return {
      form: {
        password: '',
        confirmPassword: '',
      },
      passwordHasBlurred: false,
    }
  },
  computed: {
    confirmPasswordState() {
      return this.passwordHasBlurred 
        ? this.form.password == this.form.confirmpassword &&
         this.form.confirmpassword != "" 
         ? true 
         : false
        : null;
    },
    passwordState() {
      return this.passwordHasBlurred
        ? this.form.password.length >= 8
          ? true
          : false
        : null;
    },
  },
  methods: {
    reset() {
      this.form.password = '';
      this.form.confirmPassword = '';
      this.passwordHasBlurred = false;
    },
  },
});

body {
  padding: 1rem;
}

<!-- Add Vue and Bootstrap-Vue to snippet -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /><script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script><script src="//unpkg.com/vue@2/dist/vue.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<template id="app">
  <div>
    <b-form-group
      label="Password: (8 characters minimum)"
      minlength="8"
      class="text-left  mt-3"
    >
      <b-form-input
        v-model="form.password"
        type="password"
        name="password"
        placeholder="Enter Your Password"
        :state="passwordState"
        pattern=".{8,}"
        description="please enter a password "
        title="Password should be at least 8 characters long"
        required
        @blur="passwordHasBlurred = true"
      ></b-form-input>
      <b-form-invalid-feedback :state="passwordState">
        Your password must be at least 8 characters long.
      </b-form-invalid-feedback>
      </b-form-group>
      <b-form-group
        label="Confirm Password:"
        class="text-left  mt-3"
      >
      <b-form-input
        type="password"
        v-model="form.confirmpassword"
        placeholder="Confirm Your Password"
        required
        :state="confirmPasswordState"
        pattern=".{8,}"
        @blur="passwordHasBlurred = true"
      ></b-form-input>
      <b-form-invalid-feedback :state="confirmPasswordState">
        Your confirmed password must be exactly the same as your password
        field.
      </b-form-invalid-feedback>
    </b-form-group>
    <br>
    <b-btn variant="outline-secondary" @click="reset">
      Reset
    </b-btn>
  </div>
</template>

如果您想要或需要分别跟踪每个输入的模糊，只需将另一个属性添加到数据以进行跟踪，并相应地调整计算的属性和事件处理程序。

Vue-Bootstrap b-form-input 状态模糊而不是加载

Vue-Bootstrap b-form-input state on blur rather than load

validation

blur

vuejs2

bootstrap-vue