【JavaWeb01】Html/CSS/JS注册页面创建(用户名/密码/邮箱正则/图片验证码)

标签: 网页开发、前端  JavaWeb项目

效果图:

                     

(注:背景图片可以在css样式里自行修改)

Register.html

<!DOCTYPE html>
<html>
<head>
    <title>login-用户登录界面</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="MyCss/Style.css" rel="stylesheet" type="text/css">
    <script src="js/gVerify.js"></script>

</head>

<script type="text/javascript">
    //onblur失去焦点事件,用户离开输入框时执行 JavaScript 代码:
    //函数1:验证用户名格式
    function validate_username(username) {
        //定义正则表达式的变量:用户名正则
        var emailReg = /^[a-zA-Z]\w{5,17}$/;
        //console.log(username);
        if (username != "" && username.search(emailReg) != -1) {
            document.getElementById("test_user").innerHTML = "<font color='green' size='3px'>√用户名格式正确</font>";
        } else {
            document.getElementById("test_user").innerHTML = "<font color='red' size='3px'>用户名格式错误</font>";
        }
    }

    //函数2:验证密码是否符合要求:匹配6位密码,由数字和字母组成:
    function validate_password(password) {
        //^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
        //测试密码:12345y
        var passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
        if (password != "" && password.search(passwordReg) != -1) {
            document.getElementById("test_pw").innerHTML = "<font color='green' size='3px'>√密码格式正确</font>";
        } else {
            document.getElementById("test_pw").innerHTML = "<font color='red' size='3px'>密码格式错误</font>";
            alert("密码有6位,由数字和字母组成!");
        }
    }

    //函数3:验证两次输入的密码是否一样
    function validate_password2(password2) {
        var password = document.getElementById("password").value;
        //测试:console.log(password);
        //测试:console.log(password2);
        if (password == "") {
            document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>密码不为空</font>";
        } else if (password == password2) {
            document.getElementById("is_test_pw").innerHTML = "<font color='green' size='3px'>√两次输入的密码相同</font>";
        } else {
            document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>两次输入的密码不相同</font>";
            console.log("密码有6位,由数字和字母组成!");
        }
    }

    //函数4:验证邮箱正则
    function validate_email(email) {
        //定义正则表达式的变量:邮箱正则
        var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

        if (email != "" && email.search(emailReg) != -1) {
            document.getElementById("test_email").innerHTML = "<font color='green' size='3px'>√邮箱格式正确</font>";
        } else {
            document.getElementById("test_email").innerHTML = "<font color='red' size='3px'>邮箱格式错误</font>";
        }
    }

    //函数4:验证表单是否已经填好
    function validate_form() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var password2 = document.getElementById("password2").value;
        var email = document.getElementById("email").value;
        //console.log("表单填写正确,可以正常提交!");

        //这三个,如果任何一个有问题,都返回false
        //[email protected]		12345y
        var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        var passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;

        if (username != "" && emailReg.test(username)) {
            if (password != "" && passwordReg.test(password)) {
                if (password2 == password) {
                    if (email != "" && emailReg.test(email)) {
                        alert("邮箱的账号不符合要求,提交失败,请重新填写!");
                        console.log("邮箱的账号不符合要求,提交失败,请重新填写!");
                    } else {
                        alert("密码不一致,提交失败,请重新填写!");
                        console.log("密码不一致,提交失败,请重新填写!");
                        return false;
                    }
                } else {
                    alert("密码格式错误,提交失败,请重新填写!");
                    console.log("密码格式错误,提交失败,请重新填写!");
                    return false;
                }
            } else {
                alert("注册的账号不符合要求,提交失败,请重新填写!");
                console.log("注册的账号不符合要求,提交失败,请重新填写!");
                return false;
            }
        } else {
            alert("信息填写正确,可以正常提交!");
            console.log("信息填写正确,可以正常提交!");
            return true;
            return false;
        }
    }

</script>

<body>
<div id="user_reg">用户注册:</div>
<form action="./servlet/RegisterServlet" method="post" name="form">
    <table>
        <tr>
            <td>请输入账号:</td>
            <td><input type="text" id="username" name="username" placeholder="6位以上用户名由字母开头"
                       onblur="validate_username(this.value)"/></td>
            <td id="test_user"></td>
        </tr>
        <tr>
            <td>请输入密码:</td>
            <td><input type="password" id="password" name="password" placeholder="6位密码由数字和字母组成"
                       onblur="validate_password(this.value)"/></td>
            <td id="test_pw"></td>
        </tr>
        <tr>
            <td>请确认密码:</td>
            <td><input type="password" id="password2" name="password2" onblur="validate_password2(this.value)"/></td>
            <td id="is_test_pw"></td>
        </tr>
        <tr>
            <td>请填入邮箱:</td>
            <td><input type="text" id="email" name="email" placeholder="请正确输入邮箱格式" onblur="validate_email(this.value)">
            </td>
            <td id="test_email"></td>
        </tr>
        <!--验证码-->
        <tr>
            <td>请输入验证码:</td>
            <td><input type="text" id="code_input" placeholder="在这个框里输入验证码">
                <p id="picyzm"></p></td>
            <td><input type="button" value="验证" id="btn"></td>
        </tr>


        <script type="text/javascript">
            //初始化验证码
            var verifyCode = new GVerify({
                id: "picyzm",
                type: "blend"
            });
            //点击按钮验证
            var code = document.getElementById("code_input");
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                var res = verifyCode.validate(code.value);
                if (res) {
                    alert("验证通过");
                } else {
                    alert("验证码错误");
                }
            }
        </script>
        <tr>
            <td></td>
            <td><input type="submit" id="submit_form" value="注册" src=" " onclick="return validate_form()"/>
                <input type="reset" value="重置"/>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

