el-form label加星号*

L221545

已于 2023-02-15 09:55:34 修改

阅读量1.6k

点赞数

分类专栏： css 文章标签： elementui vue css

于 2023-02-15 09:53:01 首次发布

本文链接：https://blog.youkuaiyun.com/L221545/article/details/129037446

版权

css 专栏收录该内容

6 篇文章

订阅专栏

文章介绍了如何使用CSS伪元素在ElementUI的表单标签前后添加星号，并调整其样式。同时，展示了ElementUIForm组件的内置验证功能，要求输入框必须填写，否则表单无法提交。还提到了仅显示星号但不执行验证的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、伪元素添加

el-form label后加星号

    .device-form    .el-form-item__label::after{
        content: "*";
        color: #1A1A1A;
        margin-left: 5px;
        font-size: 16px;//改变星号的大小
}

效果
在这里插入图片描述
el-form label前加星号

    .device-form    .el-form-item__label::before{
        content: "*";
        color: #1A1A1A;
        margin-left: 5px;
        font-size: 16px;//改变星号的大小
}

2、elementui Form 组件自带的表单验证功能

这是有验证输入框的，必须填，否则表单验证不通过，没法下一步操作

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },//必填
            
          ]
        }
      };
    },
    methods: {
    }
  }
</script>

在这里插入图片描述

3、只是加星号不验证

 <el-form-item label="活动名称" :required="true" >
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

el-form label加星号*

1、伪元素添加

2、elementui Form 组件自带的表单验证功能

3、只是加星号 不验证

3、只是加星号不验证