element-ui form 表单验证--输入空格问题

最新推荐文章于 2023-10-13 10:58:08 发布

做个有准备的人

最新推荐文章于 2023-10-13 10:58:08 发布

阅读量5k

点赞数 3

分类专栏：前端埋坑之路-前端技术文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/u011565547/article/details/122216085

版权

前端埋坑之路-前端技术专栏收录该内容

361 篇文章 15 订阅 ¥9.90 ¥99.90

订阅专栏

超级会员免费看

本文介绍了在使用Element-UI时遇到的表单验证问题，特别是关于输入空格导致验证通过的情况。文章提到，当设置`required: true`时，即使输入空格也会通过验证。为正确进行必填项校验，建议使用`.trim`修饰符来去除字符首尾的空格。此外，还提到了`v-model.lazy`在失去焦点时触发验证，以及`v-model.number`用于将输入的字符串转换为number类型。

摘要由CSDN通过智能技术生成

element-ui中自带的表单必填项校验不能去除空格，此时若输入空格，required: true验证还是可以通过。若想正确校验需要去除字符两边的空格。在v-model加上.trim就可以解决。

<el-form :rules="rules">
  <el-form-item label="名称" prop="name">
    <el-input size="small" v-model.trim="form.name" placeholder="请输入名称"></el-input>
  </el-form-item>
</el-form>