The cause of

Recently encountered in the project, when a user registration, if the information is wrong, need according to the error information returned the back-end, displayed in the form below, on the Internet to find a lot of solutions, the vast majority of dynamic calibration, dynamic calibration is not really, several error messages have been identified, but in the case, according to the corresponding condition, according to the corresponding information, This is different from our needs.

Realize the principle of

In the official document Form Form, it is written that there is an error slot in the form-item, which is the display of the verification information of the custom Form. The parameter is {error}. We need to use this slot to display the variable information we defined.

The implementation code

Suppose we have a form, and we need to verify the entered account name. The rule of the account is alphanumeric underscore, and the length is between 5 and 20 characters. At the same time, we need to check the duplicate name on the server.

The HTML code

<el-form ref="form" :model="form.data" :rules="form.rules" label-width="150px">
  <el-form-item label="Username" prop="name" ref="name">
    <el-input type="text" v-model="form.data.name"></el-input>
    <! -- Error slot -->
    <span class="el-form-item__error" slot="error">{{form.dynamicError.name}}</span>
  </el-form-item>
  <el-form-item label="State">
    <label>{{form.data.status}}</label>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" v-loading="loading" @click="submitForm">submit</el-button>
  </el-form-item>
</el-form>
Copy the code

Vue structure code

data() {
  return {
    loading: false.form: {
      dynamicError: {
        name: ' '
      },
      data: {
        name: ' '.status: ' '
      },
      rules: {
        name: [{validator: (rule, value, callback) = > {
            const validName = str= > (/ ^ [\ da zA - Z_] {5, 20} $/).test(str)
            if(! value) {this.form.dynamicError.name = 'Please enter a user name'
            } else if(! validName(value)) {this.form.dynamicError.name = 'Wrong format, user name consists of 6-20 letters, digits, underscores'
            } else {
              this.form.dynamicError.name = ' '
              // You need to manually remove the error message border caused by IS-error
              this.$refs.name.$el.classList.remove('is-error')
            }
            callback(this.form.dynamicError.name)
          }, trigger: 'change'}]}}}; },methods: {
  submitForm() {
    this.loading = true
    this.form.data.status = 'Submitting, please wait'
    this.$refs.form.validate((valid) = > {
      if (valid) {
        setTimeout((a)= > {
          this.loading = false
          if (Math.random() > 0.5) {
            this.form.data.status = 'Verification successful! Submitted successfully '
          } else {
            this.form.data.status = 'Verification successful, but not passed'
            this.form.dynamicError.name = 'Username already exists! '
            this.$refs.name.$el.classList.add('is-error')}},1000)}else {
        this.loading = false
        this.form.data.status = 'Verification failed'}}); }}Copy the code

Online test address