Style.css

@charset "utf-8";

/*主页css*/
body {
	background-image: url(../images/bear.jpg);
	background-repeat: no-repeat;
	/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
	background-attachment: fixed;
	/*此条属性必须设置否则可能无效*/
	/* 让背景图基于容器大小伸缩 */
	background-size: cover;

}

#user_reg {
	font-family: 微软雅黑;
	font-size: 40px;
	text-align: center;
	margin-top: 200px;
}

form {
	background-image: url(../images/bk.jpg);
	width: 800px;
	/*设置宽度,方便使其居中*/
	margin: 20px auto auto auto;
	/*上右下左*/
	font-size: 20px;
}

input {
	height: 30px;
	width: 12em;
	margin-top: 5px;
	margin-bottom: 5px;
}

/*input标签下的属性选择器*/
input[type="submit"],
input[type="reset"] {
	height: 25px;
	width: 5em;
	margin-top: 5px;
	margin-left: 6px;
}

.dropdown-content {

	display: none;

	position: absolute;

	background-color: #f9f9f9;

	min-width: 160px;

	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

	padding: 12px 16px;

	z-index: 1;

}

.dropdown:hover .dropdown-content {

	display: block;

}

/*验证码css*/
body, html {
	width: 100%;
	text-align: center;
}
#picyzm {
	width: 100px;
	height: 40px;
	display: inline-block;
	margin: 0 30px;
}
#verifyCodeDemo {
	width: 100%;
	display: flex;
	margin-top: 200px;
	justify-content: center;
}
#btn {
	margin: 30px auto;
	background-color: blue;
	color: #fff;
	border-radius: 5px;
	border: 0;
	width: 100px;
	height: 40px;
}

gVerify.js

!(function(window, document) {
    function GVerify(options) { // 创建一个图形验证码对象,接收options对象为参数
        this.options = { // 默认options参数值
            id: "", // 容器Id
            canvasId: "verifyCanvas", // canvas的ID
            width: "100", // 默认canvas宽度
            height: "30", // 默认canvas高度
            type: "blend", // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
            code: ""
        }

        if(Object.prototype.toString.call(options) == "[object Object]"){// 判断传入参数类型
            for(var i in options) { // 根据传入的参数,修改默认参数值
                this.options[i] = options[i];
            }
        }else{
            this.options.id = options;
        }

        this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
        this.options.letterArr = getAllLetter();

        this._init();
        this.refresh();
    }

    GVerify.prototype = {
        /** 版本号* */
        version: '1.0.0',

        /** 初始化方法* */
        _init: function() {
            var con = document.getElementById(this.options.id);
            var canvas = document.createElement("canvas");
            this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
            this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
            canvas.id = this.options.canvasId;
            canvas.width = this.options.width;
            canvas.height = this.options.height;
            canvas.style.cursor = "pointer";
            canvas.innerHTML = "您的浏览器版本不支持canvas";
            con.appendChild(canvas);
            var parent = this;
            canvas.onclick = function(){
                parent.refresh();
            }
        },

        /** 生成验证码* */
        refresh: function() {
            this.options.code = "";
            var canvas = document.getElementById(this.options.canvasId);
            if(canvas.getContext) {
                var ctx = canvas.getContext('2d');
            }else{
                return;
            }

            ctx.textBaseline = "middle";

            ctx.fillStyle = randomColor(180, 240);
            ctx.fillRect(0, 0, this.options.width, this.options.height);

            if(this.options.type == "blend") { // 判断验证码类型
                var txtArr = this.options.numArr.concat(this.options.letterArr);
            } else if(this.options.type == "number") {
                var txtArr = this.options.numArr;
            } else {
                var txtArr = this.options.letterArr;
            }

            for(var i = 1; i <= 4; i++) {
                var txt = txtArr[randomNum(0, txtArr.length)];
                this.options.code += txt;
                ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; // 随机生成字体大小
                ctx.fillStyle = randomColor(50, 160); // 随机生成字体颜色
                ctx.shadowOffsetX = randomNum(-3, 3);
                ctx.shadowOffsetY = randomNum(-3, 3);
                ctx.shadowBlur = randomNum(-3, 3);
                ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
                var x = this.options.width / 5 * i;
                var y = this.options.height / 2;
                var deg = randomNum(-30, 30);
                /** 设置旋转角度和坐标原点* */
                ctx.translate(x, y);
                ctx.rotate(deg * Math.PI / 180);
                ctx.fillText(txt, 0, 0);
                /** 恢复旋转角度和坐标原点* */
                ctx.rotate(-deg * Math.PI / 180);
                ctx.translate(-x, -y);
            }
            /** 绘制干扰线* */
            for(var i = 0; i < 4; i++) {
                ctx.strokeStyle = randomColor(40, 180);
                ctx.beginPath();
                ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
                ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
                ctx.stroke();
            }
            /** 绘制干扰点* */
            for(var i = 0; i < this.options.width/4; i++) {
                ctx.fillStyle = randomColor(0, 255);
                ctx.beginPath();
                ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
                ctx.fill();
            }
        },

        /** 验证验证码* */
        validate: function(code){
            var code = code.toLowerCase();
            var v_code = this.options.code.toLowerCase();
            if(code == v_code){
                return true;
            }else{
                return false;
            }
        }
    }
    /** 生成字母数组* */
    function getAllLetter() {
        var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
        return letterStr.split(",");
    }
    /** 生成一个随机数* */
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    /** 生成一个随机色* */
    function randomColor(min, max) {
        var r = randomNum(min, max);
        var g = randomNum(min, max);
        var b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    window.GVerify = GVerify;
})(window, document);

 

版权声明:本文为qq1437722579原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq1437722579/article/details/108576647