JavaWeb项目之尚硅谷书城：（四）注册校验

最新推荐文章于 2022-11-22 10:20:13 发布

程序员aDing

最新推荐文章于 2022-11-22 10:20:13 发布

阅读量136

点赞数 1

分类专栏： Java后端开发技术栈文章标签： javascript safari firefox

本文链接：https://blog.csdn.net/sd_960614/article/details/125839589

版权

Java后端开发技术栈专栏收录该内容

61 篇文章 3 订阅

订阅专栏

文章目录

- 4.1 问题描述
- 4.2 解决方案

4.1 问题描述

在用户注册的时候对用户输入的信息进行校验。校验的内容包括

用户名是否符合规范
用户名是否已经存在
密码是否符合规范
确认密码
邮箱是否符合规范
验证码校验

4.2 解决方案

校验程序主要通过Javascript进行，当输入框丢失焦点的时候进行JavaScript方法的调用，或者在点击提交的时候进行校验。

代码：

html代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" th:href="@{/static/css/style.css}" />
    <link rel="stylesheet" th:href="@{/static/css/register.css}" />
    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }
    </style>
    <script type="text/javascript" th:src="@{/static/script/register.js}"></script>
  </head>
  <body>
    <div id="login_header">
      <a href="../index.html">
        <img class="logo_img" alt="" th:src="@{/static/img/logo.gif}" />
      </a>
    </div>

    <div class="login_banner">
      <div class="register_form">
        <h1>注册尚硅谷会员</h1>
        <form th:action="@{/user.do}" method="post" onsubmit="return preRegister()">
          <input type="hidden" name="operate" value="register">
          <div class="form-item">
            <div>
              <label>用户名称:</label>
              <input id="unameText" type="text" name="uname" placeholder="请输入用户名" onblur="ckUname()"/>
            </div>
            <span id="unameSpan" class="errMess">用户名应为6~16位数组和字母组成</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户密码:</label>
              <input id="pwdText" type="password" name="pwd" placeholder="请输入密码" onblur="ckPwd()"/>
            </div>
            <span id="pwdSpan" class="errMess">密码的长度至少为8位</span>
          </div>
          <div class="form-item">
            <div>
              <label>确认密码:</label>
              <input id="pwdText2" type="password" placeholder="请输入确认密码" onblur="ckRePwd()"/>
            </div>
            <span id="pwdSpan2" class="errMess">密码两次输入不一致</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户邮箱:</label>
              <input id="emailText" type="text" name="email" placeholder="请输入邮箱" onblur="ckEmail()"/>
            </div>
            <span id="emailSpan" class="errMess">请输入正确的邮箱格式</span>
          </div>
          <div class="form-item">
            <div>
              <label>验证码:</label>
              <div class="verify">
                <input type="text" name="verifyCode" placeholder="" />
                <img src="Kaptcha" alt="" />
              </div>
            </div>
            <span class="errMess">请输入正确的验证码</span>
          </div>
          <button class="btn">注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </body>
</html>

JavaScript代码：

let xmlHttpRequest;
function $(id){
    return document.getElementById(id);
}

function preRegister(){
    let unameText = $("unameText");
    let unameReg = /[0-9a-zA-Z]{6,16}/gim;
    let unameSpan = $("unameSpan");
    if(!unameReg.test(unameText.value)){
        unameSpan.style.visibility = "visible";
    }else {
        unameSpan.style.visibility = "hidden";
    }
    let pwdText = $("pwdText");
    let pwdSpan = $("pwdSpan");
    let pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/;
    if (!pwdReg.test(pwdText.value)){
        pwdSpan.style.visibility = "visible";
    }else {
        pwdSpan.style.visibility = "hidden";
    }
    let pwdText2 = $("pwdText2");
    let pwdSpan2 = $("pwdSpan2");
    if(pwdText2.value != pwdText.value){
        pwdSpan2.style.visibility = "visible";
    }else {
        pwdSpan2.style.visibility = "hidden";
    }

    let emailText = $("emailText");
    let emailSpan = $("emailSpan");
    let emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (!emailReg.test(emailText.value)){
        emailSpan.style.visibility = "visible";
    }else {
        emailSpan.style.visibility = "hidden";
    }
    if((unameSpan.style.visibility == "hidden") && (pwdSpan.style.visibility == "hidden")
        &&(pwdSpan2.style.visibility == "hidden") && (emailSpan.style.visibility == "hidden")){
        return true;
    }
    return false;
}

function ckUname(){
    let unameText = $("unameText");
    let unameReg = /[0-9a-zA-Z]{6,16}/gim;
    let unameSpan = $("unameSpan");

    let uname = unameText.value;

    if(!unameReg.test(uname)){
        unameSpan.style.visibility = "visible";
    }else {
        unameSpan.style.visibility = "hidden";
    }

    if(unameSpan.style.visibility == "hidden"){
        // 发送Ajax请求，校验用户名是否存在
        createXmlHttpRequest();
        let url = "user.do?operate=ckUname&uname=" + uname;
        xmlHttpRequest.open("GET", url, true);
        xmlHttpRequest.onreadystatechange = ckUnameCB;
        xmlHttpRequest.send();
    }
}

function ckUnameCB(){
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        alert(xmlHttpRequest.responseText);
    }
}

function createXmlHttpRequest(){
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlHttpRequest=new XMLHttpRequest();
    } else {
        try {
            // IE6, IE5 浏览器执行代码
            xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            // 其他IE浏览器
            xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
}

function ckPwd(){
    let pwdText = $("pwdText");
    let pwdSpan = $("pwdSpan");
    let pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/;
    if (!pwdReg.test(pwdText.value)){
        pwdSpan.style.visibility = "visible";
    }else {
        pwdSpan.style.visibility = "hidden";
    }
}

function ckRePwd(){
    let pwdText = $("pwdText");
    let pwdText2 = $("pwdText2");
    let pwdSpan2 = $("pwdSpan2");
    if(pwdText2.value != pwdText.value){
        pwdSpan2.style.visibility = "visible";
    }else {
        pwdSpan2.style.visibility = "hidden";
    }
}

function ckEmail(){
    let emailText = $("emailText");
    let emailSpan = $("emailSpan");
    let emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (!emailReg.test(emailText.value)){
        emailSpan.style.visibility = "visible";
    }else {
        emailSpan.style.visibility = "hidden";
    }
}