Question

Vue的最佳表单验证实践是什么？我在发送按钮的验证disabled属性的方法中一直使用简单的if树，但是即使只有两个字段，也可能已经有很多情况需要验证，并且鉴于我有不同的形式，我不得不大量粘贴< / p>

这是我用于模态窗口之一的方法：

isCryptoWithdrawalPossible() {
        if (this.sendWalletModal.amount || this.sendWalletModal.address) {

          if (this.sendWalletModal.amount && !this.sendWalletModal.address) {
            this.sendWalletModal.error = this.$t('wallets.wallets.needAddress');
            return false;
          } else if (!this.sendWalletModal.amount && this.sendWalletModal.address) {
            this.sendWalletModal.error = this.$t('wallets.wallets.needAmount')
            return false;
          }
          if (this.sendWalletModal.amount < this.sendWalletModal.method.minAmount) {
            this.sendWalletModal.error = this.$t('wallets.wallets.overLimitMinAmount', [this.sendWalletModal.method.minAmount]);
            return false;
          }
          else if (this.sendWalletModal.amount > this.sendWalletModal.method.maxAmount) {
            this.sendWalletModal.error = this.$t('wallets.wallets.overLimitMaxAmount', [this.sendWalletModal.method.maxAmount]);
            return false;
          }
          else if (this.sendWalletModal.amount > this.filteredWallets.find( el => el.currencyTitle == this.sendWalletModal.currency).avaliableFunds - this.calculateSendFee(this.sendWalletModal)) {
            this.sendWalletModal.error = this.$t('wallets.wallets.insufficientBalance')
            return false;
          }
          else {
            this.sendWalletModal.error = '';
            return true;
          }
        } else {
          this.sendWalletModal.error = '';
          return false;
        }
      },

Answer 1

如果您要寻找第三方库来简单地进行验证，请检查Vuelidate

Answer 2

看看这个链接：https://laracasts.com/discuss/channels/vue/vue-validator-vs-vee-validate-vs

我们使用vee-validate进行工作，其主页位于https://baianat.github.io/vee-validate/。它在这里有一个很好的示例沙箱：https://baianat.github.io/vee-validate/examples/。我建议您看一下codesandbox中的标志示例，以了解vee-validate如何跟踪其正在验证的字段的变化。它使用date-fns作为它的默认日期库（如果您正在使用矩，这可能会引起您的注意，但是我同时将date-fns和矩日期与vee-validate一起使用（我暂时使用“自定义规则”功能日期））。将vee-validate应用于各种表单字段后，您可以通过调用以下函数来检查是否有任何字段已更改：

hasChanged: function() {
  return Object.keys(this.fields).some(key => this.fields[key].changed);
  }

我在vee-validate方面遇到了问题，尤其是在日期前后，但它似乎是其中最好的vue验证库之一。问题之一似乎是，如果您更改了一个字段然后将其更改回其原始值，则该字段仍被标记为已更改-因此您必须自己跟踪初始值和当前值。但是在许多表单方案中，无论如何您都必须手动跟踪hasChanged，例如，如果您决定查看表单会更改数据状态（例如，从未查看到已查看），那么您将需要手动记录“ myFormViewed”变量，该变量与表单字段无关/无关。

表单验证的最佳做法

2 个答案: