html前端登錄驗證

本文轉載自查看原文 2019-06-08 16:05 2464

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-1.7.2/jquery.min.js"></script>
    <script>
    $(function(){
        //onblur: 光標離開控件，會觸發onblur事件
        $("#email").blur(function(){
            var re = /^\w+@\w+(\.\w+){1,3}$/;    
            if ( $(this).parent().find( "span" ).length > 0 ) {
                $(this).parent().find( "span" ).remove();    
            }
            if ( re.test( $(this).val() ) ) {
                $(this).after( "<span class='ok'>格式正確</span>" );
            }else {
                $(this).after( "<span class='error'>格式錯誤</span>" );
            }
        });
        $("#pwd").blur(function(){
            var re = /^\w{6,20}$/;
            if ( $(this).parent().find( "span" ).length > 0 ) {
                $(this).parent().find( "span" ).remove();    
            }
            if ( re.test( $(this).val() ) ) {
                $(this).after( "<span class='ok'>格式正確</span>" );
            }else {
                $(this).after( "<span class='error'>格式錯誤</span>" );
            }
        });
        $("#reg :submit").click(function(){
            $("#email").trigger("blur");
            $("#pwd").trigger("blur");
            if ( $("#reg").find(".error").length > 0 ) {
                return false;
            }
        });
    });    
    </script>
    <style>
    .ok {
        color:green;
    }
    .error {
        color:red;
    }
    </style>
</head>
<body>
    <form action="http://www.baidu.com" method="get" id="reg">
        <p class=emailParent>
            郵箱: <input type="text" name="email" id="email">            
        </p>
        <p>
            密碼: <input type="text" name="pwd" id="pwd">
        </p>
        <p>
            <input type="submit" id="submit" value="注冊" >
        </p>
    </form>    
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 (html)前端如何驗證token的合法性來判斷用戶是否登錄？純前端vue實現登錄的驗證碼前端登錄頁點擊獲取驗證碼的實現 layui使用html+servlet+ajax實現登錄驗證 HTML+CSS登錄界面，有數據庫的登錄驗證關於前端驗證還是后端驗證前端——HTML 由前端登錄驗證，頁面跳轉，攜帶headers token引發的思考和嘗試前端（HTML）+后端（Django）+數據庫（MySQL）：用戶注冊及登錄演示登錄驗證碼