如果我在Vue上这样做:
<input pattern="\d+">
它得到了正确的验证,但是弹出消息“请匹配请求的格式”。
有什么办法可以更改此消息?我在接受的验证标签上找不到文档。
JSFiddle:http://jsfiddle.net/ovz5p3wt/
最佳答案
因此,如评论中所述,方法是使用oninvalid
和setCustomValidity
<input pattern="\d+" oninvalid="setCustomValidity('please use a number')">
但是,如果您想使用脚本来执行此操作(因为您是按Vue标记的),这是另一种解决方案,它允许您动态更改可以使用脚本版本的值。不幸的是,Vue似乎不支持
@oninvalid
,因此您需要使用$ refs设置功能。updateCustomValidity(lang){
var el = this.$refs.el;
el.oninvalid = el.setCustomValidity(this[lang].message);
}
new Vue({
el: "#app",
data() {
return {
lang: 'en',
en: {
message: 'nope, sorry',
},
fr: {
message: 'sacre bleu'
}
}
},
watch: {
lang: {
handler(lang) {
this.updateCustomValidity(lang);
}
}
},
methods: {
updateCustomValidity(lang){
var el = this.$refs.el;
el.oninvalid = el.setCustomValidity(this[lang].message);
}
},
mounted() {
this.updateCustomValidity(this.lang);
}
})
body { background: #20262E; padding: 20px; font-family: Helvetica;}
#app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s;}
input { margin: 8px 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
EN: <input type="radio" v-model="lang" value="en">
FR: <input type="radio" v-model="lang" value="fr">
<form>
<input pattern="\d+" value="text" ref="el">
<button type="submit">Submit</button>
</form>
</div>