element-plus动态表单验证

一，el-form动态验证表单，是直接将rules绑定到需要动态验证的 

<el-form ref="formDataRef" :model="formData" :rules="rules" label-width="140px" class="demo-ruleForm" status-icon>
    <el-form-item label="波速(m/s)" prop="velocity1" :rules="ruleForm.velocity1">
        <el-input v-model="formData.velocity1"></el-input>
    </el-form-item>
</el-form>

 

然后动态更改ruleForm.velocity1的值。表单就会动态验证

//波速验证
const velocity1Required = [
    {
        required: true,
        message: '请输入波速',
        trigger: 'blur',
    },
    {
        pattern: /^(([1-9]\d{0,9})|0)(\.\d{0,9})?$/,
        message: '请输入数值类型',
    },
];

//不需要验证
const notRequired = { required: false };


//动态验证

 const ruleForm = reactive({
     velocity1: notRequired,
 });

ruleForm.velocity1 = velocity1Required ;

ruleForm.velocity1= notRequired ;