elementUI——el-form表单校验,trigger为blur,但只会在第一次修改后校验,再次修改校验无效
参考: https://blog.csdn.net/Nancy_2017/article/details/89881573
我的问题:第一次修改手机号后,点击其他地方,会校验。再次修改手机号,点击其他地方,校验信息仍是上次的错误信息。
代码:
...
<el-form
:model="form"
ref="form"
:rules="rules"
label-width="140px"
>
<el-form-item label="手机号:" prop="phone">
<el-input
placeholder="请输入"
v-model="form.phone"
clearable
>
</el-input>
</el-form-item>
</el-form>
...
data() {
const validateNumber = (rule, value, callback) => {
let reg = /^1[34578][0-9]{9}$/;
if (value === '') {
return callback(new Error('请输入手机号'));
} else if (!reg.test(value)) {
return callback(new Error('请输入正确的手机号'));
} else {
callback();
}
};
return {
form: {
phone: '',
},
rules: {
phone: [
{
required: true,
validator: validateNumber,
trigger: 'blur',
},
],
},
};
},
...
原因:clearable和trigger: blur不能同时使用
解决方法:
方法1. 去掉clearable
方法2. trigger改为change
标签:
elementUI
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通