el-input输入校验不能为空格以及不能输入全部为空的内容

 更新时间:2023年10月23日 10:57:02   作者:鹤渺  
这篇文章主要给大家介绍了关于el-input输入校验不能为空格以及不能输入全部为空的内容的相关资料,el-input验证规则主要是为了确保输入的内容符合特定的要求,需要的朋友可以参考下

应用场景:

输入框的校验太常见了,基本上常见的为:不能为空,不能输入空格,和不能输入全部为空的内容。这里对这个进行记录。

详细开发:

针对三种情况进行分别展示:

 rules: {
      ResearchNO: [
        { required: true, message: '请输入项目代码', trigger: 'blur' },
        {
          required: true,
          transform: (value) => value && value.trim(),
          message: '项目代码不能全部为空',
          trigger: 'blur'
        }
      ],
      Name: [
        //输入为空
        { required: true, message: '请输入项目名称', trigger: 'blur' },
        {
          min: 1,
          max: 50,
          message: '长度在 1 到 50 个字符',
          trigger: 'blur'
        },
        //不能全部输入空格
        {
          required: true,
          transform: (value) => value && value.trim(),
          message: '项目名称不能全部为空',
          trigger: 'blur'
        }
      ]
    },

不能输入全部空格,主要是这里起作用:

 {
          required: true,
          transform: (value) => value && value.trim(),
          message: '项目名称不能全部为空',
          trigger: 'blur'
        }

还有不能输入空格:v-model后面加上trim

 <el-form-item label="项目名称" prop="Name">
          <el-input v-model.trim="projectInfo.Name" placeholder="请输入项目名称"></el-input>
        </el-form-item>

附:el-input 首尾不能为空格的校验

我们在使用 input 输入框时,大多不希望用户在前后输入空格,有没有简单的校验方法呢,当然是有的。

<el-form :rules="rules" :model="form" label-width="80px">
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
</el-form>

<script>
export default {
    data() {
        return {
            form: {
                name: ''
            },
            rules: {
                name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur'},
                        { pattern: /^(?!\s+).*(?<!\s)$/,  message: '首尾不能为空格', trigger: 'blur' }
                ]
            }
        }
    }
}
</script>

效果如下:

总结/分析:

以上是记录。

到此这篇关于el-input输入校验不能为空格以及不能输入全部为空的内容的文章就介绍到这了,更多相关el-input输入校验不能为空内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • elementui之el-table-column日期格式显示方式

    elementui之el-table-column日期格式显示方式

    文章介绍了如何使用formatter属性对表格某一列的内容进行日期格式化,通过绑定日期格式化的方法实现,展示了前端代码的模板和方法,并给出了前端效果的展示
    2024-12-12
  • vue里使用create,mounted调用方法的正确姿势说明

    vue里使用create,mounted调用方法的正确姿势说明

    这篇文章主要介绍了vue里使用create,mounted调用方法的正确姿势,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue与compressor.js实现高效文件压缩的方法

    Vue与compressor.js实现高效文件压缩的方法

    本文将介绍基于 Vue 框架和 compressor.js 的上传时文件压缩实现方法,通过在上传过程中对文件进行压缩,减小文件大小,提升上传速度,为用户创造更快捷、高效的上传体验,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • 一个例子轻松学会Vue.js

    一个例子轻松学会Vue.js

    这篇文章主要为大家详细介绍了一个例子,帮助大轻松学会Vue.js,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • npm无法加载文件:因为在此系统上禁止运行脚本的解决办法

    npm无法加载文件:因为在此系统上禁止运行脚本的解决办法

    这篇文章主要介绍了npm无法加载文件:因为在此系统上禁止运行脚本问题的解决办法,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • vue.js数据加载完成前显示原代码{{代码}}问题及解决

    vue.js数据加载完成前显示原代码{{代码}}问题及解决

    这篇文章主要介绍了vue.js数据加载完成前显示原代码{{代码}}问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue this.$toast 失效问题解决方案

    vue this.$toast 失效问题解决方案

    这篇文章主要介绍了vue this.$toast 失效问题汇总,本文给大家分享完美解决方案,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • vue在body和query中如何向后端传参

    vue在body和query中如何向后端传参

    这篇文章主要介绍了vue在body和query中如何向后端传参,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中的computed 和 vm.$data 原理解析

    vue中的computed 和 vm.$data 原理解析

    这篇文章主要介绍了vue中的computed 和 vm.$data 原理,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue3实现淘宝放大镜效果的示例代码

    vue3实现淘宝放大镜效果的示例代码

    放大镜效果在很多购物网站都可以看到,本文主要介绍了vue3实现淘宝放大镜效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06

最新评论