JavaScript注册页面-改进版

最新推荐文章于 2023-08-20 10:32:32 发布

承北风

最新推荐文章于 2023-08-20 10:32:32 发布

阅读量203

点赞数 1

分类专栏：笔记日常学习文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_33755492/article/details/118145960

版权

笔记同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

日常学习

75 篇文章 0 订阅

订阅专栏

可以实现用户名，密码，邮箱的规范验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面 </title>
    <style>
        body{
            background: url("../image/1.jpg") no-repeat center;

        }
        .div1 {
            width: 900px;
            height: 650px;
            border: 3px solid #EEEEEE;
            background: white;
            margin: auto;
            /*居中*/
            margin-top: 25px;
            /*距离顶部边框的距离*/
        }
        .div2{
            float: left;
            margin: 50px;
        }
        .div3{
            float: left;
            margin-top: 30px;
        }
        .div4{
            float: right;
            margin:15px;
        }
        .div2 > p:first-child{
            color: gold;
            font-size: 20px;
        }
        .div2>p:last-child{
            /*设置父类是div2的p标签*/
            color: #A6A6A6;
            font-size: 20px;
        }
        .left{
            width: 150px;
            text-align: right;
            height: 60px;
        }
        .right{
            padding-left: 20px;
        }
        #username,#email,#number,#password,#name,#code,#birthday{
            width: 251px;
            height: 32px;
            border:1px solid #A6A6A6;
            border-radius: 5px;
            /*设置圆角边框 */
            padding-left: 5px;
            /*方框里字距离左边框的距离 */
        }
        #code{
            width: 110px;
        }
        #button{
            margin-top: 20px;
            width: 110px;
            height: 50px;
            background-color: gold;
            border :   1px  solid gold;
        }
        #error{
            /*定义class标签*/
            color: red;
        }
    </style>
</head>
<body>


<script>
    window.onload=function () {
        document.getElementById("form").onsubmit=function () {

            return checkusername() && checkpassword() && checkemail();

        }
        //失去焦点事件绑定的是方法对象，不是方法，所以没有小括号
        document.getElementById("username").onblur = checkusername;
        document.getElementById("password").onblur = checkpassword;
        document.getElementById("email").onblur = checkemail;
    }

    function checkusername() {
        var username = document.getElementById("username").value;
        var re_username=/^\w{6,12}$/;
        var flag = re_username.test(username);
        var im_username = document.getElementById("im_username");
        if(flag){
            im_username.innerHTML="<img width='35' height='25' src='../image/对号2.jpg'/>"
        }else{
            im_username.innerHTML="<img width='35' height='25' src='../image/错误号.jpg'/>"
        }
        return flag;
    }


    function checkpassword() {
        var password = document.getElementById("password").value;
        var re_password=/^\w{6,12}$/;
        var flag = re_password.test(password);
        var im_password = document.getElementById("im_password");
        if(flag){
            im_password.innerHTML="<img width='35' height='25' src='../image/对号2.jpg'/>"
        }else{
            im_password.innerHTML="<img width='35' height='25' src='../image/错误号.jpg'/>"
        }
        return flag;
    }

    function checkemail() {
        var email = document.getElementById("email").value;
        //获取输入框的值
        var re_email=/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
        var flag = re_email.test(email);
        //将获取的值与正则表达式比较
        var im_email = document.getElementById("im_email");
        //获取span标签中的对象
        if(flag){
            im_email.innerHTML="<img width='35' height='25' src='../image/对号2.jpg'/>"
            //修改span标签对象
        }else{
            im_email.innerHTML="<img width='35' height='25' src='../image/错误号.jpg'/>"
        }
        return flag;
    }


</script>






<div class="div1">

    <div  class="div2">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>


    <div class="div3">
    <div class="rg_form">
        <form action="#" id="form" method="post">
            <table >
                <tr>
                    <td class="left"><label for="username">请输入用户名：</label></td>
                    <td class="right"><input type="text"  name="username" id="username" placeholder="请输入用户名">
                    <span id="im_username" class="error"></span>
                    </td>
                </tr>
                <tr>
                    <td class="left"><label for="password">请输入密码：</label></td>
                    <td class="right"> <input type="text"  name="password" id="password" placeholder="请输入密码">
                        <span id="im_password" class="error"></span>
                    </td>
                </tr>
                <tr>
                    <td   class="left"><label for="email">请输入Email：</label></td>
                    <td  class="right"><input type="email"  name="email" id="email" placeholder="请输入email">
                        <span id="im_email" class="error"></span>
                    </td>
                </tr>
                <tr>
                    <td class="left"><label for="name">请输入姓名：</label></td>
                    <td class="right"><input type="text"  name="name" id="name" placeholder="请输入真实姓名"></td>
                </tr>
                <tr>
                    <td class="left"><label for="number">请输入手机号：</label></td>
                    <td class="right"><input type="number"  name="number" id="number" placeholder="请输入手机号"></td>
                </tr>
                <tr>
                    <td class="left">请选择性别：</td>
                    <td  class="right"><input type="radio"  name="gender" value="male">男
                        <input type="radio"  name="gender" value="female">女
                    </td>
                </tr>
                <tr>
                    <td class="left">出生日期：</td>
                    <td  class="right"><input type="date" name="birthday" id="birthday"></td>
                </tr>
                <tr>
                    <td class="left"><label for="code">请输入验证码：</label></td>
                    <td class="right"><input name="code" id="code">
                        <img src="../image/code.jpg" width="60" height="50">
                    </td>
                </tr>

                <tr align="center">
                    <td colspan="2"> <input type="submit"  id="button"></td>
                </tr>
            </table>
        </form>


    </div>


    </div>


    <div  class="div4">
    <P>已有账号?<a href="#">立即登录</a></P>
    </div>


</div>

</body>
</html>

效果图：

承北风

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript注册页面-改进版

可以实现用户名，密码，邮箱的规范验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登陆页面 </title> <style> body{ background: url("../image/1.jpg") no-repeat center; }
复制链接

扫一扫