Understand form validation in Element-UI

(Give yourself a thumbs up first b(~ ▽ ~)d)

The basic use

Parse the example of official custom verification

Basic use to see the official document is good, here I put the official document to parse next.

The official document says the example (slightly longer, I’ll simplify it, as follows)

This is the view

<el-form :model="ruleForm" :rules="rules">
    <el-form-item label="Password" prop="pass">
        <el-input v-model="ruleForm.pass"></el-input>
    </el-form-item>
</el-form>
Copy the code

El-form requires two parameters, model and rules. Model is the form data object, and rules is the form validation rule. El-form-item needs to pass an argument (this is the most basic argument, among other things), and prop is used to correspond to the values in rules

Rules:

  • All values used in the form need to be in the Model in order to comply with the specification.
  • Rules is the counterpart of prop
  • Prop corresponds to rules, and values in rules correspond to rulesmodel[prop]
  • If there are errors in the CB, it will be extracted and displayed. If it is empty, it will be considered as passing the verification

So the official JS code looks like this

Js (simplified)

ruleForm: {
  pass: ' ',
},
rules: {
  pass: [
    { 
        validator: (rule, value, callback) => {
            if(! value) {return callback(new Error('Please enter your password'));
            }
            callback();
        },
        trigger: 'blur'}}],Copy the code

So value is the third rule and cb is the fourth rule

So we’re done with the official document. That leaves one more API at the bottom. So this is enough for the check.

High order use

Scenario 1

But if it’s nested, it’s going to look like this

<el-form :model="form" :rules="rules">
    <el-form-item v-for="(item, index) in form.list" :key="item.id" label="Chapters" prop="chapter">
        <el-input v-model="item.name"></el-input>
    </el-form-item>
</el-form>
Copy the code

What if we want to verify the data inside.

There are two ways to do it

  • Nested form
  • Prop uses point expressions

The first one has too much limitation and is more troublesome. It is also more troublesome when cutting data to reset, so pass. In the second case, it’s

:prop[`list[${index}].name`]
Copy the code

This will check, but directly set we found that does not work. Here we use a new thing, rules, which can also use rules.

The modified code looks like this

// View section <el-form :model="form" :rules="rules">
    <el-form-item v-for="(item, index) in form.list" :key="item.id" label="Chapters" :rules="rules['catpter_name'][0]" :prop[`list[${index}].name`]>
        <el-input v-model="item.name"> < / el - input > < / el - form - item > < / el - form > / form/js parts: {list: [{name:' '}
    ]
},
rules: {
  catpter_name: [
    {
        validator: (rule, value, callback) => {
            if(! value) {return callback(new Error('Please enter section name'));
            }
            callback();
        },
        trigger: 'blur'}}],Copy the code

In theory, this is possible (this code is written directly on the nuggets, not necessarily running, but the meaning is achieved).

BUT, in this case, the product says, I want to check not only the name, BUT also the outermost name is checked. Now, scenario two.

Scenario 2

This is hard to describe, I send a picture, I don’t know if I can describe it clearly

If you don’t get what I mean, then send another code

now

At this time we need to be tricky, since prop inside binding rules can’t do that, then use el – form – the rules inside the item attributes, write a function in attributes, and the parameters of the past. such

:rules="list_item_rule(item)"  prop="list_item_prop_key"
Copy the code

Remember that prop can’t fall or it won’t work, even though it doesn’t make sense now. It is recommended that we write _ in prop, and then add an _ attribute to form.

Rules:

(item) => ({
    required: true, validator: (rule, _, cb) => {// item is valid}})Copy the code

— 完 —