element-plus动态表单验证

  • Post author:
  • Post category:其他


一,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 ;



版权声明:本文为blue_121原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。