正则练习

需求:

• 用户名以数字或字母开头, 6~11位;
• 密码 6~12 位数字字母下划线;
• 手机号 11 位数字
  

html部分

<form>
        <label>
            用户名: <input autocomplete="off" type="text" class="name">
            <span>请按照规则填写用户名</span>
        </label>
        <label>
            密码: <input autocomplete="off" type="password" class="password">
            <span>请按照规则填写密码</span>
        </label>
        <label>
            手机号: <input autocomplete="off" type="text" class="phone">
            <span>请按照规则填写手机号</span>
        </label>
        <button>注册</button>
    </form>

css部分

 * {
          margin: 0;
          padding: 0;
   }

        form {
            width: 500px;
            padding: 30px;
            border: 5px solid pink;
            border-radius: 15px;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }

        form>label {
            height: 50px;
            position: relative;
        }

        form>label>span {
            color: red;
            position: absolute;
            left: 20px;
            bottom: 5px;

            display: none;
        }

css效果图

个人写法:
写出需求所需的正则表达式

        var reg = /^[0-9a-zA-Z].{5,10}$/
        var reg1 = /\w{6,12}/
        var reg1 = /^\d{11}$/

根据需求写出第一个用户名的代码

     var myName = document.querySelector('.name')
        var spans = [...document.querySelectorAll("form span")]
        myName.oninput = function () {
            if (myName.value.length >= 6) {
                if (!reg.test(myName.value)) {
                    myName.value = myName.value.slice(0, myName.value.length - 1)
                } else {
                    spans[0].style.display = "none"
                }
            } else {
                if (!reg.test(myName.value)) {
                    spans[0].style.display = "block"
                }
            }
        }

写出都一个后,后面就是套娃

var myPassword = document.querySelector('.password')
        myPassword.oninput = function () {
            if (myPassword.value.length >= 6) {
                if (!reg.test(myPassword.value)) {
                    myPassword.value = myPassword.value.slice(0, myPassword.value.length - 1)
                } else {
                    spans[1].style.display = "none"
                }
            } else {
                if (!reg.test(myPassword.value)) {
                    spans[1].style.display = "block"
                }
            }
        }

        var myPhone = document.querySelector('.phone')

        myPhone.oninput = function () {
            if (myPhone.value.length == 11) {
                if (reg.test(myPhone.value)) {
                    myPhone.value = myPhone.value.slice(0, myPhone.value.length - 1)
                    spans[2].style.display = "none"
                }
            }
            else if (myPhone.value.length < 11) {
                if (!reg.test(myPhone.value)) {
                    spans[2].style.display = "block"
                }
            }
        }
        

` 试着给用户名,密码两个封装函数

      function userChange(NamePwd, i) {
          if (NamePwd.value.length >= 6) {
              if (!reg.test(NamePwd.value)) {
                  NamePwd.value = NamePwd.value.slice(0, NamePwd.value.length - 1)
              } else {
                  spans[i].style.display = "none"
              }
          } else {
              if (!reg.test(NamePwd.value)) {
                  spans[i].style.display = "block"

              }
          }
      }

    myName.oninput = function () {
        userChange(myName, 0)
    }
    myPassword.oninput = function () {
        userChange(myPassword, 1)
    }

封装完毕初次尝试