javascript-表單驗證

阿新 • • 發佈：2021-06-16

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單驗證</title>
<style>
    *{
        margin 
: 0;
        padding: 0;
    }
    body{
        width:100%;
        height: 1200px;
        background-image: linear-gradient(to top right,rgba(224,73,13,0.4),rgba(4,149,245,0.5));
    }
     .box{
        width:400px;
        padding:40px;
        position:absolute;
        top:50%;
        left:50%;
        transition 
:translate(-50%,-50%);
        border-radius:24px;
        background: #191919;
        text-align:center;
        opacity: 0.9;
    }
    .box h1{
        color:white;
        text-transform: uppercase;
        font-weight: 500;
    }
    .box input[type="text"], .box input[type="password"]{
        border 
:0;
        background:none;
        display:block;
        /*  display:block;塊狀元素會單獨佔據一樣，其他元素跟他在同一行的會被迫換行，擠到下一行那裡去，inline則不會這樣。 */
        margin:20px auto;
        text-align: center;
        border:2px solid #3498db;
        padding:14px 10px;
        width:250px;
        outline:none;
        color:white;
        border-radius: 24px;
        transition:0.25s
    } 
    .box input[type="text"]:focus,.box input[type="password"]:focus{
        /* 獲得焦點以後 寬度加長 邊框顏色變成綠色 */
        width:260px;
        border-color: green;
    }
    .box input[type="submit"]{
        border:0;
        background:none;
        display:block;
        margin:20px auto;
        text-align:center;
        border:2px solid #2ecc71;
        padding:14px 40px;
        outline:none;
        color:white;
        border-radius: 24px;
        transition:0.25s;
        /* 過渡速度時間 */
    }
    .box input[type="submit"]:hover{
        background:#2ecc71;
    }
    .imsg{
        font-size: 10px;
        color:rgba(143,134,134,0.61);
    }
</style>
</head>
<body>
    <form action="" class="box" onsubmit="return formValiad.checkForm()">
        <h1>Login</h1>
        <input type="text" name="" placeholder="username" id="user" onblur="formValiad.checkUserName()"><span class="imsg" id="userInfo">請輸入使用者名稱</span>
        <input type="password" name="" placeholder="password" id="psw" onblur="formValiad.checkPassword()"><span class="imsg" id="pswInfo">請輸入密碼</span>
        <input type="text" name="" placeholder="telphone" id="tel" onblur="formValiad.checkPhone()"><span class="imsg" id="telInfo">請輸入手機號</span>
        <input type="text" name="" placeholder="email" id="email" onblur="formValiad.checkEmail()"><span class="imsg" id="emailInfo">請輸入郵箱</span>
        <input type="submit" name="" id="sub"><span class="imsg"></span>
    </form>
    <script>
        // 獲取使用者名稱 密碼 手機號
        var user=document.getElementById("user");
        var psw=document.getElementById("psw");
        var tel=document.getElementById("tel");
        var email=document.getElementById("email");
        // 獲取後面的提示資訊
        var userInfo=document.getElementById("userInfo");
        var pswInfo=document.getElementById("pswInfo");
        var telInfo=document.getElementById("telInfo");
        var emailInfo=document.getElementById("emailInfo");

        // 宣告一個驗證物件，物件裡面有儲存檢驗方法
        var formValiad={
            // 使用者名稱驗證 使用者名稱不能為空 不能小於6個字元
            checkUserName:function(){
                // 寫一個正則 使用者名稱不能低於6個字元
                var pattern=/^\w{6,}$/;
                if(user.value.length==0){
                    // 改變下面的提示訊息
                    userInfo.innerHTML="使用者名稱不能為空";
                    userInfo.style.color="red";
                    return false;

                }
                if(!pattern.test(user.value)){
                    userInfo.innerHTML="使用者名稱不得小於6位數";
                    userInfo.style.color="red";
                    return false;
                }else{
                     userInfo.innerHTML="ok";
                    userInfo.style.color="green";
                    return true
                }
            },
            // 密碼驗證
            checkPassword:function(){
                // 密碼為6-10位數
                 var pattern=/^.{6,10}$/;
                if(psw.value.length==0){
                    // 改變下面的提示訊息
                    pswInfo.innerHTML="密碼不能為空";
                    pswInfo.style.color="red";
                    return false;

                }
                if(!pattern.test(psw.value)){
                    pswInfo.innerHTML="密碼為6-10位數";
                    pswInfo.style.color="red";
                    return false;
                }else{
                    pswInfo.innerHTML="ok";
                    pswInfo.style.color="green";
                    return true
                }
            },
            // 電話驗證
            checkPhone:function(){
                
                 var pattern=/^[1][3,4,5,7,8][0-9]{9}$/;
                if(tel.value.length==0){
                    // 改變下面的提示訊息
                    telInfo.innerHTML="手機號不能為空";
                    telInfo.style.color="red";
                    return false;

                }
                if(!pattern.test(tel.value)){
                    telInfo.innerHTML="手機號不合法";
                    telInfo.style.color="red";
                    return false;
                }else{
                    telInfo.innerHTML="ok";
                    telInfo.style.color="green";
                    return true
                }
            },
            // 郵箱驗證
             checkEmail:function(){
                // 
                 var pattern= /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if(email.value.length==0){
                    // 改變下面的提示訊息
                    emailInfo.innerHTML="郵箱不能為空";
                    emailInfo.style.color="red";
                    return false;

                }
                if(!pattern.test(email.value)){
                    emailInfo.innerHTML="請輸入正確的郵箱格式!";
                    emailInfo.style.color="red";
                    return false;
                }else{
                    emailInfo.innerHTML="ok";
                    emailInfo.style.color="green";
                    return true
                }
            },
            // 表單檢測
            checkForm:function(){
                var userRes=this.checkUserName();
                var pswRes=this.checkPassword();
                var telRes=this.checkPhone();
                var emailRes=this.checkEmail();
                return userRes && pswRes && telRes && emailRes;
            }
        }
    </script>
</body>
</html>



<!-- background-image線性漸變函式：linear-gradient
            控制顏色漸變的方向
                to right -- 從左向右
                to top -- 從下到上
                to left -- 從右到左
                to bottom --- 從上到下（預設值）