JavaScript简单案例-登录的表单验证

最新推荐文章于 2024-04-14 17:32:42 发布

Asinber

最新推荐文章于 2024-04-14 17:32:42 发布

阅读量671

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_54105501/article/details/131022099

版权

案例用html写了一个简单的登录页面(不包含css)
只完成了基础性的登陆测试表单验证

详细见注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录案例</title>

</head>
<body>
<div class="from-div">
    <h1>欢迎注册</h1>
    <span>已有账号？</span><a href="#">登录</a>

    <form id="reg-form" action="#" method="get">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名太受欢迎</span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="text" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式错误</span>
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td class="inputs">
                    <input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式错误</span>
                </td>
            </tr>
        </table>
        <div class="button">
            <input type="submit" value="注册" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>
<script>
    //1.获取用户名是否符合规则
    //1.1获取用户输入框
    var usernameInput = document.getElementById("username");
    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3 获取用户输入的用户名
        var uaername = usernameInput.value.trim();
        //1.4 判断用户名是否符合规则   长度6-12
        var flag = username.length <= 12 && uaername.length >= 6;
        if (flag) {
            //符合规则
            document.getElementById("username_err").style.display = 'none';

        } else {
            //不符合规则
            document.getElementById("username_err").style.display = '';
        }
        return flag;
    }

    //1.获取密码是否符合规则
    //1.1获取密码输入框
    var passwordInput = document.getElementById("password");
    //1.2 绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3 获取用户输入的密码
        var password = passwordInput.value.trim();
        //1.4 判断密码是否符合规则   长度6-12
        var flag1 = password.length <= 12 && password.length >= 6
        if (flag1) {
            //符合规则
            document.getElementById("password_err").style.display = 'none';
        } else {
            //不符合规则
            document.getElementById("password_err").style.display = '';
        }
        return flag1;
    }

    //1.获取手机号是否符合规则
    //1.1获取手机号输入框
    var telInput = document.getElementById("tel");
    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3 获取用户输入的手机号
        var tel = telInput.value.trim();
        //1.4 判断手机号是否符合规则   长度11位
        var flag2 = tel.length == 11
        if (flag2) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不符合规则
            document.getElementById("tel_err").style.display = '';
        }
        return flag2;
    }

    //获取表单对象
    var regForm = document.getElementById("reg-form");
    //绑定onsubmit 事件
    regForm.onsubmit = function () {
        //挨个判断每一个表单项是否符合要求,如果有一个不符合,则返回false
        var flag = checkUsername() && checkPassword() && checkTel();
        return flag;
    }

</script>


</body>
</html>