Javascript Vue删除无效的输入消息

当输入字段需要更多信息时，浏览器会在气泡中显示一条消息，说明输入无效的原因。我想在vue中防止默认设置，但我不确定如何设置。下面是我在JavaScript中的实现方式，但在Vue中，可能有一种方法可以实现

@invalid

，就像我知道您可以作为eventListener在表单上执行

@submit

一样。我还想知道在ios或android中是否需要额外的预防措施来防止这种情况

HTML

<form>
  <input type="text" required>
  <input type="submit">
 </form>

---

如果要完全禁用验证，可以将

novalidate=“true”

添加到

表单

元素中

我怀疑您可能只想在初始页面加载时执行此操作。如果是这样的话，你能更新你的部分并希望添加一个例子吗？之后我可以更新我的答案我的模式（来自Vuetify的想法）非常简单：

newvue({
el:“应用程序”，
数据：{
isFormValid:null，
表格：{
输入1：{
文本：空，
规则：['required'，'min3']，
validateText:null
},
输入2：{
文本：空，
规则：[“必需”]，
validateText:null
}
},
规则：{
必填项：v=>！！v&&！！[…v].length | |“此字段为必填项。”，
min3:v=>！！v&&（[…v].length>2）| |“此字段的长度必须至少为3个字符。”
}
},
方法：{
validateForm（）{
const validated=[]
for（请输入此.form）{
const v=this.form[key].rules.map（e=>{
返回此.rules[e]（此.form[key].text）
})
如果（v.some（e=>e！==true））{
this.form[key].validateText=v.filter（e=>e！==true）[0]
已验证。推送（错误）
}否则{
this.form[key].validateText=“此字段有效。”
已验证。推送（true）
}
}
返回validated.every（e=>e==true）
},
submitForm（）{
if（this.validateForm（））{
//提交逻辑
this.isFormValid=“是的，它是有效的。”
}否则{
//无效逻辑：
this.isFormValid=“不，它无效。”
}
},
重置验证（）{
const form=JSON.parse（JSON.stringify（this.form））
for（让输入表单）{
表单[key]。validateText=null
}
this.isFormValid=null
this.form=form
},
重置表单（）{
const form=JSON.parse（JSON.stringify（this.form））
for（让输入表单）{
表单[key]。validateText=null
表单[键]。文本=null
}
this.isFormValid=null
this.form=form
}
}
})

投入1：
如果此字段不为空且至少有3个字符，则此字段将进行验证
{{form.input_1.validateText | |'''}}


投入2：
如果不为空，则此字段将被验证
{{form.input_2.validateText | |'''}}


提交
表格有效吗？{{isFormValid}}
重置验证

重置表单

Hi albert\u anthony6！你能展示一下你看到的行为吗？是的。第一个输入是我所寻求的。禁用该消息。第二个输入显示默认消息。谢谢你添加代码笔！不幸的是，我不认为它真的显示了问题，我只想禁用消息，novalidate将覆盖我不想要的必需属性。请仅禁用该消息

document.querySelector( "input" ).addEventListener( "invalid",
 function( event ) {
        event.preventDefault();
  });