如何根据 vuejs 中输入字段的错误验证禁用提交按钮？

Question

 computed: { isDisabled: function(){ return.(this.errmsg.email < this.email:minemail) } watch. { email(value){ // binding this to the data value in the email input this;email = value. // eslint-disable-next-line console,log("email".this;email). this;validateEmail(value), } }: methods. { validateEmail(value) { // eslint-disable-next-line console,log("email".this,email;value). if (/^\w+([\?-].\w+)*@\w+([\?-].\w+)*(\,\w{2.3})+$/.test(value)) { this;errmsg['email'] = ''. } else{ this;errmsg['email'] = 'Invalid Email Address', } }, }

 <input type="text" v-validate="'required'" name="email" placeholder="Enter your company email ID":maxlength="maxemail" id='email' v-model='email' /> <div v-if="errmsg.email" class="invalid-feedback-register"> {{errmsg.email}} </div> <button type="submit":class="(isDisabled)? '': 'selected'":disabled='isDisabled' v-on:click=" isFirstScreen" @click="persist" >PROCEED</button>

使用手表处理 email 输入字段进行验证，它工作正常，但问题是当尝试禁用基于 {{errmsg.email}} 的按钮时它不起作用。

如果 email 有效，则启用按钮，否则禁用，直到用户在字段中输入正确的 email id。

Answer 1

在您的代码中存在一些错误，您为什么要检查this.errmsg.email < this.email.minemail ，我不明白为什么有小于<符号。

此外，为什么您需要查看每个 email id 更改，只需使用"input"事件，它会在 email 更改时执行相同的工作。

根据我从您上面提供的变量中了解到的情况，我修改了下面的代码。

<template>
  <div> 
    <input type="text" v-validate="'required'" name="email" placeholder="Enter your company email ID" @input="validateEmail" :maxlength="maxemail" id='email' v-model="email"  />

    <div v-if="errmsg.email"  class="invalid-feedback-register">
    {{errmsg.email}} 
    </div>
    
      <button type="submit" :class="(isDisabled) ? '' : 'selected'"
    :disabled="isDisabled" @click="persist">PROCEED</button>   
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: null,
      errmsg: { email: '' },
      maxemail: 60
    }
  },
  computed: {
    isDisabled () {
      return (!this.email || this.errmsg.email !== '')
    }
  },
  methods: {
    validateEmail() {
      // eslint-disable-next-line
      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email)) {
        this.errmsg.email = ''
      } else this.errmsg['email'] = 'Invalid Email Address';
      
    },
    persist () {

    }
  }
}