注册页的JS验证

AAAmaxend
199 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

✨注册页面的验证

10.gif

🍉原html+css代码

<!-- registerarea -->
<div class="registerarea">
    <h3>
        注册新用户
        <em>
                我有账号，去<a href="login.html">登陆</a>
        </em>
    </h3>
    <div class="reg_form">
        <ul>
            <li>
                <label for="tel">手机号：</label>
                <input type="text" class="inp" id="tel">
                <span>
                    <i></i>
                </span>
            </li>
            <li>
                <button>免费获取短信动态码</button>
                <span class="display-none">
                </span>
            </li>
            <li>
                <label for="">短信验证码:</label>
                <input type="text" class="inp" id="code">
                <span>
                    <i></i>
                </span>
            </li>
            <li>
                <label for="">设置密码:</label>
                <input type="text" class="inp" id="password">
            </li>
            <li>
                <div id="tips">
                    <b></b>
                    <b></b>
                    <b></b>
                    <b></b>
                </div>
            </li>

            <li>
                <label for="">确认密码:</label>
                <input type="text" class="inp" id="passrepeat">
                <span>
                    <i></i>
                </span>
            </li>
            <li class="agree">
                <input type="checkbox">同意协议并注册
                <a href="#">《知果果用户协议》</a>
            </li>
            <li>
                <input type="submit" value="完成注册" class="over" id="frmContact">
            </li>
        </ul>
    </div>
</div>

.registerarea {
    height: 520px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.registerarea h3 {
    height: 40px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    padding: 0 10px;
    font-weight: 400;
    line-height: 40px;
    font-size: 18px;
}

.registerarea h3 em {
    float: right;
    font-size: 14px;
}

.registerarea a {
    color: #c81623;
}

.reg_form {
    width: 600px;
    height: 400px;
    margin: 40px auto 0;
}

.reg_form li {
    margin-bottom: 15px;
}

.reg_form li button {
    width: 150px;
    height: 20px;
    border: 1px solid #aaa;
    margin-left: 113px;
}

.reg_form label {
    display: inline-block;
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: right;
}

.inp {
    width: 238px;
    height: 34px;
    border: 1px solid #ccc;
    margin-left: 10px;
}

.display-none {
    display: none;
}

.display-block {
    display: block;
}

.display-inline {
    display: inline-block;
}

.error {
    color: #df3033;
    margin-left: 10px;
}

.error_icon,
.success_icon {
    display: inline-block;
    width: 200px;
    height: 20px;
    background: url(../img/error.png) no-repeat;
    vertical-align: middle;
    margin-top: -2px;
}

.success {
    color: #40b83f;
    margin-left: 10px;
}

.success_icon {
    background-image: url(../img/success.png);
}

.safe {
    padding-left: 187px;
    color: #b2b2b2;
}

.safe em {
    padding: 0 12px;
    color: #fff;
}

#tips {
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    width: 240px;
    border-right: 2px solid #fff;
    color: #fff;
    text-align: center;
    background: #EEEEEE;
    margin-left: 113px;
}

#tips b {
    float: left;
    width: 55px;
    height: 20px;
    color: white;
    background: #EEEEEE;
    margin-right: 2px;
    line-height: 20px;
    text-align: center;
}

.agree {
    padding-top: 20px;
    padding-left: 100px;
}

.agree input {
    vertical-align: middle;
    margin-right: 5px;
}

.agree a {
    color: #1ba1e6;
}

.over {
    width: 200px;
    height: 34px;
    background-color: #c81623;
    margin: 30px 0 0 130px;
    border: none;
    color: #fff;
    font-size: 14px;
}

🌿手机号码验证

手机号码验证

  //手机号码验证
  // 获取结点
  var tel = document.getElementById("tel")
  var span = document.getElementsByTagName("span")
  console.log(tel);
  console.log(span);
​
  //获取焦点函数
  tel.onfocus = function () {
    tel.style.border = "1px solid red";
  }
  tel.onblur = function () {
    tel.style.border = "1px solid #aaa"
    //判断手机号码不能为空
    var telValue = tel.value;
    if (telValue == '') {
      span[0].className = "error error_icon"
      span[0].innerHTML = "手机号码不能为空"
      span[0].style.paddingLeft = "23px"
    }
​
    // 判断手机号码是否正确
    if (telValue != "") {
      if (!(/^1[3456789]\d{9}$/.test(telValue))) {
        span[0].className = "error error_icon"
        span[0].innerHTML = "请填写正确的手机号码！"
        span[0].style.paddingLeft = "23px"
        frmContact.setAttribute("disabled", true);
      } else {
        span[0].className = "success success_icon"
        span[0].innerHTML = "手机号码可以使用！"
        span[0].style.paddingLeft = "23px"
        frmContact.removeAttribute('disabled');
      }
    }
  }

总结

image-20210608120131777.png

🌈手机验证码验证

