表单验证的最佳实践答案

【问题标题】：Best practice for form validation表单验证的最佳实践
【发布时间】：2019-08-02 11:33:03
【问题描述】：

Vue 的最佳表单验证实践是什么？我一直在使用简单的 if 树来验证发送按钮的 disabled 属性，但即使只有两个字段，也可能已经有很多情况需要验证，并且考虑到我有不同的表单，我必须大量复制粘贴

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

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;
        }
      },

【问题讨论】：

标签： validation vue.js

【解决方案1】：

如果您正在寻找第三方库来简单地处理验证，请查看 Vuelidate

【讨论】：

【解决方案2】：

2020 年 1 月更新：这是对 vuelidate 的一个很好的概述——这有点与 vee-validate 相比（我希望有一个非常熟悉 vee-validate 的人展示它的更多功能，但作为 vuelidate 的介绍，我喜欢这个介绍）。 https://www.vuemastery.com/conferences/connect-tech-2019/vue-form-validation

github 上的 Vuelidate：(https://github.com/vuelidate/vuelidate)。到目前为止，对 vee-validate 的支持得到了更好的支持，但也许 vuelidate 自己在过渡一段时间后组织得更好。

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

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

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

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

【讨论】：