[英]How to disable submit button based on error validation for input field in vuejs?
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。
在您的代碼中存在一些錯誤,您為什么要檢查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 () {
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.