The first sentence of the text – “this article has participated in the good article calling order activities, click to see: back end, big front end of the double track submission, 20,000 yuan prize pool for you to challenge!”

1 Element form validation

1 General check writing method

If you don’t understand this, go to the official document

2. Cyclic El-form-item verification writing method

When recycling el-form-item, note how prop, and rules are written. Rules bind to rules. Link in data

Each input is a reuse of the link verification method and checked separately

2.1 Second-level cyclic writing method

3. Nested writing

What should I say if I have multiple inputs on one line, compared to a lot of people who have multiple inputs on one line, that I can check pairs Note that the outer el-form-item does not write prop, and the yellow box is written separately. These two are different For linkage validation, notice that the red box uses this.formData.minprice to compare the value of the current method

4 Pass-value check

Sometimes input in a form is looping out, and its validation rules need to get a value in the current loop for comparison. We all know that element’s official validation methods do not support custom arguments. How can we solve this problem Select a custom validator for the el-form-item. The value is a valid method written within the Methods lifecycle and the parameter is passed Return an arrow function in the Valid method within the methods lifecycle, and write the validation rule you want in the arrow function, so you can receive custom parameters.

5 Cyclic form verification

Businesses may encounter the need to validate such array objects [{},{},{}], and the key values in each object in the array need to be edited and verified, so the form needs to be generated in a loop, and the contents of each form need to be verified separately.

One thing to note here is the binding of the ref on the el-form tag

You may also encounter el-Item second-level cyclic validation in your code, so pay attention to how the prop is bound

<el-collapse-item :title="item.name" :name="index" v-for="(item, index) in edit" :key="index">
  <el-form
    :model="item"
    label-width="220px"
    size="small"
    class="price-form"
    :rules="rules"
    :ref="'otherInfo'+index"
  >
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="xxxx" prop="title">
          <el-input v-model="item.title"
                    type="text"
                    size="mini"
                    clearable
                    placeholder="xxxx"
                    style="width: calc(98% - 150px); min-width: 200px;"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" v-for="(it,j) in item.attributions" :key="it.id">
        <el-form-item :label="it.attribute_key" :prop="'attributions.'+ j +'.attribute_value'"
                      :rules="[{required: true, validator: attBasicInforules(), trigger: 'blur' }]"
        >
          <el-input clearable v-model="it.attribute_value"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</el-collapse-item>
Copy the code
<script>
attBasicInforules() {
      // Attribute validation rule (non-null)
      return (rule, value, callback) = > {
        if(! value) {return callback(new Error('This property cannot be empty'))
        }
        callback()
      }
    }

const other = () = > {
          const list = []
          this.edit.forEach((item, key) = > {
            list.push(new Promise((resolve, reject) = > {
              this.$refs['otherInfo' + key][0].validate(valid= > {
                console.log(valid)
                if (valid) {
                  resolve()
                } else {
                  reject(There is an error in the area, please check the code${key}A form `)}})})return list
        }
        await Promise.all([categoryChange, ...(other())]).then(res= > {
        }).catch(err= > {
          this.$message.warning(err)
        })
</script>

Copy the code

tip

You can write multiple trigger events

Verify the detailed usage of rules

In rules, a single field validation rule can contain multiple arrays, and each array is a validation rule:

rules: {
          title: [{required: true.message: 'Please enter an activity name'.trigger: 'blur' },
            { min: 3.max: 5.message: '3 to 5 characters long'.trigger: 'blur'}].box: [{required: true.message: 'Please select'.trigger: 'change'}].box1: [{type: 'date'.required: true.message: 'Please select'.trigger: 'change'}].box2: [{type: 'date'.required: true.message: 'Please select'.trigger: 'change'}}]Copy the code

The type of validator

The array object contained in a single inspection rules required/message/parameters such as the trigger/min/Max

It indicates the type of validator to be used, similar to data format validation, and using this, we can verify certain fields without having to write the regex and make the judgment as before.

For example, you only need to configure the rule type:’ URL ‘to validate the URL. The validator already encapsulates these functions and you just need to call them

  • string: String (default)
  • number: Numeric type
  • boolean: Boolean type
  • method: Function type
  • regexp: Regular expression
  • integerType:
  • float: A double-precision floating-point number
  • array: Array type
  • object: Object type
  • enum: enumerated values
  • date: Date format
  • url: Url format
  • hex: Indicates a hexadecimal number
  • email: Email format
  • any: Any type
email = [{
    type: "string".required: true.message: 'Please enter email address'.trigger: 'blur'
  },
  {
    type: 'email'.message: 'Please enter the correct email address'.trigger: ['blur'.'change']}]Copy the code
  • Required: Verification is required
  • Pattern: indicates regular expressions{ type : “string” , required: true , pattern : /^[a-z]+$/ }
  • Min/Max: : Indicates the maximum and minimum values
  • Len: indicates length verification
  • Enum: enum authentication
  • Whitespace: Verifies that there are only Spaces (if this is not configured, the full space input value is valid)

The introduction in the official documentation is too rough, see Async-Validator for more detailed validation rules