用户系统｜前端注册页面｜代码

regist.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ page  import="com.servlet.UserServlet" %>



    
    
    
    
    


    

        
        

        
        

            

                用 户 注 册
                

            
            

                

                    

                        
                            
                            
                        
                    
                    

                        
                            
                            
                        
                    
                    

                        
                            
                            
                        
                    
                    

                        
                            
                            
                        
                    
                    

                        
                    
                
            
        
        

            © 吉林大学珠海学院 计算机学院 ｜ 软件工程 04161408
        
    
    
    

regist.css

* {
    margin: 0;
    padding: 0;
}
.container {
    width: 1000px;
    height: 600px;
    margin: 25px auto;
    background: #4c4c4c;
}
.left {
    width: 60%;
    height: 80%;
    display: block;
    float: left;
    margin-top: 60px;
    background-image: url("./../../imgs/regist.jpg"); /*记得路径要这样写*/
}
.right {
    width: 40%;
    height: 80%;
    display: block;
    float: right;
    margin-top: 60px;
    background: #f3f9f1;
}
.reg-label {
    width: 400px;
    height: 50px;
    text-align: center;
}
.reg-label label {
    width: 400px;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    color: #4c4c4c;
}
.reg-box {
    width: 400px;
    height: 430px;
}
.reg-form {
    width: 400px;
    height: 320px;
}
.reg-form input {
    width: 60%;
    margin: 20px;
    padding: 10px;
    float: left;
    background-color: transparent;
    border: none;
    font-size: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
    outline: none;
    color: #4c4c4c;
}
.reg-form div {
    height: 80px;
}
.reg-sub {
    width: 400px;
    height: 70px;
}
.reg-sub input {
    width: 54%;
    margin: 20px 88px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 100;
    background: transparent;
    color: #4c4c4c;
    border: 1px solid rgba(0, 0, 0, 0.42);
    border-width: thin;
    cursor: pointer;
    outline: none;
    -webkit-transition: 0.5s all;
    text-decoration: none;
}
.bottom {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.bottom label {
    color: rgba(255, 255, 255, 0.56);
    font-size: 13px;
}
.reg-form label {
    font-size: 12px;
    line-height: 78px;
    color: #ff461f;
}

regist.js

/**
 * 表单提交时验证
 * @returns {boolean}
 */
function checkForm() {

    var Form = document.getElementById("formId");
    var bool = true;
    if (!InputUsernameBlur()) bool = false;
    if (!InputPasswordBlur()) bool = false;
    if (!InputRepasswordBlur()) bool = false;
    if (!InputEmailBlur()) bool = false;
    if (bool==true) {
        Form.submit();
    }
    return bool;

}

/**
 * 用户名输入框失去焦点
 */
function InputUsernameBlur() {
    var uname = document.getElementById("InputUsername");
    var ename = document.getElementById("errorName");
    /* 用户名为空/不为空 */
    if (uname.value=="") {
        ename.innerHTML="用户名不能为空。";
        return false;
    }
    else {
        ename.innerHTML="";
    }
    /* 密码长度 */
    if (uname.value.length<4 || uname.value.length>16) {
        ename.innerHTML="长度为4-16。";
        return false;
    }
    else {
        ename.innerHTML="";
    }
    return true;
}

/**
 * 密码输入框失去焦点
 */
function InputPasswordBlur() {
    var pwd = document.getElementById("InputPassword");
    var epwd = document.getElementById("errorPassword");
    /* 密码为空/不为空 */
    if (pwd.value=="") {
        epwd.innerHTML="密码不为空。"
        return false;
    }
    else {
        epwd.innerHTML="";
    }
    /* 密码长度 */
    if (pwd.value.length<6 || pwd.value.length>16) {
        epwd.innerHTML="长度为6-16。"
        return false;
    }
    else {
        epwd.innerHTML="";
    }
    return true;
}

/**
 * 邮箱输入框失去焦点
 */
function InputEmailBlur() {
    var email = document.getElementById("InputEmail");
    var eemail = document.getElementById("errorEmail");
    /* 邮箱不为空 */
    if (email.value=="") {
        eemail.innerHTML="邮箱不为空。"
        return false;
    }
    else {
        eemail.innerHTML="";
    }
    /* 邮箱格式验证 */
    var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
    if (reg.test(email.value)==false) {
        eemail.innerHTML="邮箱格式错误。";
        return false;
    }
    else {
        eemail.innerHTML="";
    }
    return true;
}

/**
 * 确认密码输入框失去焦点
 */
function InputRepasswordBlur() {
    var rpwd = document.getElementById("InputRepassword");
    var erpwd = document.getElementById("errorRepassword");
    /* 确认密码不为空 */
    if (rpwd.value=="") {
        erpwd.innerHTML="确认密码不为空。"
        return false;
    }
    else {
        erpwd.innerHTML="";
    }
    /* 确认密码与密码不一致 */
    var pwd = document.getElementById("InputPassword");
    if (pwd.value != rpwd.value) {
        erpwd.innerHTML="密码不一致。"
        return false;
    }
    else {
        erpwd.innerHTML="";
    }
    return true;
}

实际页面