How to remove the red "*" in front of the form component of ele.me elemens and keep the non-empty check of the input box

ele.me component address

clipboard.png

The red "*" in front of the

text is controlled by required = true . When it is changed to false, the non-empty check is invalid. How to do both?

Aug.27,2021

Slack Off changes the class element before label to
`.el-form-item.is-required .el-form-item__label:before {
content: ";
} `


.el-form-item.is-required:not (.is-no-asterisk) > .el-form-item__label:before {

content: '';
width: 0px;
margin-right: 0px;

}
overwrite his css


in this case, you can only modify the source code,

Delete the following sentences from the css file (index.css) of

element-ui.


the easiest thing to do is to keep the require:true, and then modify the style. The other is to change it to require:false, and then write the verification yourself:

validator: function(rule, value, cb){
    if(value === ' '){
        cb(new Error(''));
    } else {
        cb();
    }
}

isn't there a custom rule


1. Change the requir amount to false
phone: [

        {required: false, validator: checkPhone, trigger: 'blur' }
      ],
2.(data,return)

export default {
name: "Order",
data () {

// 
    var checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
        if (!value) {
          return callback(new Error(''))
        }
        setTimeout(() => {
          
          if (!Number.isInteger(+value)) {
            callback(new Error(''))
          } else {
            if (phoneReg.test(value)) {
              callback()
            } else {
              callback(new Error(''))
            }
          }
        }, 100)
      };
Menu