element ui 表单验证通过后没有绿色框 求解 (已解)

使用element自带的表单验证。

输入框选中状态边框为蓝色,

输入框输入错误的时候边框为红色,

输入正确的时候边框为绿色。

但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现)

我的相关代码如下:

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="账号信息" prop="phone">
                    <el-input v-model.trim="form.phone" placeholder="请输入账号的手机号" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="请求IP" prop="ips">
                    <el-input v-model.trim="form.ips" placeholder="请输入请求系统的网关IP,多个IP用英文逗号分隔" maxlength="200"></el-input>
                </el-form-item>
            </el-form>



.......


data() {
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else {
        callback()
      }
    }
    const validateIps = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入IP'))
      } else {
        if (isIpList(value)) {
          callback()
        } else {
          callback(new Error('ip格式错误,多个ip请用英文逗号分隔!'))
        }
      }
    }
    return{
      rules: {
        phone: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ],
        ips: [
          { validator: validateIps, trigger: 'blur' }
        ]
      }
    }
  },

.......

界面:

如图,第一个输入框已经输入正确了,但是输入框颜色没有改变。

求解,这个绿色框跟什么因素有关?

 

解决:

我用的版本是element-ui 版本 2.12.0

查询官方版本升级日志发现,在2.10版本的时候,官方放弃了这个功能。所以,它就是没有!

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值