输入验证：更改默认错误消息

Question

如果我在 vue 上这样做：

<input pattern="\d+">

它得到了正确的验证，但我收到一个弹出窗口，其中显示一条消息“请匹配请求的格式”。

有什么办法可以改变这个消息吗？我找不到有关接受的验证标签的文档。

JSFiddle： http: //jsfiddle.net/ovz5p3wt/

Answer 1

因此，正如评论中所指出的，这样做的方法是使用oninvalid和setCustomValidity

<input pattern="\d+" oninvalid="setCustomValidity('please use a number')">

但是，如果您想使用脚本来完成此操作（因为您标记为 vue），这里是另一个解决方案，允许您动态更改可以使用脚本版本的值。不幸的@oninvalid是 vue 似乎不支持，所以你需要使用 $refs 设置功能

updateCustomValidity(lang){
    var el = this.$refs.el;
    el.oninvalid = el.setCustomValidity(this[lang].message);
}

<input pattern="\d+" oninvalid="setCustomValidity('please use a number')">

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);
  }
})