基于长度如何检查Vuejs中的值？ [关闭]答案

【问题标题】：Based on length how to check values in Vuejs? [closed]基于长度如何检查Vuejs中的值？ [关闭]
【发布时间】：2021-07-13 17:17:21
【问题描述】：

 <button type="submit"
    :disabled=" (user.password && !$v.user.password.valid) ||
                (user.confirmPassword && !$v.user.confirmPassword.sameAsPassword)">sda </button>

我需要禁用长度，直到用户在两个字段中输入相同的字符。我需要检查两个字段值。

我可以通过使用长度来做到这一点吗？如果是，我该如何检查上面的代码。

问题目前只在检查，如果输入的密码与确认密码字段中的第一个字符匹配，则继续进行。

【问题讨论】：

您能否重新表述您的问题以便更好地理解您的问题？主题不够清楚
我很抱歉，但是你让理解实际问题变得非常复杂。查看指南以了解如何提出问题 - stackoverflow.com/help/how-to-ask

标签： javascript vue.js vuelidate

【解决方案1】：

我不知道我是否理解正确，但我认为您可以简单地添加&& user.password.length>8，或者由于您使用的是 vuelidate，您可以添加此验证： https://codepen.io/sibellek/pen/oNBPVbN

 <div id="app">
 <input
                      v-model="user.confirmPassword"
                      id="confirmPassword"
                      name="confirmPassword"
                      placeholder="Confirm password"
                      autocomplete="off"
                      :disabled="user.password.length < 8"
        @change="disabledSubmit"
                    />
                    
                    
<div
                      class="error-messages-pass"
                    >
                    
<input
                      v-model="user.password"
                      id="password"
                      name="password"
                      value=""
                      placeholder="Enter new password"
                      autocomplete="off"
       @change="disabledSubmit"
                    />
</div>
  <button type="submit"
    :disabled="disableButton">sda </button>
</div>


new Vue({
  el: "#app",
  data: {
    user: {
      password: "",
      confirmPassword: "",
      },
    disableButton: false,
  },
  validations: {

    user: {
      password: {
        valid: function (value) {
          const containsUppercase = /[A-Z]/.test(value)
          const containsLowercase = /[a-z]/.test(value)
          const containsNumber = /[0-9]/.test(value)
          const containsSpecial = /[#?!@$%^&*-]/.test(value)
          return containsUppercase && containsLowercase && containsNumber && containsSpecial
        },
        required, minLength: minLength(8), maxLength: maxLength(20)
      },
      confirmPassword: { required, sameAsPassword: (value, vm) =>
        value === vm.password.substring(0, value.length) },
    },
    },
  methods: {
  disabledSubmit() {
   this.$v.user.$touch();
   this.disableButton = this.user.password.length<8 || 
 this.$v.user.password.$error || this.user.password!==this.user.confirmPassword;
    }
  },
  mounted() {
    this.disabledSubmit();
  }
})

这样你就可以保持你的代码不变

【讨论】：