vue+element-plus检验用户名是否重复

最新推荐文章于 2024-11-08 16:30:41 发布

原创最新推荐文章于 2024-11-08 16:30:41 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个JavaScript函数validateName2，用于检查用户名的输入是否有效并处理异步调用checkUsername的冲突。它通过设置定时器确保在较长的响应时间后进行验证，避免了并发时的逻辑问题。

这是rules里的检验函数


var validateName2 = (rule, value, callback) => {
    console.log("validateName2")
    //加延时器是因为checkUsername()所需的处理时间要长与validateName2（），
    // 因此如果用户名合法，checkUsername()还没算出来值，validateName2就用了之前的值，造成错误
    setTimeout(() => {
        console.log("validateName2goon")
        if (value === '') {
            callback(new Error('请输入用户名'));
        } else if (this.checkName === 0) {
            console.log("validateName2:" + this.checkName)
            callback(new Error('用户名已被使用'));
        } else {
            callback();
        }
    }, 400);
};

这是@input的

checkUsername() {
    request.post("/api/user/register/checkUsername", this.form).then(res => {
        if (res.code === '0') {
            this.checkName = 1
        } else {
            this.checkName = 0
        }
    }).then(res=>{
        console.log("checkUsername:"+this.checkName)
    })
},