zoukankan      html  css  js  c++  java
  • VUE检查用户名复杂性、手机号是否合法、密码的复杂度

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

    • 前端函数如下,js方法代码无需更改,前端代码逻辑在componentscommonlab_header.vue

    • 只需要修改componentsaxios_apihttp.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
              }
            })
          }
        },

     3.VUE检查密码的复杂度

    // 检查密码是否正确
        check_password() {
          console.log('检查两遍密码')
          // debugger
          if (this.password == '') {
            this.password_message = '密码不能为空'
            this.password_error = true
            return false
          }
          if (this.password != this.password2) {
            this.password_message = '两遍密码不一致'
            this.password_error = true
            return false
          }
          if (this.password.length < 6) {
            this.password_message = '密码长度不能小于6位'
            this.password_error = true
            return false
          }
          this.password_message = ''
          this.password_error = false
        },

     

  • 相关阅读:
    动态修改 dom 元素的伪类样式
    visual studio 2013 触发挂起事件
    windows phone 切换多语言时,商店标题显示错误的问题
    01、Windows Store APP 设置页面横竖屏的方法
    HTTPS和HTTP的概念和区别
    前端要知道的浏览器原理
    HTTP协议详解
    angular4路由设置笔记
    js正则及常用方法函数总结
    史上最全常用正则表达式大全
  • 原文地址:https://www.cnblogs.com/pythonqwertytre/p/13782302.html
Copyright © 2011-2022 走看看