如何在自定义验证功能中将this。$ v.invalid值更改为true(检查错误处理程序)

时间:2019-04-07 03:23:44

标签: javascript vue.js

我使用了vuetify中的vuelidate验证表单,但是没有规则检查用户是否输入了浮点数。因此,我编写了自己的函数来检查用户是否键入了浮点数。现在的问题是,如果this。$ v.invalid为TRUE(由vuelidate检测到错误),则我的按钮被禁用,但是如果我的自定义函数检测到错误(未给出浮点数),则无法更改此值$ v.invalid,这样我的按钮将保持禁用状态,直到用户修复他的错误(给出浮点数)为止...有想法吗?

    <!-- my submit button -->
    <v-btn
       @click="submit()"
       title="Submit"
       color="primary"
       :disabled="$v.$invalid"
       >Submit</v-btn
     >

     <!-- Textfield -->
     <v-text-field
        v-model="money"
        :error-messages="moneyErrors"
        label="Money"
        required
        @input="$v.money.$touch()"
        @blur="$v.money.$touch()"
     ></v-text-field>




    <script>
     export default {
         validations: {
           money: { required, maxLength: maxLength(3) }
         },
         data() {
           return {
              money: "",
           };
         },

     computed: {
     // validation functions ( return errors )

        moneyErrors() {
          const errors = [];
          var floatBetweenRegex = /^(100(\.0{1,2})?|[1-9]?\d(\.\d{1,2})?)$/;

          // works without problem
          if (!this.$v.money.$dirty) {
              return errors;
           }

          // works without problem
          if (!this.$v.money.required) {
             errors.push("Money is required");
             return errors;
           }

         // ----> DOESN'T works ( if i had here an error button don't stays desabled ....
         if (!floatBetweenRegex.test(this.money)) {
             errors.push("Must must be a float between 0 and 100");

             // ------> how to access/change the this.$v.invalid value so that my button stays disabled ????

             return errors;
           }
          }
        },
     methods: {
        submit() {
          // submit function
          this.$v.$touch();
          // do somethig after button is enabled 

      }
    };
  </script>

0 个答案:

没有答案