异步验证用户名是否重复，思路是在输入完用户名之后调用接口与后端进行交互，传入输入的用户名，后端提供接口查找返回是否存在，存在返回2，不存在返回0，错误返回1。

前端：

var validateUser = (rule, value, callback) => {
    axios.post('/users/checkUserName',{ //验证用户名是否存在
      userName:this.registerForm.registerUserName
    }).then((response)=>{
      let res=response.data;
      let reg= /^[0-9a-zA-Z]*$/g;//验证是否只有字母和数字的正则
      if (value === '') {
        callback(new Error('请输入用户名'));
      }else if(value.length>18 || value.length<2){
        callback(new Error('长度在2-18位'));
      } else if(!reg.test(value)){
        callback(new Error('请只包含字母数字'));
      } else if(res.status=='2'){
        callback(new Error('用户名已存在'));
      } else {
        callback();
      }
    })
  };

后端：

router.post("/checkUserName",function(req,res,next){
  User.findOne({userName:req.body.userName},(err,doc)=>{
    if(err){
      res.json({
        status:"1",
        msg:err.message
      })
    }else{
      if(doc){
      res.json({
        status:"2",
        msg:'have existed'
        })
      }else{
        res.json({
        status:"0",
        msg:'ok to continue'
        })
      }
    }
  })
})

赏

谢谢你请我吃糖果

微信