20220710_JavaScript_事件监听案例_注册表单验证

最新推荐文章于 2024-10-08 13:51:35 发布

PeterWarne

最新推荐文章于 2024-10-08 13:51:35 发布

阅读量139

点赞数

分类专栏： JavaWeb 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/ClarkGable/article/details/125700838

版权

JavaWeb 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

CSS代码

* {
    margin: 0;
    padding: 0;
    list-style-image: none;
}
.reg_content{
    padding: 30px;
    margin: 3px;
}
a,img {
    border: 0;
}

body {
    background-image: url("../Files/redemption001.jpg");
    background-size: cover;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
    height: 90px;
}
.inputs {
    vertical-align: top;
}

.clear {
    clear: both;
}
.clear:before, .clear:after {
    contain: "";
    display: table;
}
.clear:after {
    clear: both;
}

.form_div {
    background-color: rgba(255,255,255, 0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left: 1050px;
    padding: 30px 0 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255,255,255,0.5),0px 0px 15px rgba(75,75,75,0.3);
    text-align: left;
}

.form_div input[type="text"], .form_div input[type="password"], .form_div input[type="email"] {
    width: 268px;
    margin: 10px;
    line-height: 20px;
    font-size: 16px;
}

.form_div input[type="checkbox"] {
    margin: 20px 0 20px 10px;
}

.form_div input[type="button"], .form_div input[type="submit"] {
    margin: 10px 20px 0 0;
}

.form_div table {
    margin: 0 auto;
    text-align: right;
    color: rgba(64,64,64,1.00);
}

.form_div table img {
    vertical-align: middle;
    margin: 0 0 5px 0;
}

.footer {
    color: rgba(64,64,64,1.00);
    font-size: 12px;
    margin-top: 30px;
}

.form_div .buttons {
    float: right;
}

input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    padding: 10px;
    border: 1px solid #D4D4D4;
    color: #333333;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}

input[type="button"], input[type="submit"] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}

input[type="button"]:active, input[type="submit"]:active {
    background-color: #5a88c8;
}

.err_msg {
    color: red;
    padding-right: 170px;
}
#password_err ,#phone_num_err {
    padding-right: 195px;
}

#reg_btn {
    margin-right: 25px; width: 288px; height: 45px; margin-top: 20px;
}

html和js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome Your Registration</title>
    <link href="../CSSFiles/Appearance_For_Register_Demo.css" rel="stylesheet">
</head>
<body>
<div class="form_div">
    <div class="reg_content">
        <h1>Welcome Register</h1>
        <span>Already have an Account ?</span><a href="#">Login</a>
    </div>
    <div>
        <form id="form_reg" action="#" method="get">
            <table>

                <tr>
                    <td>Username</td>
                    <td class="input">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">Wrong format</span>
                    </td>
                </tr>

                <tr>
                    <td>Password</td>
                    <td class="input">
                        <input name="password" type="text" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">Wrong format</span>
                    </td>
                </tr>

                <tr>
                    <td>PhoneNum</td>
                    <td class="input">
                        <input name="phone_num" type="text" id="phone_num">
                        <br>
                        <span id="phone_num_err" class="err_msg" style="display: none">Wrong format</span>
                    </td>
                </tr>

            </table>

            <div class="buttons">
                <input value="Register" type="submit" id="reg_btn">
            </div>
            <br class="clear"/>
        </form>
    </div>
</div>

<script>
    //首先验证用户名是否合规，先获取输入框
    var usernameInput = document.getElementById("username")
    //元素绑定失去焦点的事件,鼠標移出輸入框時會驗證格式
    usernameInput.onblur = checkUsername

        function checkUsername () {
        var username = usernameInput.value.trim()
        //格式检查
        // var flag = username.length >= 6 && username.length <= 12
        //用正则进行验证
        var reg = /^\w{6,12}$/
        var flag = reg.test(username)
        if (flag){
            //格式正确不提示
            document.getElementById("username_err").style.display = 'none'
        }else {
            //格式不对，把none撤销，提示错误
            document.getElementById("username_err").style.display = ''
        }
        return flag
    }

    //密码的验证跟用户名就一样了
    var passwordInput = document.getElementById("password")
    //元素绑定失去焦点的事件
    passwordInput.onblur = checkPassword

        function checkPassword() {
        var password = passwordInput.value.trim()
        //格式检查
        // var flag = password.length >= 6 && password.length <= 12
        var reg = /^\w{6,12}$/
        var flag = reg.test(password)
        if (flag){
            //格式正确不提示
            document.getElementById("password_err").style.display = 'none'
        }else {
            //格式不对，把none撤销，提示错误
            document.getElementById("password_err").style.display = ''
        }
        return flag
    }

    var phone_numInput = document.getElementById("phone_num")
    //元素绑定失去焦点的事件
    phone_numInput.onblur = checkPhoneNum
        function checkPhoneNum() {
        var phone_num = phone_numInput.value.trim()
        //格式检查
        // var flag = phone_num.length == 11
        var reg = /^\d{11}$/
        var flag = reg.test(phone_num)
        if (flag){
            //格式正确不提示
            document.getElementById("phone_num_err").style.display = 'none'
        }else {
            //格式不对，把none撤销，提示错误
            document.getElementById("phone_num_err").style.display = ''
        }
        return flag
    }

    //最後檢查整個表單，先獲取對象
    var reg_form = document.getElementById("form_reg")
    //綁定onsubmit事件
    reg_form.onsubmit = function () {
        var flag = checkUsername() && checkPassword() && checkPhoneNum()

        return flag//之前的demo已經測試過，return的boolean值能決定該提交按鈕能否正常提交
    }

</script>
</body>
</html>