html登錄表單驗證

原創

2020-06-21 11:20

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="index.css">
    <title>登錄</title>
</head>
<body>
    <div class="container">
        <div class="logo"></div>
        <div class="input_container">
            <div class="username">
                <label for="username">賬號:</label>
                <input type="text" id="username">
            </div>
            <p class="error"></p>
            <div class="psd">
                <label for="psd">密碼:</label>
                <input type="password" id="psd">
            </div>
            <p class="error"></p>
            <div class="phone">
                <label for="phone">手機號碼:</label>
                <input type="text" id="phone">
            </div>
            <p class="error"></p>
        </div>
        <div class="tip">
            <a href="">忘記密碼</a>
            <a href="">註冊賬號</a>
        </div>
        <div class="btn">
            <button id="login">登錄</button>
        </div>
        <div class="copy">@copy 2020</div>
    </div>
    <script src="./jquery.js"></script>
    <script src="./index.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
html,body{
	width:100%;
	height:100%
}
body {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: 'PingFang SC Regular', 'PingFang SC';
    min-width: 320px;
    max-width: 480px;
    position: relative;
    background:url("./bg.jpg") no-repeat;
    background-size:100% 100%;
}
.container{
   position: relative;
   width:100%;
   height:100%;
   display: flex;
   justify-content: center;
}
.logo{
    width: 40%;
    height: 140px;
    /* border: 1px solid #fff; */
    position: absolute;
    margin-top: 60px;
    border-radius: 50%;
    background: url('./logo.jpg');
    background-size: 100%;
}
.input_container{
    position: absolute;
    top: 230px;
}
.input_container div{
    margin-bottom: 20px;
    display: flex;
}
.input_container input{
    height: 30px;
    background:none;
    border:none;
    border-bottom:1px solid rgba(221, 221, 221, 0.603);
    outline: none;
    font-size: 18px;
    color: #fff;
    caret-color:red;
    
}
.input_container label{
    margin-right: 10px;
    display: block;
    width: 80px;
    color: #fff;
    font-size: 18px;
    text-align-last: justify;
}
.tip{
    position: absolute;
    top: 380px;
    font-size: 16px;
    width: 80%;
    height: 30px;
    /* border: 1px solid black; */
    display: flex;
    justify-content: space-around;
    line-height: 30px;
}
.tip a{
    color: #337ab7;
    text-decoration: none;
}
.btn{
    position: absolute;
    top: 430px;
    width: 80%;
    height: 40px;
    /* border: 1px solid black; */
}
.btn button{
    width: 80%;
    height: 40px;
    color: #fff;
    font-size: 16px;
    margin-left: 10%;
    border: none;
    background-color: #337ab7;
    border-radius:6px;
    cursor: pointer;
}
.copy{
    position: absolute;
    bottom: 20px;
    color: darkgrey;
    font-size: 16px;
}
.error{
    color: red;
    font-size: 15px;
    margin-bottom: 5px;
    margin-top: -10px;
    display: none;
}

JS:

$(function () {
    //成爲焦點
    var userFlag = psdFlag = phoneFlag = false;
    $('.input_container input').focus(function () {
        $(this).parent().next().hide();
    });
    //失去焦點
    //賬號驗證
    $('#username').blur(function () {
        var value = $.trim($(this).val());
        //用戶名正則，4到16位（字母，數字，下劃線，減號）
        var filter = /^[a-zA-Z0-9_-]{4,16}$/;
        // checkReg($(this), filter, value, '賬號不能爲空', '賬號格式錯誤', userFlag);
        userFlag = checkReg($(this), filter, value, '賬號不能爲空', '賬號格式錯誤');
        //console.log(userFlag)
    });
    //密碼驗證
    $('#psd').blur(function () {
        var value = $.trim($(this).val());
        //密碼正則，8到16位（字母，數字）
        var filter = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
        psdFlag=checkReg($(this), filter, value, '密碼不能爲空', '密碼格式錯誤');
        //console.log(psdFlag)
    });
    //手機驗證
    $('#phone').blur(function () {
        var value = $.trim($(this).val());
        //密碼正則，8到16位（字母，數字）
        var filter = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
        phoneFlag=checkReg($(this), filter, value, '手機號碼不能爲空', '手機號碼格式錯誤');
        //console.log(phoneFlag)
    });
    //登錄,三者驗證通過才能登錄
    $('#login').click(function () {
        if(userFlag&&psdFlag&&phoneFlag){
            alert('登錄成功')
        }else{
            alert('登錄失敗')
        }
    })
})
function checkReg(cur, filter, value, text1, text2) {
    var key =false;
    if (!value) {
        cur.parent().next().show().text(text1);
    } else if (!filter.test(value)) {
        cur.parent().next().show().text(text2);
    } else {
        cur.parent().next().hide();
        key = true;
    }
    return key
}

bg.jpg

logo.jpg