Vue检查用户名是否使用

最新推荐文章于 2022-07-19 16:48:44 发布

满心欢喜...

最新推荐文章于 2022-07-19 16:48:44 发布

阅读量508

点赞数 1

分类专栏： Vue 文章标签： python

本文链接：https://blog.csdn.net/weixin_51103262/article/details/108956427

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了在Vue应用中如何检查用户名和手机号的唯一性。通过修改axios_api/http.js文件中的API地址，前端函数实现了正则验证及向后端发送请求，检查用户名和手机号是否已被使用。当输入为空或格式错误时，会显示相应错误信息；否则，会向后端查询并根据返回的用户数量确定用户名或手机号是否存在。

摘要由CSDN通过智能技术生成

1.vue检查用户名是否重复

前端函数如下,js方法代码无需更改，前端代码逻辑在components\common\lab_header.vue

只需要修改components\axios_api\http.js中调用的后端地址

// axios.defaults.baseURL = "http://127.0.0.1:8000/"
axios.defaults.baseURL = "http://192.168.56.100:8888/"

    // 检查用户名 是否使用
    check_username() {
      console.log('判断用户名')
      console.log(this.username == '')
      var reg = new RegExp(/^[a-zA-Z0-9_-]{3,16}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
      if (this.username == '') {
        this.username_message = '用户名不能为空'
        this.username_error = true
        return false
      }
      if (!reg.test(this.username)) {
        this.username_message = '用户名格式不正确'
        this.username_error = true
        return false
      } else {
        // 去后端检查用户名使用数量
        user_count({ type: 'username', data: this.username }).then((res) => {
          console.log(res)
          if (res.data.count > 0) {
            this.username_message = '用户名已存在'
            this.username_error = true
          } else {
            this.username_message = ''
            this.username_error = false
          }
        })
      }
    },

2.vue检查手机号是否重复

    // 检查手机号是否使用
    check_phone() {
      console.log('检查手机号')
      var reg = new RegExp(/^[1]([3-9])[0-9]{9}$/)
      if (this.phone == '') {
        this.phone_message = '手机号不能为空'
        this.phone_error = true
      }

      if (!reg.test(this.phone)) {
        this.phone_message = '手机号格式不正确'
        this.phone_error = true
        return false
      } else {
        // 去后端查用户数量
        user_count({ type: 'phone', data: this.phone }).then((res) => {
          console.log(res)
          if (res.data.count > 0) {
            this.phone_message = '手机号已存在'
            this.phone_error = true
          } else {
            this.phone_message = ''
            this.phone_error = false
          }
        })
      }
    },