限制el-form中的el-input只能输入整数或者小数

最新推荐文章于 2024-05-08 16:53:06 发布

会飞的鱼—

最新推荐文章于 2024-05-08 16:53:06 发布

阅读量444

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_47657875/article/details/134529379

版权

在el-form-item 动态添加校验规则

 <el-form-item prop="x" :rules="getCoordinateRules('X')" >
    <el-input v-model="formInline.x"> <template #prepend>X</template></el-input> 
</el-form-item
                      >

定义校验函数,利用正则匹配

function getCoordinateRules(coord) {
  return [
     { required: true, message: `${coord}坐标不能为空且必须是数字`, trigger: 'blur'},
     { pattern: /^(\d+|\d*\.\d{1,10})$/, message: `${coord}为整数或最多三位小数,trigger:'blur' },
    // Add more validation rules as needed
  ];
}