Vue.js自定义错误信息模板

╰半橙微兮° 2021-06-24 16:10 394阅读 0赞

在vue.js中，常常使用vue-validator插件对表单进行校验。而在vue-validator中，可以使用validator-errors组件来更便捷的输出错误信息。代码示例如下：

<validator name="validation1">
      <div class="username">
        <label for="username">username:</label>
        <input id="username" type="text" v-validate:username="{required:{rule:true,message:'required you name!'}}"
      </div>
      <div>
        <validator-errors :validation="$validation1"></validator-errors>
      </div>
    </validator>

如果不喜欢默认的错误信息模板，也可以自定义错误信息模板，validator-errors提供了Component模板、Partial模板两种定义方式。  
**1.Component模板**

<div id="app">
      <validator name="validation1">
        <div class="username">
          <label for="username">username:</label>
          <input id="username" type="text" v-validate:username="{required:{rule:true,message:'required you name!'}}"
        </div>
        <div>
          <validator-errors  :component="'custom-error'"  :validation="$validation1"></validator-errors>
        </div>
      </validator>
    </div>
    Vue.component('custom-error',{
      props:['field','validator','message'],
      template:'<p class="error-{
       {field}}-{
       {validator}}">{
       {message}}</p>'
    })
    new Vue({el:'#app'})

**2.Partial模板**

<div id="app">
      <validator name="validation1">
        <div class="username">
          <label for="username">username:</label>
          <input id="username" type="text" v-validate:username="{required:{rule:true,message:'required you name!'}}"
        </div>
        <div>
          <validator-errors  partial="'myErrorTemplate'"  :validation="$validation1"></validator-errors>
        </div>
      </validator>
    </div>
    Vue.partial('myErrorTemplate','<p>{
       {field}}:{
       {validator}}:{
       {message}}</p>')
    new Vue({el:'#app'})