手机验证码验证

  // 手机验证码验证
  var button = document.getElementsByTagName("button")
  button[0].onclick = function () {
    // 生成四位随机数
    function randomf() {
      var randomfour = Math.floor(Math.random() * (9999 - 1000 + 1) + 1000)
      return randomfour
    }
    var randomf = randomf()
    span[1].className = "display-inline ";
    span[1].innerHTML = randomf;
  }
​
  // 获取短信验证，id为 code结点
  var code = document.getElementById("code")
  code.onfocus = function () {
    tel.style.border = "1px solid red";
  }
  code.onblur = function () {
    tel.style.border = "1px solid #aaa";
    var codeValue = code.value
    // 获取生成的验证码的值
    var spanValue = span[1].innerHTML
    // 判断验证码不能为空
    if (codeValue == "") {
      span[2].className = "error error_icon"
      span[2].innerHTML = "验证码不能为空"
      span[2].style.paddingLeft = "23px"
      return false
    }
​
    // 判断验证码是否正确
    if (codeValue != spanValue) {
      span[2].className = "error error_icon"
      span[2].innerHTML = "验证码不匹配！"
      span[2].style.paddingLeft = "23px"
      frmContact.setAttribute("disabled", true);
    } else {
      span[2].className = "success success_icon"
      span[2].innerHTML = "验证码匹配成功！"
      span[2].style.paddingLeft = "23px"
      frmContact.removeAttribute('disabled');
    }
  }

总结

image-20210608120252542.png

🍑密码强度验证

密码强度验证

  // 密码强度判定
  var aStr = ["弱", "中", "强", "安全"]
  // 用户输入内容检测函数
  function checkStrong(val) {
    var modes = 0;
    if (val.length < 6) return 0;
    if (/\d/.test(val)) modes++; //判断数字
    if (/[a-z]/.test(val)) modes++; //判断小写字母
    if (/A-Z/.test(val)) modes++; //判断大写字母
    if (/\W/.test(val)) modes++; //判断特殊字符
    if (val.length > 20) return 4
    return modes
  }
​
  // 获取密码框节点
  var password = document.getElementById("password")
  // 焦点的获取
  password.onfocus = function () {
    password.style.border = "1px solid red"
  }
  password.onblur = function () {
    password.style.border = "1px solid #aaa"
  }
  // 键盘的监听
  password.onkeyup = function () {
    // 获取用户输入的内容
    var passVal = password.value
    // 执行函数判断用户输入的内容
    var num = checkStrong(passVal)
​
    // 获取span
    var tipsB = document.getElementById("tips").getElementsByTagName("b")
    // 根据返回值给b标签添加颜色
    switch (num) {
      case 0:
        tipsB[0].style.backgroundColor = "red";
        break;
      case 1:
        tipsB[0].style.backgroundColor = "red";
        tipsB[0].innerHTML = aStr[num - 1];
        break;
      case 2:
        tipsB[0].style.backgroundColor = "yellow";
        tipsB[1].style.backgroundColor = "yellow";
        tipsB[0].innerHTML = aStr[num - 1];
        tipsB[1].innerHTML = aStr[num - 1];
        break;
      case 3:
        for (var i = 0; i < 3; i++) {
          tipsB[i].style.backgroundColor = "green";
          tipsB[i].innerHTML = aStr[num - 1];
        }
        break;
      case 4:
        for (var i = 0; i < 4; i++) {
          tipsB[i].style.backgroundColor = "green";
          tipsB[i].innerHTML = aStr[num - 1];
        }
        break;
    }
  }

总结

image-20210608120551837.png

🏂密码匹配判定

密码匹配判定

  //密码匹配判定
  var passRepeat = document.getElementById("passrepeat");
  passRepeat.onfocus = function () {
    passrepeat.style.border = "1px solid red";
​
  }
  passRepeat.onblur = function () {
    passrepeat.style.border = "1px solid #aaa";
    var passRepeatValue = passRepeat.value;
    var passWordValue = password.value;
    if (passRepeatValue != passWordValue) {
      span[3].className = "error error_icon"
      span[3].innerHTML = "验证码不匹配！"
      span[3].style.paddingLeft = "23px"
      frmContact.setAttribute("disabled", true);
      frmContact.style.backgroundColor = "red";
    } else {
      span[3].className = "success success_icon";
      span[3].innerHTML = "两次填写的密码匹配！";
      span[3].style.paddingLeft = "23px"
      frmContact.removeAttribute("disabled");
      // frmContact.style.color = "#000";
      frmContact.style.cursor = "point"
    }
  }
  //监听按钮被点击
  frmContact.onclick = function () {
    //将数据通过ajax发送到php后台 
    if (tel.value == "" || code.value == "" || password.value == "" || passrepeat.value == "") {
      alert("请填写信息后再注册");
    } else {
      //跳转到登录页面
      window.location.href = "./index.html?tel="+tel.value+"&pass="+password.value;
    }
  }

总结

image-20210608120807221.png

avatar
文章
阅读
粉丝