JAVA EE之简单的注册样式

不念不忘少年蓝@ 2022-04-14 05:13 125阅读 0赞

### 效果图： ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70][] ###

###  部分代码： ###

<%--
      Created by IntelliJ IDEA.
      User: mingkunyu
      Date: 2018/11/15
      Time: 8:38 PM
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
    <html>
    <head>
        <title>注册</title>
        <%--引入bootstrap--%>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.js"></script>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootBlock.css">
    
        <style>
            body{
                background:url("img/3.jpg");
                background-size: cover;
                transition: all 1s;
                /*动画名称*/
                animation-name:myfirst;
                /*变换时间*/
                animation-duration:12s;
                /*动画开始时间*/
                animation-delay:2s;
                /*下一周期循环播放*/
                animation-iteration-count:infinite;
                /*动画开始运行*/
                animation-play-state:running;
            }
            @keyframes myfirst
            {
                0%   {  background:url("img/3.jpg");  background-size: cover;}
                34%  {  background:url("img/2.jpg");   background-size: cover;}
                67%  {  background:url("img/1.jpg");   background-size: cover;}
                100% {  background:url("img/3.jpg");   background-size: cover;}
            }
    
            #registerForm{
                position: relative;
                background: rgba(255,255,255,0.3);
                width:600px;
                margin:160px auto;
                padding: 40px;
                border-radius: 10px;
                box-shadow: 1px 1px 15px #dae4ff;
                opacity: 1;
                /*动画名称*/
                animation-name:YU;
                /*变换时间*/
                animation-duration:6s;
                /*动画开始时间*/
                /*animation-delay:1s;*/
                /*下一周期循环播放*/
                /*animation-iteration-count:infinite;*/
                /*动画开始运行*/
                animation-play-state:running;
            }
    
            @keyframes YU {
                0%   {  opacity: 0}
                100% {  opacity: 1}
            }
    
            #registerForm h1{
                text-align: center;
            }
    
            #canvas{
                position: absolute;
                top:-150px;
                /*top: 160px;*/
            }
    
    
    
    
    
    
        </style>
    </head>
    <body>
    
    
    
    <form id="registerForm" action="UserServlet" method="post">
        <input type="hidden" name="method" value="register">
        <canvas id="canvas" width="500" height="170" ></canvas>
        <h1>REGISTER</h1>
        <div class="form-group" >
            <label for="Username">Username</label><span id="checkUsername" style="float: right"></span><%--错误提示--%>
            <input type="text" class="form-control" id="Username" placeholder="Username"  name="username" onblur="checkUser()">
        </div>
        <div class="form-group">
            <label for="email">Email</label><span id="checkEmail" style="float: right"></span><%--错误提示--%>
            <input type="email" class="form-control" id="email" placeholder="Email"  name="email" onblur="checkEmail()">
        </div>
        <div class="form-group">
            <label for="Password1">Password</label><span id="checkPassword1" style="float: right"></span><%--错误提示--%>
            <input type="password" class="form-control" id="Password1" placeholder="Password" name="password1" onblur="checkPassword()">
        </div>
        <div class="form-group">
            <label for="Password2">Confirm Password</label><span id="checkPassword2" style="float: right"></span><%--错误提示--%>
            <input type="password" class="form-control" id="Password2" placeholder="Confirm Password"  name="password2" onblur="checkPasswordTwo()">
       </div>
        <div class="form-group">
            <button class="btn btn-default" onclick="return checkAll()">Sign up</button>
        </div>
    </form>
    
    
    </body>
    
        <script type="text/javascript" charset="utf-8">
    
            // 前端校验----------------------------------------------------
            function checkUser(){
                var username=$("#Username").val();
                var reg=/^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
                if(reg.test(username)){
                    if(username.length<6||username.length>18){
                        $("#checkUsername").html("<em style='color:#ff756f'>6-18位字符组成！</em>");
                        return false;
                    }else{
                        $("#checkUsername").html("<em style='color:#b1ffa4'>OK</em>");
                        return true;
                        // // 用户名唯一性检验-------
                        // $.ajax({
                        //     type: "POST",
                        //     url: "/UserServlet",
                        //     data: {username:$("#username").val(),method:"checkUsername"},
                        //     dataType: "text",
                        //     success: function(data){
                        //         alert(data);
                        //         $("#message1").html(data);
                        //
                        //     }
                        // });
    
                    }
                }else{
                    if(username.length===0){
                        $("#checkUsername").html("<em style='color:#ff756f'>必填！</em>");
                        return false;
                    }else{
                        $("#checkUsername").html("<em style='color:#ff756f'>6-18位字符组成！</em>");
                        return false;
                    }
                }
            }
    
            function checkEmail(){
                var e=$("#email").val();
                var regs=/^\w+@\w+\.\w+$/;
                if(regs.test(e)){
                    $("#checkEmail").html("<em style='color:#b1ffa4'>OK</em>");
                    return true;
                }else{
                    $("#checkEmail").html("<em style='color:#ff756f'>6-邮箱格式错误！</em>");
                    return false;
                }
            }
    
            function checkPassword(){
                var ps=$("#Password1").val();
                var regs=/^[a-zA-Z0-9]{6,18}$/;
                if(regs.test(ps)){
                    $("#checkPassword1").html("<em style='color:#b1ffa4'>OK</em>");
                    return true;
                }
                else{
                    $("#checkPassword1").html("<em style='color:#ff756f'>6-18位字符组成！</em>");
                    return false;
                }
            }
            function checkPasswordTwo(){
                var ps1=$("#Password1").val();
                var ps2=$("#Password2").val();
                if(ps1===ps2 && ps2!==""){
                    $("#checkPassword2").html("<em style='color:#b1ffa4'>OK</em>");
                    return true;
                }
                else{
                    $("#checkPassword2").html("<em style='color:#ff756f'>密码不一致！</em>");
                    return false;
                }
            }
    
    
            function checkAll(){
                if(checkUser()&& checkPassword() && checkPasswordTwo() && checkEmail()){
                   $("#registerForm").submit();
                }else{
                    return false;
                }
            }
            // 前端验证end------------------------------------------
    
    
    
    
            // 画图--------------------------------------------------
            var canvas=document.getElementById("canvas");
            var cxt=canvas.getContext("2d");
            // 右线
            cxt.beginPath();
            cxt.moveTo(250,10);	//移动至开始点
            cxt.lineTo(490,150);
            cxt.shadowColor="#c0c9e4";
            cxt.lineWidth=4;
            cxt.strokeStyle='#FFFFFF';
            cxt.lineJoin='round';//　lineJoin 属性,可以设置线的交汇处的样式
            cxt.lineCap='round'; //lineCap 属性，定义线条的端点。
            cxt.shadowBlur=15;// shadowBlur	设置或返回用于阴影的模糊级别。
            cxt.shadowOffsetX=3; // shadowOffsetX	设置或返回阴影与形状的水平距离。
            // cxt.shadowOffsetY=3;   // shadowOffsetY	设置或返回阴影与形状的垂直距离。
            cxt.globalAlpha=0.3;//透明度
            cxt.stroke();
            cxt.closePath();//填充或闭合 需要先闭合路径才能画
    
    
            // 左线
            cxt.beginPath();
            cxt.moveTo(250,10);	//移动至开始点
            cxt.lineTo(10,150);
            cxt.shadowColor='#bec8e3';
            cxt.shadowBlur=15;
            cxt.shadowOffsetX=3;
            // cxt.shadowOffsetY=-3;
            cxt.strokeStyle='#FFFFFF';
            cxt.lineJoin='round';//　lineJoin 属性,可以设置线的交汇处的样式
            cxt.lineCap='round'; //lineCap 属性，定义线条的端点
            cxt.globalAlpha=0.3;//透明度
            cxt.stroke();
            cxt.closePath();//填充或闭合 需要先闭合路径才能画
    
    
    
            // 上圆
            cxt.beginPath();
            cxt.arc(250,15,5,0,2*Math.PI);
            cxt.globalAlpha=0.4;//透明度
            cxt.shadowBlur=0;
            cxt.shadowOffsetX=0; // shadowOffsetX	设置或返回阴影与形状的水平距离。
            cxt.shadowOffsetY=0;
            cxt.stroke();
            cxt.closePath();//填充或闭合 需要先闭合路径才能画
    
            // 左圆
            cxt.beginPath();
            cxt.arc(10,150,3,0,2*Math.PI);
            cxt.globalAlpha=0.4;//透明度
            cxt.shadowBlur=0;
            cxt.shadowOffsetX=0; // shadowOffsetX	设置或返回阴影与形状的水平距离。
            cxt.shadowOffsetY=0;
            cxt.stroke();
            cxt.closePath();//填充或闭合 需要先闭合路径才能画
    
            // 右圆
            cxt.beginPath();
            cxt.arc(490,150,3,0,2*Math.PI);
            cxt.globalAlpha=0.4;//透明度
            cxt.shadowBlur=0;
            cxt.shadowOffsetX=0; // shadowOffsetX	设置或返回阴影与形状的水平距离。
            cxt.shadowOffsetY=0;
            cxt.stroke();
            cxt.closePath();//填充或闭合 需要先闭合路径才能画
            
    
    
    
        </script>
    
    
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70]: /images/20220414/7cf922357d7c454495ef838509592296.png