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输入校验不能为空内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • mini-vue渲染的简易实现

    mini-vue渲染的简易实现

    本文主要介绍了mini-vue渲染的简易实现,主要简单来实现一个虚拟dom渲染真实dom,以及更新的方法。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue2结合echarts实现一个地图的效果

    vue2结合echarts实现一个地图的效果

    这篇文章主要介绍了vue2结合echarts实现一个地图的效果,本文通过实例代码给大家介绍的非常详细,对大家何用vue和echarts实现一个地图有一定的帮助,感兴趣的朋友一起看看吧
    2024-03-03
  • 快速解决vue-cli不能初始化webpack模板的问题

    快速解决vue-cli不能初始化webpack模板的问题

    下面小编就为大家分享一篇快速解决vue-cli不能初始化webpack模板的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue组件与Vue cli脚手架安装方法超详细讲解

    Vue组件与Vue cli脚手架安装方法超详细讲解

    CLI是一个全局安装的npm包,提供了终端里的vue命令。它可以通过vue create快速搭建一个新项目,或者直接通过vue serve构建新想法的原型。你也可以通过vue ui通过一套图形化界面管理你的所有项目
    2022-11-11
  • vue中关闭eslint的方法分析

    vue中关闭eslint的方法分析

    这篇文章给大家讲述了vue中关闭eslint的方法内容,有需要的读者们可以参考学习下。
    2018-08-08
  • npm ERR! code E404在vscode安装插件时报错的两种解决方案

    npm ERR! code E404在vscode安装插件时报错的两种解决方案

    这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue3锚点定位两种实现方式示例

    vue3锚点定位两种实现方式示例

    这篇文章主要给大家介绍了关于vue3锚点定位两种实现的相关资料,说到锚点定位,很多人第一时间会想到 a标签,但是a标签实现的锚点定位并不是那么的完美,需要的朋友可以参考下
    2023-07-07
  • vue弹出的添加信息组件中el-radio单选框无法点击的解决方案

    vue弹出的添加信息组件中el-radio单选框无法点击的解决方案

    在弹出的添加信息组件中,单选框无法切换是因为没有默认值,通过判断初始化时的值并赋初始值,虽然实现了初始值的展示,但导致单选框无法切换,为了解决这个问题,更改了上级组件传值的方式,直接带参传值,避免了对象处理
    2026-03-03
  • 教你用vue实现一个有趣的围绕圆弧动画效果

    教你用vue实现一个有趣的围绕圆弧动画效果

    最近做的两个项目都是关于vue的,做完整理一下,这篇文章主要给大家介绍了关于如何用vue实现一个有趣的围绕圆弧动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • Vue实现远程获取路由与页面刷新导致404错误的解决

    Vue实现远程获取路由与页面刷新导致404错误的解决

    这篇文章主要介绍了Vue实现远程获取路由与页面刷新导致404错误的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论