vue+element form表单中el-form动态验证

form表单有验证规则，很多数据可能是数组动态生成的，如果为动态生成，就不能使用静态了。

首先需要注意的就是prop和rules这两个参数

代码附上：

<el-form
    ref="formData"
    :model="formData"
    label-width="90px"
    
>
    <el-row>
    <el-col :span="12" v-for="(item,index) in formData.tokensList" :key="index">
        <el-form-item :label="item.symbol + '：'" :prop="'tokensList['+index+'].balance'" :rules="rules.Num">
        <el-input
        v-model="item.balance"
        type="text"
        placeholder="请输入余额"
        clearable
        size="medium"
        ></el-input> 
        </el-form-item>
    </el-col>
    </el-row>
    
</el-form>

在代码中可以体现prop必须精准对应你需要验证的字段，这里balance是我需精准验证的字段，还需要注意的就是prop绑定的时候一定要从你自己for循环下的对象，不然会出现报错的情况。

rules可以自己在data中任意定义，也可以直接写在标签中，这里因为我需要判断好几层，就直接定义了

export default {
data() {
    const validateNum = (rule, value, callback) => {
        let reg = /^\d+(?=\.{0,1}\d+$|$)/
        if (!value) {
            callback(new Error('请输入余额'));
        } else if(!reg.test(value)){
            callback(new Error('请输入数字'));
        }else{
            callback();
        }
    };
    return {
    show: false,
    formData: {
        tokensList: [],
    },
    rules: {
        Num: [
            { required: true, validator: validateNum, trigger: 'blur' },
        ],
    },
    };
},

最后效果：