javascript - Vue.js Element UI form validation - display errors from backend - Stack Overflow

admin管理员组

文章数量:1395185

i'm using Vue.js and Element Ui libraries for my project. I have front-end based validation with some rules. But i also need to implement display errors (for current field) from backend. When the form is sent and backend returns error it looks like this:

[
  {"message": "email address is invalid", "path": ["email"]},
  {"message": "example error for password field", "path": ["password"]}
]

where path is field name based on my form field model.

I created some extra element that displays error from backend as you can see in my fiddle. But i would like to use vue element ui validation. So backend errors should be displayed the same way as front-end messages. I can't figure out how to do this.

Here is my fiddle: /

Form code looks like this:

<el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
      <el-form-item label="Email" prop="email">
        <el-input v-model="loginForm.email" :disabled="formProcessing" ref="loginInput"></el-input>
        <p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
        <p v-if="isErrorForField('password', errors)">{{ getErrorForField('password', errors) }}</p>
      </el-form-item>
      <el-form-item>
        <div class="submit-wrapper">
          <el-button type="primary" @click="submit('loginForm')" :loading="formProcessing">Log in</el-button>
        </div>
      </el-form-item>
    </el-form>

And Full ponent is here:

var Main = {
  data() {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      rules: {
        email: { required: true, message: 'Required', trigger: 'change' },
        password: { required: true, message: 'Required', trigger: 'change' }
      },
      formProcessing: false,
      errors: []
    }
  },
  methods: {
    isErrorForField (field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered
      }
    },
    getErrorForField (field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered[0].message
      }
    },
    supportGlobalErrorMessage () {
      this.errors.forEach(error => {
        if (!error.path.length) {
          this.$message({
            message: error.message,
            type: 'error'
          })
        }
      })
    },
    submit (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false
        }
        this.formProcessing = true
        // send data to backend
        // error response looks like this:
        let errors = [
          {"message": "email address is invalid", "path": ["email"]},
          {"message": "example error for password field", "path": ["password"]}
        ]
        setTimeout(() => {
            this.formProcessing = false
          this.errors = errors
          this.supportGlobalErrorMessage()
        }, 500)
      })
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Can someone help?

i'm using Vue.js and Element Ui libraries for my project. I have front-end based validation with some rules. But i also need to implement display errors (for current field) from backend. When the form is sent and backend returns error it looks like this:

[
  {"message": "email address is invalid", "path": ["email"]},
  {"message": "example error for password field", "path": ["password"]}
]

where path is field name based on my form field model.

I created some extra element that displays error from backend as you can see in my fiddle. But i would like to use vue element ui validation. So backend errors should be displayed the same way as front-end messages. I can't figure out how to do this.

Here is my fiddle: https://jsfiddle/ts4Lfxb6/

Form code looks like this:

<el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
      <el-form-item label="Email" prop="email">
        <el-input v-model="loginForm.email" :disabled="formProcessing" ref="loginInput"></el-input>
        <p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
        <p v-if="isErrorForField('password', errors)">{{ getErrorForField('password', errors) }}</p>
      </el-form-item>
      <el-form-item>
        <div class="submit-wrapper">
          <el-button type="primary" @click="submit('loginForm')" :loading="formProcessing">Log in</el-button>
        </div>
      </el-form-item>
    </el-form>

And Full ponent is here:

var Main = {
  data() {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      rules: {
        email: { required: true, message: 'Required', trigger: 'change' },
        password: { required: true, message: 'Required', trigger: 'change' }
      },
      formProcessing: false,
      errors: []
    }
  },
  methods: {
    isErrorForField (field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered
      }
    },
    getErrorForField (field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered[0].message
      }
    },
    supportGlobalErrorMessage () {
      this.errors.forEach(error => {
        if (!error.path.length) {
          this.$message({
            message: error.message,
            type: 'error'
          })
        }
      })
    },
    submit (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false
        }
        this.formProcessing = true
        // send data to backend
        // error response looks like this:
        let errors = [
          {"message": "email address is invalid", "path": ["email"]},
          {"message": "example error for password field", "path": ["password"]}
        ]
        setTimeout(() => {
            this.formProcessing = false
          this.errors = errors
          this.supportGlobalErrorMessage()
        }, 500)
      })
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Can someone help?

• javascript
• vue.js
• element-ui

Share Improve this question Follow edited Jan 30, 2020 at 13:17 Marek asked Jan 30, 2020 at 13:11 MarekMarek 15511 gold badge11 silver badge1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Made the following changes to your code:

var Main = {
  data() {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      rules: {
        email: {
          required: true,
          //validator: this.customValidator,
          //trigger: 'blur'
        },
        password: {
          required: true,
          //validator: this.customValidator,
          //trigger: 'blur'
        }
      },
      formProcessing: false,
      errors: []
    }
  },
  methods: {
    customValidator(rule, value, callback) {
      console.log(rule)
      if (!value) {
        callback(new Error('The field is required'))
      }
      let errors = [{
          "message": "email address is invalid",
          "path": ["email"]
        },
        {
          "message": "example error for password field",
          "path": ["password"]
        }
      ]
      setTimeout(() => {
        this.errors = errors

        if (this.isErrorForField(rule.fullField, this.errors)) {
          callback(new Error(this.getErrorForField(rule.fullField, this.errors)))
        }
        callback()
      }, 500)
    },
    isErrorForField(field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered
      }
    },
    getErrorForField(field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered[0].message
      }
    },
    supportGlobalErrorMessage() {
      this.errors.forEach(error => {
        if (!error.path.length) {
          this.$message({
            message: error.message,
            type: 'error'
          })
        }
      })
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false
        }
        this.formProcessing = true
        // send data to backend
        // error response looks like this:
        let errors = [{
            "message": "email address is invalid",
            "path": ["email"]
          },
          {
            "message": "example error for password field",
            "path": ["password"]
          }
        ]
        setTimeout(() => {
          this.errors = errors
          this.formProcessing = false
          this.supportGlobalErrorMessage()
        }, 500)
      })
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg./[email protected]/lib/theme-chalk/index.css");

<script src="//unpkg./vue/dist/vue.js"></script>
<script src="//unpkg./[email protected]/lib/index.js"></script>
<div id="app">
  <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
    <el-form-item label="Email" prop="email" :error="getErrorForField('email', errors)">
      <el-input v-model="loginForm.email" :disabled="formProcessing" ref="loginInput"></el-input>
      <!-- <p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p> -->
    </el-form-item>
    <el-form-item label="Password" prop="password" :error="getErrorForField('password', errors)">
      <el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
      <!-- <p v-if="isErrorForField('password', errors)">{{ getErrorForField('password', errors) }}</p> -->
    </el-form-item>
    <el-form-item>
      <div class="submit-wrapper">
        <el-button type="primary" @click="submit('loginForm')" :loading="formProcessing">Log in</el-button>
      </div>
    </el-form-item>
  </el-form>
</div>

The validator property in the rules attribute can set a custom validation rule which receive three parameters (rule, value, callback).

rule: The validation rule in the source descriptor that corresponds to the field name being validated. It is always assigned a field property with the name of the field being validated.

value: The value of the source object property being validated.

callback: A callback function to invoke once validation is plete. It expects to be passed an array of Error instances to indicate validation failure. If the check is synchronous, you can directly return a false or Error or Error Array.

So, you can get the data from the backend and process it, and then display the error message through the callback.

本文标签： javascriptVuejs Element UI form validationdisplay errors from backendStack Overflow