입력 검증: 기본 오류 메시지 변경

입력 검증: 기본 오류 메시지 변경

vue에서 이 작업을 수행하는 경우:

<input pattern="\d+">

올바르게 검증되지만 "Please match the requested format" 메시지가 팝업 나타납니다.

이 메시지를 변경할 수 있는 방법이 있나요?승인된 유효성 검사 태그에서 문서를 찾을 수 없습니다.

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

그래서 댓글에 써있듯이 그 방법은oninvalid그리고.setCustomValidity

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

그러나 vue로 태그 지정하기 때문에 스크립트를 사용하여 이 작업을 수행하려면 스크립트 버전을 사용할 수 있는 값을 동적으로 변경할 수 있는 다른 솔루션이 있습니다.불행하게도@oninvalidvue에서는 지원되지 않는 것 같으므로 $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>

언급URL : https://stackoverflow.com/questions/52302245/input-validation-change-default-error-message