如何更改表单必填红星的位置

更改表单必填红星的位置

在做表单验证的时候 加入必填校验 required 会在左方默认出现一个红色星号 文字向右推移

为了保持页面的统一性 选择把红色星号放到右边实现

检查页面元素

根据相关单词 el-form-item__label ，before ，content

猜也能猜出来 是在 el-form-item__label 之前 插入 红色的 content ，content内容是 *

那修改就很简单了

::v-deep{
  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
    display: none;
  }
  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::after{
    content: '*';
    color: #F56C6C;
    margin-left: 4px;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

样式深度穿透一下

控制台复制before的代码把它隐藏了

再写一份after的 复用之前before的就可以

结果如下

成功转移到右边

怎样去掉已有的css属性

 *color: #F56C6C;
1

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
::before和::after必须配合content属性来使用
content用来定义插入的内容，content必须有值，至少是空。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入
默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示
不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容

css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
1
2
3

验证失效 async-validator 控制台报错

直接提交 错误提示是自己定义的中文 没问题

 rules: {
	cnName: [
		{ required: true, message: '请输入中文名称',trigger: 'change'}
]}
1
2
3
4

但是点击一下 会报英文的错

尝试修改方法 trigger 加入 blur trigger: ‘change,blur’ 失效

解决办法 把trigger干掉

cnName: [{ required: true, message: '请输入中文名称'}]
1

顺便

表单必填项太多 直接提交 控制台一堆警告

看着就很烦

路径 node_modules > async-validator > es > util.js

// console.warn(type, errors);
1

注释即可

对实际功能 不造成影响