使用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版本的时候,官方放弃了这个功能。所以,它就是没有!