Question

我有一个最初禁用的提交按钮（通过v-bind:disabled），只有在所有表单输入都为空且错误得到解决之后才会启用。对于我的每个输入，我有一个微调器，在验证输入的有效性后将成为检查或x。这需要几秒钟，我希望同样的延迟应用于启用提交按钮。目前，这就是表格的样子：

这是表格（哈巴狗）：

.form-group
  label Email Address
  .input-group
    input.form-control(type="email" name="emailAddress" value=profile.email
      v-model="email"
      v-validate
      data-vv-delay="1000"
      data-vv-rules="required|email"
      data-vv-as="email"
      :class="{ 'input': true, 'is-danger': errors.has('emailAddress') }"
      placeholder="eg. andres@gmail.com")
    .input-group-append
      span.input-group-text
        i.fal.fa-pulse.fa-spinner(v-if="email && emailBusy")
        i.fal.fa-check.text-green(v-if="email && !emailBusy && !isEmailTaken && !errors.has('emailAddress')")
        i.fal.fa-times.text-red(v-if="email && !emailBusy && (isEmailTaken || errors.has('emailAddress'))")
  span.text-danger.text-error(v-show="errors.has('emailAddress')") {{ errors.first('emailAddress') }}
  span.text-danger.text-error(v-if="email && email.length > 0 && isEmailTaken") Email address has already been taken
.form-group
  label Username
  .input-group
    input.form-control(type="name" name="username"
      v-model="username"
      v-validate
      data-vv-delay="1000"
      data-vv-rules="required|verify_username"
      :class="{ 'input': true, 'is-danger': errors.has('username') }"
      placeholder="eg. andres45")
    .input-group-append
      span.input-group-text
        i.fal.fa-pulse.fa-spinner(v-if="username && usernameBusy")
        i.fal.fa-check.text-green(v-if="username && !usernameBusy && !isUsernameTaken && !errors.has('username')")
        i.fal.fa-times.text-red(v-if="username && !usernameBusy && (isUsernameTaken || errors.has('username'))")
  span.text-danger.text-error(v-show="errors.has('username')") {{ errors.first('username') }}
  span.text-danger.text-error(v-if="username && username.length > 0 && isUsernameTaken") Username has already been taken
.form-group
  button.btn.btn-blue(:disabled="errors.any() || isEmailTaken || isUsernameTaken || !username || !email" type="submit")
    i.fal.fa-sign-in.mr-2
    span Complete Sign Up

vue实例：

var register = new Vue({ 
  el: '#register',
  data: {
    email: email,
    username: null,

    isUsernameTaken: false,
    usernameTimer: null,
    usernameBusy: false,

    isEmailTaken: false,
    emailTimer: null,
    emailBusy: false
  },
  methods: {
    validateEmail: function(email) {
      var self = this;
      var url = '/api/users?email=' + email;
      self.$http.get(url)
        .then(function(res){
          self.isEmailTaken = true;
          self.emailBusy = false;
        }, function(err){
          self.isEmailTaken = false;
          self.emailBusy = false;
        });
    },
    validateUsername: function(username) {
      var self = this;
      var url = '/api/users/' + username;
      self.$http.get(url)
        .then(function(res){
          self.isUsernameTaken = true;
          self.usernameBusy = false;
        }, function(err){
          self.isUsernameTaken = false;
          self.usernameBusy = false;
        });
    }
  },
  watch: {
    username: function(val) {
      var self = this;
      clearTimeout(self.usernameTimer);
      self.usernameBusy = true;
      self.usernameTimer = setTimeout(function() {
        self.validateUsername(val);
      }, 1600);
    },
    email: function(val) {
      var self = this;
      clearTimeout(self.emailTimer);
      self.emailBusy = true;
      self.emailTimer = setTimeout(function() {
        self.validateEmail(val);
      }, 1600);
    }
  }
});

Answer 1

我在移动设备上，因此对格式化和缺少代码感到抱歉。对我来说，我可能会设置一个变量来跟踪禁用状态，比如var isFormComplete = false;我会使用vue disabled道具来控制按钮/窗体状态。 :disabled=“!isFormComplete”。

然后我会在JS中设置一个vue watch甚至computed方法，它基本上会检查每个表单控件是否为空或者你想做什么任意值检查，因为它是动态的使用变量的场景，检查每个表单控件应该非常简单，当满足所有条件时，将isFormComplete或任何你想要调用它的内容设置为true，然后启用控件。

为了获得额外的乐趣和奖励积分，您可以设置一些通用的验证代码，使其可以重复使用，并将其抽象为vue mixin，并为自己提供一个可以重复使用的漂亮的自定义表单验证。我知道这不是一个传统的答案，但由于我是移动的，我觉得即使缺乏代码，这也比评论更深入。您也可以在验证方法中添加一个计时器，以便在满足所有条件时延迟所需的时间，然后将disabled变量设置为false。

Vue - 在启用禁用按钮之前添加延迟

1 个答案: