簡單登陸頁面(用正則表達式驗證輸入是否符合要求)

-Advertisement-

例圖: ...

<!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='uname']").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 = 'uname']").focus(function() { //獲取焦點
                $(this).val("");
                $(this).parent().next().html("");
            });
            $("input[name='pwd']").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='pwd']").focus(function() {
                $(this).parent().next().html("");
            });
            $("input[name='birthday']").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='birthday']").focus(function() {
                $(this).parent().next().html("");
            });
            $("input[name='email']").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='email']").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>
        <div id="home">
            <div 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>
            </div>
            <div id="foot">
                <input type="submit" value="" id="btn_sub" />
                <input type="reset" value="" id="btn_res" />
            </div>
        </div>
    </body>

</html>

例圖:

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

融會貫通——深入瞭解面向對象設計原則“依賴倒轉原則”

一千個人眼裡有一千個哈姆雷特，下麵我嘗試用深入淺出的語言貫穿到“控制反轉”，“依賴註入”，“面向抽象編程”，以及“面向介面編程”這幾個概念。傳遞參數，關聯（組合&聚合）關係時，要儘量引用高層次的抽象類，使用基類和介面進行變數類型的聲明，參數類型的聲明，數據類型轉換（也是向高層次的抽象類轉），而不要 ...
天南地北雙飛客，老翅幾回寒暑

此乃內功心法，功力不濟者有害無益！O(∩_∩)O。。。 ...
【轉載】webstorm忽略node_modules目錄

轉載自：http://www.cnblogs.com/chengwb/p/6183440.html 我在使用了cnpm後node_modules之前的層級目錄變成了同一級目錄，所以目錄很多，造成webstorm讀取時卡死。網上大家列了各種方法，在這裡我歸納一下！先給大家看看一些相關鏈接。方法1 ...
純css實現table表格固定列和表頭,中間橫向滾動的思路-附案例

最近做的後臺管理系統要處理大量的表格原項目是採用的for迴圈加拼接字元串的方式實現;導致js代碼一大堆;各種單引號和雙引號的嵌套;讓人頭疼;遂引入vue.js;用v for做模板渲染;工作量頓時減輕不少,心情舒暢; 文字被強制換行了由於個別表的列數較多;文字都擠在一起向下換行了;現場慘不忍睹;於 ...
鏈接跳轉

...
閉包中的this

``` var name="pushline";//全局變數 var obj=new Object(); obj.name="jms"; obj.getName=function () { return this.name; } alert(obj.getName());//返回obj對象name ... ...
js匿名函數使用&傳參

使用 0x01 0x02 傳參 0x01 0x02 ...
Boolean()類型轉換

Boolean(value) 是把值轉換成Boolean類型 example var b1 = Boolean("");//返回false,空字元串 var b2 = Boolean("s");//返回true，非空字元串 var b3 = Boolean(0);//返回false，數字0 var ...