Rumah >hujung hadapan web >tutorial js >如何实现简单登录页面

如何实现简单登录页面

一个新手asal: 2017-09-30 09:52:212085semak imbas

<!DOCTYPE html><html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script>
        $(function() {
            $("input[name=&#39;uname&#39;]").blur(function() { //失去焦点
                var namestr = $(this).val();                
                    var regstr = /^[\u4e00-\u9fa5]{2,4}$/;                
                        if(!regstr.test(namestr)) {
                    $(this).parent().next().html("用户名必须是2-4个汉字").css("color", "red");                    return false;
                }                return true;
            });
            $("input[name = &#39;uname&#39;]").focus(function() { //获取焦点                
            $(this).val("");
                $(this).parent().next().html("");
            });
            $("input[name=&#39;pwd&#39;]").blur(function() {                
            var pwdstr = $(this).val();                
            var regstr = /^\w{6}$/;                
            if(!regstr.test(pwdstr)) {
                    $(this).parent().next().html("密码必须是6位数字字母下划线").css("color", "red");                    return false;
                }                return true;
            });
            $("input[name=&#39;pwd&#39;]").focus(function() {
                $(this).parent().next().html("");
            });
            $("input[name=&#39;birthday&#39;]").blur(function() {                
            var birthdaystr = $(this).val();                
            var regstr = /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(3[0-1]|2[0-9]|0?[1-9])$/;                
            if(!regstr.test(birthdaystr)) {
                    $(this).parent().next().html("日期格式不正确").css("color", "red");                    return false;
                }                
                return true;
            });
            $("input[name=&#39;birthday&#39;]").focus(function() {
                $(this).parent().next().html("");
            });
            $("input[name=&#39;email&#39;]").blur(function(){                
            var emailstr = $(this).val();                
            var regstr = /^[\w\-]+@[a-z0-9A-Z]+(\.[a-zA-Z]{2,3}){1,2}$/;                
            if(!regstr.test(emailstr)){
                    $(this).parent().next().html("邮箱格式不正确").css("color","red");                    return false;
                }                
                return true;
            });
            $("input[name=&#39;email&#39;]").focus(function(){
                $(this).parent().next().html("");
            });
            
        });   
         </script>
    <style>
        body {
            font-size: 12px;
        }
        
        #home {
            background-color: beige;
            border: solid 1px black;
            width: 550px;
            height: 185px;
            margin: auto;
            margin-top: 20px;
        }
        
        #head {
            height: 135px;
        }
        
        #foot {
            text-align: center;
        }
        
        .dl1 {
            clear: both;
            padding-left: 10px;
        }
        
        .dl1 dt {
            float: left;
            height: 30px;
            width: 80px;
            line-height: 30px;
        }
        
        .dl1 dd {
            float: left;
            height: 30px;
            line-height: 30px;
            /*width: 250px;*/
        }
        
        #btn_res {
            background-image: url(img/reset.gif);
            width: 80px;
            height: 34px;
        }
        
        #btn_sub {
            background-image: url(img/submit.gif);
            width: 80px;
            height: 34px;
        }
    </style>

    <body>
        <p id="home">
            <p id="head">
                <form action="" method="post">
                    <dl class="dl1">
                        <dt>用户名 : </dt>
                        <dd class="dd1"><input type="text" value="输入用户名" name="uname" /></dd>
                        <dd></dd>
                    </dl>
                    <dl class="dl1">
                        <dt>用户密码 : </dt>
                        <dd class="dd1"><input type="password" name="pwd" /></dd>
                        <dd></dd>
                    </dl>
                    <dl class="dl1">
                        <dt>出生日期 : </dt>
                        <dd class="dd1"><input type="text" name="birthday" /></dd>
                        <dd>yyyy-mm-dd</dd>
                    </dl>
                    <dl class="dl1">
                        <dt>用户邮箱 : </dt>
                        <dd><input type="text" name="email"/></dd>
                        <dd></dd>
                    </dl>
                </form>
            </p>
            <p id="foot">
                <input type="submit" value="" id="btn_sub" />
                <input type="reset" value="" id="btn_res" />
            </p>
        </p>
    </body>
  </html>

例图:

Atas ialah kandungan terperinci 如何实现简单登录页面. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：DOM节点内部插入的常用方法 Artikel seterusnya：jQuery表单验证的实例代码

Artikel berkaitan

Lihat lagi