<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <base href="${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script type="text/javascript" src="js/jquery.1.11.1.js"></script>


</head>
<body style="background-image:url('img/background.jpg')">
<form id="form1" action="user" method="post" onsubmit="return validate()">
    <input type="hidden" name="url" value="register">
    <section class="container">
        <table>
            <tr>
                <td><label>用户名：</label></td>
                <td>
                    <input type="text" id="userName" name="userName"/>
                    <label style="color:red">*</label>
                    <span id="usernameMsg"></span>
                </td>
            </tr>
            <tr>
                <td><label>密码：</label></td>
                <td>
                    <input type="password" id="password" name="password"/>
                    <label style="color:red">*</label>
                    <span id="passwordMsg"></span>
                </td>
            </tr>
            <tr>
                <td><label>再次输入密码：</label></td>
                <td>
                    <input type="password" id="confirmPwd"/>
                    <label style="color:red">*</label>
                    <span id="confirmPwdMsg"></span>
                </td>
            </tr>
            <tr>
                <td><label>邮箱：</label></td>
                <td>
                    <input type="text" id="email" name="email"/>
                    <label style="color:red">*</label>
                    <span id="emailMsg"></span>
                </td>
            </tr>
            <tr>
                <td><label>验证码：</label></td>
                <td>
                    <input type="text" name="yzm"/>
                    <label style="color:red">*</label>

                    <input type="button" id="sendMsg" style="width:100px" value="获取验证码"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" id="submit" style="width:100px" value="注册"/></td>
            </tr>
        </table>
    </section>
</form>
</body>
<script>
    //在id为username的元素失去焦点时进行用户名的验证
    $("#userName").blur(function () {
        console.log("6666")
        if (($(this).val()) == '') {
            $("#usernameMsg").html("用户名不能为空");
        } else {
            var $reg = /^\w{6,}$/;
            if (!$reg.test($("#userName").val())) {
                $("#usernameMsg").html("用户名至少要6位哦");
            } else {
                $("#usernameMsg").html("√");
            }
        }
    });
    //在id为password的元素失去焦点时进行密码的验证
    $("#password").blur(function () {
        if (($(this).val()) == '') {
            $("#passwordMsg").html("用户名不能为空");
        } else {
            var $reg = /^\w{6,}$/;
            if (!$reg.test($("#password").val())) {
                $("#passwordMsg").html("密码至少要6位哦");
            } else {
                $("#passwordMsg").html("√");
            }
        }
    });
    //在id为confirmPwd的元素失去焦点时进行密码的验证
    $("#confirmPwd").blur(function () {
        if (($(this).val()) == '') {
            $("#confirmPwdMsg").html("请确认密码");
        } else {
            if ($("#password").val() != $("#confirmPwd").val()) {
                $("#confirmPwdMsg").html("两次密码不一致");
            } else {
                $("#confirmPwdMsg").html("√");
            }
        }
    });
    //在id为email的元素失去焦点时进行邮箱的验证
    $("#email").blur(function () {
        if (($(this).val()) == '') {
            $("#emailMsg").html("邮箱不能为空");
        } else {
            var $reg = /^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
            if (!$reg.test($("#email").val())) {
                $("#emailMsg").html("邮箱格式错误！");
            } else {
                $("#emailMsg").html("√").CSS("color", "green");
            }
        }
    });
    //在id为password的元素失去焦点时进行密码的验证
    $("#yzm").blur(function () {
        if (($(this).val()) == '') {
            $("#passwordMsg").html("用户名不能为空");
        } else {
            var $reg = /^\w{6,}$/;
            if (!$reg.test($("#password").val())) {
                $("#passwordMsg").html("密码至少要6位哦");
            } else {
                $("#passwordMsg").html("√");
            }
        }
    });

    //验证表单
    function validate() {
        //进行校验
        console.log("开始");
        let sn = $('span');//设置全局的span样式
        sn.css("color", "blue");

        if (($("#userName").val()) == '') {
            $("#usernameMsg").html("用户名不能为空！");
            return false;
        } else {
            var $reg = /^([a-zA-Z]|[0-9]){6,}$/;
            if (!$reg.test($("#userName").val())) {
                $("#usernameMsg").html("用户名至少6位");
                return false;
            }
        }
        $("#usernameMsg").html("");


        //验证密码
        if (($("#password").val()) == '') {
            $("#passwordMsg").html("密码不能为空");
            return false;
        } else {
            var $reg = /^([a-zA-Z]|[0-9]){6,}$/;
            if (!$reg.test($("#password").val())) {
                $("#passwordMsg").html("密码至少6位");
                return false;
            }
        }
        $("#passwordMsg").html("");
        //确认密码是否为空
        if (($("#confirmPwd").val()) == '') {
            $("#confirmPwdMsg").html("请确认密码");
            return false;
        }
        //验证两次密码是否一致
        if ($("#password").val() != $("#confirmPwd").val()) {
            $("#confirmPwdMsg").html("两次密码不一致");
            return false;
        }

        $("#confirmPwdMsg").html("");

        //验证邮箱
        let email = $('#email').val();
        let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        let you = $('#emailMsg');
        if (email == '') {
            you.html("邮箱不能为空");
            return false;
        } else {
            if (!reg.test(email)) {
                let span = $('#emailMsg');
                you.html("邮箱格式不正确");

                return false;
            }
        }
        you.html("");


        return true;
    }

</script>
</html>