Vue使用动态文本设置CustomValidity

Question

我目前正在尝试使用下面的代码更改表单输入中的默认无效文本。如果文本是静态的，我尝试的方法是有效的，但在我的情况下，文本必须是动态的，所以我必须输入某种prop/data值。这是因为用户将能够在英文和中文文本之间切换。我试过使用@invalid和:oninvalid，但它们似乎不起作用。有人能帮我解决这个问题吗？

<input
ref="firstInput1"
type="email"
v-model="email"
oninvalid="this.setCustomValidity('custom text on invalid')"
onchange="this.setCustomValidity('')"
:placeholder="Email"
required
/>

oninvalid和onchange是实现这一功能的两个关键组件。希望我们能找到如何使用动态文本来做到这一点。

Answer 1

对于Vue输入中的更改事件，您应该使用@change(而不是onchange(

我认为这个样本可以帮助你在电子邮件上设置vue验证

<div class="container" id="app">
<div :class="['input-group', isEmailValid()]">
<span class="input-group-addon" id="basic-addon1"><span class="fa fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="Email Address" v-model="email" />
</div>
</div>

和

new Vue({
el: '#app',
data: {
email: '',
reg: /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,24}))$/
},
methods: {
isEmailValid: function() {
return (this.email == "")? "" : (this.reg.test(this.email)) ? 'has-success' : 'has-error';
}
}
});